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

   1 /*
   2  * Component: Button
   3  * -----------------
   4  */
   5
   6 .btn {
   7   .border-radius(@btn-border-radius);
   8   .box-shadow(@btn-boxshadow);
   9   border: 1px solid transparent;
  10
  11   &.uppercase {
  12     text-transform: uppercase
  13   }
  14
  15   // Flat buttons
  16   &.btn-flat {
  17     .border-radius(0);
  18     -webkit-box-shadow: none;
  19     -moz-box-shadow: none;
  20     box-shadow: none;
  21     border-width: 1px;
  22   }
  23
  24   // Active state
  25   &:active {
  26     -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  27     -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  28     box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  29   }
  30
  31   &:focus {
  32     outline: none;
  33   }
  34
  35   // input file btn
  36   &.btn-file {
  37     position: relative;
  38     overflow: hidden;
  39     > input[type='file'] {
  40       position: absolute;
  41       top: 0;
  42       right: 0;
  43       min-width: 100%;
  44       min-height: 100%;
  45       font-size: 100px;
  46       text-align: right;
  47       .opacity(0);
  48       outline: none;
  49       background: white;
  50       cursor: inherit;
  51       display: block;
  52     }
  53   }
  54 }
  55
  56 //Button color variations
  57 .btn-default {
  58   background-color: #f4f4f4;
  59   color: #444;
  60   border-color: #ddd;
  61   &:hover,
  62   &:active,
  63   &.hover {
  64     background-color: darken(#f4f4f4, 5%);
  65   }
  66 }
  67
  68 .btn-primary {
  69   background-color: @light-blue;
  70   border-color: darken(@light-blue, 5%);
  71   &:hover, &:active, &.hover {
  72     background-color: darken(@light-blue, 5%);
  73   }
  74 }
  75
  76 .btn-success {
  77   background-color: @green;
  78   border-color: darken(@green, 5%);
  79   &:hover, &:active, &.hover {
  80     background-color: darken(@green, 5%);
  81   }
  82 }
  83
  84 .btn-info {
  85   background-color: @aqua;
  86   border-color: darken(@aqua, 5%);
  87   &:hover, &:active, &.hover {
  88     background-color: darken(@aqua, 5%);
  89   }
  90 }
  91
  92 .btn-danger {
  93   background-color: @red;
  94   border-color: darken(@red, 5%);
  95   &:hover, &:active, &.hover {
  96     background-color: darken(@red, 5%);
  97   }
  98 }
  99
 100 .btn-warning {
 101   background-color: @yellow;
 102   border-color: darken(@yellow, 5%);
 103   &:hover, &:active, &.hover {
 104     background-color: darken(@yellow, 5%);
 105   }
 106 }
 107
 108 .btn-outline {
 109   border: 1px solid #fff;
 110   background: transparent;
 111   color: #fff;
 112   &:hover,
 113   &:focus,
 114   &:active {
 115     color: rgba(255, 255, 255, .7);
 116     border-color: rgba(255, 255, 255, .7);
 117   }
 118 }
 119
 120 .btn-link {
 121   .box-shadow(none);
 122 }
 123
 124 //General .btn with bg class
 125 .btn[class*='bg-']:hover {
 126   .box-shadow(inset 0 0 100px rgba(0, 0, 0, 0.2));
 127 }
 128
 129 // Application buttons
 130 .btn-app {
 131   .border-radius(3px);
 132   position: relative;
 133   padding: 15px 5px;
 134   margin: 0 0 10px 10px;
 135   min-width: 80px;
 136   height: 60px;
 137   text-align: center;
 138   color: #666;
 139   border: 1px solid #ddd;
 140   background-color: #f4f4f4;
 141   font-size: 12px;
 142   //Icons within the btn
 143   > .fa, > .glyphicon, > .ion {
 144     font-size: 20px;
 145     display: block;
 146   }
 147
 148   &:hover {
 149     background: #f4f4f4;
 150     color: #444;
 151     border-color: #aaa;
 152   }
 153
 154   &:active, &:focus {
 155     -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
 156     -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
 157     box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
 158   }
 159
 160   //The badge
 161   > .badge {
 162     position: absolute;
 163     top: -3px;
 164     right: -10px;
 165     font-size: 10px;
 166     font-weight: 400;
 167   }
 168 }