src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/build/less/mixins.less

   1 //AdminLTE mixins
   2 //===============
   3
   4 //Changes the color and the hovering properties of the navbar
   5 .navbar-variant(@color; @font-color: rgba(255, 255, 255, 0.8); @hover-color: #f6f6f6; @hover-bg: rgba(0, 0, 0, 0.1)) {
   6   background-color: @color;
   7   //Navbar links
   8   .nav > li > a {
   9     color: @font-color;
  10   }
  11
  12   .nav > li > a:hover,
  13   .nav > li > a:active,
  14   .nav > li > a:focus,
  15   .nav .open > a,
  16   .nav .open > a:hover,
  17   .nav .open > a:focus,
  18   .nav > .active > a {
  19     background: @hover-bg;
  20     color: @hover-color;
  21   }
  22
  23   //Add color to the sidebar toggle button
  24   .sidebar-toggle {
  25     color: @font-color;
  26     &:hover {
  27       color: @hover-color;
  28       background: @hover-bg;
  29     }
  30   }
  31 }
  32
  33 //Logo color variation
  34 .logo-variant(@bg-color; @color: #fff; @border-bottom-color: transparent; @border-bottom-width: 0) {
  35   background-color: @bg-color;
  36   color: @color;
  37   border-bottom: @border-bottom-width solid @border-bottom-color;
  38
  39   &:hover {
  40     background-color: darken(@bg-color, 1%);
  41   }
  42 }
  43
  44 //Box solid color variantion creator
  45 .box-solid-variant(@color; @text-color: #fff) {
  46   border: 1px solid @color;
  47   > .box-header {
  48     color: @text-color;
  49     background: @color;
  50     background-color: @color;
  51     a,
  52     .btn {
  53       color: @text-color;
  54     }
  55   }
  56 }
  57
  58 //Direct Chat Variant
  59 .direct-chat-variant(@bg-color; @color: #fff) {
  60   .right > .direct-chat-text {
  61     background: @bg-color;
  62     border-color: @bg-color;
  63     color: @color;
  64     &:after,
  65     &:before {
  66       border-left-color: @bg-color;
  67     }
  68   }
  69 }
  70
  71 //border radius creator
  72 .border-radius(@radius) {
  73   border-radius: @radius;
  74 }
  75
  76 //Different radius each side
  77 .border-radius(@top-left;
  78 @top-right
  79 ;
  80 @bottom-left
  81 ;
  82 @bottom-right
  83 )
  84 {
  85   border-top-left-radius: @top-left
  86 ;
  87   border-top-right-radius: @top-right
  88 ;
  89   border-bottom-right-radius: @bottom-right
  90 ;
  91   border-bottom-left-radius: @bottom-left
  92 ;
  93 }
  94
  95 //Gradient background
  96 .gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
  97   background: @color;
  98   background: -webkit-gradient(linear,
  99   left bottom,
 100   left top,
 101   color-stop(0, @start),
 102   color-stop(1, @stop));
 103   background: -ms-linear-gradient(bottom,
 104   @start,
 105   @stop);
 106   background: -moz-linear-gradient(center bottom,
 107   @start 0%,
 108   @stop 100%);
 109   background: -o-linear-gradient(@stop,
 110   @start);
 111   filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
 112 }
 113
 114 //Added 2.1.0
 115 //Skins Mixins
 116
 117 //Dark Sidebar Mixin
 118 .skin-dark-sidebar(@link-hover-border-color) {
 119   // Sidebar background color (Both .wrapper and .left-side are responsible for sidebar bg color)
 120   .wrapper,
 121   .main-sidebar,
 122   .left-side {
 123     background-color: @sidebar-dark-bg;
 124   }
 125   //User Panel (resides in the sidebar)
 126   .user-panel {
 127     > .info, > .info > a {
 128       color: #fff;
 129     }
 130   }
 131   //Sidebar Menu. First level links
 132   .sidebar-menu > li {
 133     //Section Headning
 134     &.header {
 135       color: lighten(@sidebar-dark-bg, 20%);
 136       background: darken(@sidebar-dark-bg, 4%);
 137     }
 138     //links
 139     > a {
 140       border-left: 3px solid transparent;
 141     }
 142     //Hover and active states
 143     &:hover > a, &.active > a {
 144       color: @sidebar-dark-hover-color;
 145       background: @sidebar-dark-hover-bg;
 146       border-left-color: @link-hover-border-color;
 147     }
 148     //First Level Submenu
 149     > .treeview-menu {
 150       margin: 0 1px;
 151       background: @sidebar-dark-submenu-bg;
 152     }
 153   }
 154   //All links within the sidebar menu
 155   .sidebar a {
 156     color: @sidebar-dark-color;
 157     &:hover {
 158       text-decoration: none;
 159     }
 160   }
 161   //All submenus
 162   .treeview-menu {
 163     > li {
 164       > a {
 165         color: @sidebar-dark-submenu-color;
 166       }
 167       &.active > a, > a:hover {
 168         color: @sidebar-dark-submenu-hover-color;
 169       }
 170     }
 171   }
 172   //The sidebar search form
 173   .sidebar-form {
 174     .border-radius(3px);
 175     border: 1px solid lighten(@sidebar-dark-bg, 10%);
 176     margin: 10px 10px;
 177     input[type="text"], .btn {
 178       box-shadow: none;
 179       background-color: lighten(@sidebar-dark-bg, 10%);
 180       border: 1px solid transparent;
 181       height: 35px;
 182       //.transition(all @transition-speed @transition-fn);
 183     }
 184     input[type="text"] {
 185       color: #666;
 186       .border-radius(2px, 0, 2px, 0);
 187       &:focus,
 188       &:focus + .input-group-btn .btn {
 189         background-color: #fff;
 190         color: #666;
 191       }
 192       &:focus + .input-group-btn .btn {
 193         border-left-color: #fff;
 194
 195       }
 196     }
 197     .btn {
 198       color: #999;
 199       .border-radius(0, 2px, 0, 2px);
 200     }
 201   }
 202 }
 203
 204 //Light Sidebar Mixin
 205 .skin-light-sidebar(@icon-active-color) {
 206   // Sidebar background color (Both .wrapper and .left-side are responsible for sidebar bg color)
 207   .wrapper,
 208   .main-sidebar,
 209   .left-side {
 210     background-color: @sidebar-light-bg;
 211   }
 212   .content-wrapper,
 213   .main-footer {
 214     border-left: 1px solid @gray;
 215   }
 216   //User Panel (resides in the sidebar)
 217   .user-panel {
 218     > .info, > .info > a {
 219       color: @sidebar-light-color;
 220     }
 221   }
 222   //Sidebar Menu. First level links
 223   .sidebar-menu > li {
 224     .transition(border-left-color .3s ease);
 225     //border-left: 3px solid transparent;
 226     //Section Headning
 227     &.header {
 228       color: lighten(@sidebar-light-color, 25%);
 229       background: @sidebar-light-bg;
 230     }
 231     //links
 232     > a {
 233       border-left: 3px solid transparent;
 234       font-weight: 600;
 235     }
 236     //Hover and active states
 237     &:hover > a,
 238     &.active > a {
 239       color: @sidebar-light-hover-color;
 240       background: @sidebar-light-hover-bg;
 241     }
 242     &:hover > a {
 243
 244     }
 245     &.active {
 246       border-left-color: @icon-active-color;
 247       > a {
 248         font-weight: 600;
 249       }
 250     }
 251     //First Level Submenu
 252     > .treeview-menu {
 253       background: @sidebar-light-submenu-bg;
 254     }
 255   }
 256   //All links within the sidebar menu
 257   .sidebar a {
 258     color: @sidebar-light-color;
 259     &:hover {
 260       text-decoration: none;
 261     }
 262   }
 263   //All submenus
 264   .treeview-menu {
 265     > li {
 266       > a {
 267         color: @sidebar-light-submenu-color;
 268       }
 269       &.active > a,
 270       > a:hover {
 271         color: @sidebar-light-submenu-hover-color;
 272       }
 273       &.active > a {
 274         font-weight: 600;
 275       }
 276     }
 277   }
 278   //The sidebar search form
 279   .sidebar-form {
 280     .border-radius(3px);
 281     border: 1px solid @gray; //darken(@sidebar-light-bg, 5%);
 282     margin: 10px 10px;
 283     input[type="text"],
 284     .btn {
 285       box-shadow: none;
 286       background-color: #fff; //darken(@sidebar-light-bg, 3%);
 287       border: 1px solid transparent;
 288       height: 35px;
 289       //.transition(all @transition-speed @transition-fn);
 290     }
 291     input[type="text"] {
 292       color: #666;
 293       .border-radius(2px, 0, 2px, 0);
 294       &:focus,
 295       &:focus + .input-group-btn .btn {
 296         background-color: #fff;
 297         color: #666;
 298       }
 299       &:focus + .input-group-btn .btn {
 300         border-left-color: #fff;
 301       }
 302     }
 303     .btn {
 304       color: #999;
 305       .border-radius(0, 2px, 0, 2px);
 306     }
 307   }
 308   @media (min-width: @screen-sm-min) {
 309     &.sidebar-mini.sidebar-collapse {
 310       .sidebar-menu > li > .treeview-menu {
 311         border-left: 1px solid @gray;
 312       }
 313     }
 314   }
 315 }