catalog-ui/app/styles/tlv-buttons.less

   1 .tlv-btn {
   2   border-radius: 2px;
   3   cursor: pointer;
   4   display: inline-block;
   5   font-family: omnes-medium, Sans-Serif;
   6   height: 32px;
   7   min-width: 96px;
   8   line-height: 30px;
   9   padding: 0 16px;
  10   text-align: center;
  11   vertical-align: middle;
  12   font-size: 14px;
  13
  14   &:disabled {
  15     opacity: .4;
  16     pointer-events: none;
  17   }
  18
  19   &.blue {
  20     background-color: #009fdb;
  21     border: 1px solid #0091c8;
  22     color: #fff;
  23
  24     &:hover {
  25       background-color: #1ec2ff;
  26     }
  27
  28     &:active {
  29       background-color: #0091c7;
  30       border: 1px solid #006186;
  31       outline: none;
  32     }
  33
  34     &:focus {
  35       border-color: #009fdb;
  36       box-shadow: inset 0 0 0 1px #fff;
  37       outline: none;
  38     }
  39   }
  40
  41   &.white {
  42     background-color: #fff;
  43     border: 1px solid #d8d8d8;
  44     color: @main_color_n;
  45
  46     &:hover {
  47       border-color: #959595;
  48     }
  49
  50     &:active {
  51       background-color: #f2f2f2;
  52       border: 1px solid #595959;
  53       outline: none;
  54     }
  55
  56     &:focus {
  57       border-color: #959595;
  58       box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #959595;
  59       outline: none;
  60
  61     }
  62
  63   }
  64
  65   &.grey {
  66     background-color: #f8f8f8;
  67     border: 1px solid #d8d8d8;
  68     color: #000;
  69
  70     &:hover {
  71       border-color: #959595;
  72     }
  73
  74     &:active {
  75       background-color: #d7d7d7;
  76       border: 1px solid #595959;
  77       outline: none;
  78     }
  79
  80     &:focus {
  81       background-color: @tlv_color_t;
  82       border-color: @main_color_n;
  83       box-shadow: inset 0 0 0 1px @main_color_p, inset 0 0 0 2px @main_color_n;
  84       outline: none;
  85
  86     }
  87
  88   }
  89
  90
  91   &.green {
  92     background-color: #4ca90c;
  93     border: 1px solid #45a006;
  94     color: #fff;
  95
  96     &:hover {
  97       background-color: #5ec616;
  98     }
  99
 100     &:active {
 101       background-color: #3f8c0a;
 102       border: 1px solid #2c6604;
 103       outline: none;
 104     }
 105
 106     &:focus {
 107       box-shadow: inset 0 0 0 1px #fff;
 108       outline: none;
 109     }
 110   }
 111
 112   &.red {
 113     background-color: #fc2727;
 114     border: 1px solid #a01a1a;
 115     color: #fff;
 116
 117     &:hover {
 118       background-color: #fc2727;
 119     }
 120
 121     &:active {
 122       background-color: #a01a1a;
 123       border: 1px solid #730202;
 124       outline: none;
 125     }
 126
 127     &:focus {
 128       box-shadow: inset 0 0 0 1px @main_color_p;
 129       outline: none;
 130     }
 131   }
 132
 133
 134   &.outline {
 135     &.blue {
 136       background-color: #fff;
 137       border: 1px solid #009fdb;
 138       color: #009fdb;
 139
 140       &:hover {
 141         background-color: #e5f5fb;
 142       }
 143
 144       &:active {
 145         background-color: #b2e2f4;
 146         border: 1px solid #009fdb;
 147         outline: none;
 148       }
 149
 150       &:focus {
 151         background-color: #fff;
 152         border-color: #009fdb;
 153         box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #009fdb;
 154         outline: none;
 155       }
 156     }
 157
 158     &.grey {
 159       background-color: #ffffff;
 160       border: 1px solid #959595;
 161       color: #5a5a5a;
 162
 163       &:hover {
 164         background-color: #f4f4f4;
 165         border-color: #959595;
 166       }
 167
 168       &:active {
 169         background-color: #dfdfdf;
 170         border: 1px solid #959595;
 171         outline: none;
 172       }
 173
 174       &:focus {
 175         background-color: #fff;
 176         border-color: #959595;
 177         box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #959595;
 178         outline: none;
 179
 180       }
 181
 182     }
 183
 184
 185     &.green {
 186       background-color: #ffffff;
 187       border: 1px solid #4ca90c;
 188       color: #4ca90c;
 189
 190       &:hover {
 191         background-color: #edf6e6;
 192         border-color: #4ca90c;
 193       }
 194
 195       &:active {
 196         background-color: #c9e5b6;
 197         border: 1px solid #4ca90c;
 198         outline: none;
 199       }
 200
 201       &:focus {
 202         background-color: #fff;
 203         border-color: #4ca90c;
 204         box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #4ca90c;
 205         outline: none;
 206       }
 207     }
 208
 209     &.red {
 210       background-color: #ffffff;
 211       border: 1px solid #cf2a2a;
 212       color: #cf2a2a;
 213
 214       &:hover {
 215         background-color: #fae9e9;
 216         border-color: #cf2a2a;
 217       }
 218
 219       &:active {
 220         background-color: #c9e5b6;
 221         border: 1px solid #cf2a2a;
 222         outline: none;
 223       }
 224
 225       &:focus {
 226         background-color: #fff;
 227         border-color: #cf2a2a;
 228         box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #cf2a2a;
 229         outline: none;
 230       }
 231     }
 232   }
 233 }
 234