skyquake/framework/widgets/button/button.scss

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 @import '../../style/_colors.scss';
  20 @import '../../style/variables.scss';
  21
  22 button{
  23     color: #000000;
  24     display: inline-block;
  25     font-size: 0.75rem;
  26     padding: 0.75rem 3rem;
  27     text-decoration: none;
  28     text-transform: uppercase;
  29     box-shadow: 2px 2px rgba(0, 0, 0, 0.15);
  30     cursor: pointer;
  31     margin:0 1rem;
  32   &.light {
  33     background-color: #ffffff;
  34     border: 1px solid #cccccc;
  35     border-top: 0;
  36     &.small {
  37       padding:0.25rem 1rem;
  38     }
  39   }
  40
  41   &.dark {
  42     background-color: #333333;
  43     border: 1px solid #000000;
  44     border-top: 0;
  45     color: #ffffff;
  46     &:hover,&:active {
  47       background: #00acee;
  48       color: #ffffff;
  49     }
  50   }
  51
  52
  53 }
  54
  55 /* IMPORTS
  56 ############################################################################ */
  57
  58
  59
  60
  61 /* BUTTON
  62 ############################################################################ */
  63
  64 .SqButton {
  65   -ms-flex-align: center;
  66       align-items: center;
  67   border-style: solid;
  68   border-radius: 3px;
  69   border-width: 0px;
  70   cursor: pointer;
  71   display: -ms-inline-flexbox;
  72   display: inline-flex;
  73   font-size: 1rem;
  74   height: 50px;
  75   -ms-flex-pack: center;
  76       justify-content: center;
  77   margin: 0 10px;
  78   outline: none;
  79   padding: 0 15px;
  80   text-transform: uppercase;
  81   transition: $transition;
  82   -moz-user-select: none;
  83   -ms-user-select: none;
  84   -webkit-touch-callout: none;
  85   -webkit-user-select: none;
  86   user-select: none;
  87
  88   /* Button Content */
  89   &-content {
  90     overflow: hidden;
  91     text-overflow: ellipsis;
  92     transition: $transition;
  93     white-space: nowrap;
  94   }
  95
  96   /* Button Icon */
  97   &-icon {
  98     transition: $transition;
  99   }
 100
 101   /* Spacing between content and icon when icon is on the right */
 102   &-icon + &-content {
 103     margin-left: 10px;
 104   }
 105
 106   /* Spacing between content and icon when icon is on the left */
 107   &-content + &-icon {
 108     margin-left: 10px;
 109   }
 110
 111   /* Focus */
 112   &:focus {
 113     /* box-shadow: $focus-shadow;*/
 114     border: 1px solid red;
 115   }
 116
 117   /* SIZES
 118   ############################################################################ */
 119
 120   &--large {
 121     width: 250px;
 122   }
 123
 124   &--medium {
 125     width: 175px;
 126   }
 127
 128   &--small {
 129     width: 85px;
 130   }
 131
 132   /* NORMAL
 133   ############################################################################ */
 134
 135   /* Base */
 136   &--normal {
 137     background: $normalBackground;
 138     border-color: darken($normalBackground, 10%);
 139
 140     .SqButton-content {
 141       color: $normalForeground;
 142     }
 143
 144     .SqButton-icon {
 145       fill: $normalForeground;
 146     }
 147   }
 148
 149   /* Hover */
 150   &--normal:hover {
 151     background: $normalHoverBackground;
 152     border-color: darken($normalHoverBackground, 10%);
 153
 154     .SqButton-content {
 155       color: $normalHoverForeground;
 156     }
 157
 158     .SqButton-icon {
 159       fill: $normalHoverForeground;
 160     }
 161   }
 162
 163   /* Active */
 164   &--normal:active {
 165     background: $normalActiveBackground;
 166     border-color: darken($normalActiveBackground, 10%);
 167
 168     .SqButton-content {
 169       color: $normalActiveForeground;
 170     }
 171
 172     .SqButton-icon {
 173       fill: $normalActiveForeground;
 174     }
 175   }
 176
 177   /* Disabled */
 178   &--normal.is-disabled {
 179     cursor: default;
 180     opacity: .55;
 181   }
 182
 183   &--normal:hover.is-disabled,
 184   &--normal:active.is-disabled {
 185     background: $normalBackground;
 186     border-color: darken($normalBackground, 10%);
 187
 188     .SqButton-content {
 189       color: $normalForeground;
 190     }
 191
 192     .SqButton-icon {
 193       fill: $normalForeground;
 194     }
 195   }
 196
 197
 198   /* PRIMARY
 199   ############################################################################ */
 200
 201   /* Base */
 202   &--primary {
 203     background: $primaryBackground;
 204     border-color: darken($primaryBackground, 10%);
 205
 206     .SqButton-content {
 207       color: $primaryForeground;
 208     }
 209
 210     .SqButton-icon {
 211       fill: $primaryForeground;
 212     }
 213   }
 214
 215   /* Hover */
 216   &--primary:hover {
 217     background: $primaryHoverBackground;
 218     border-color: darken($primaryHoverBackground, 10%);
 219
 220     .SqButton-content {
 221       color: $primaryHoverForeground;
 222     }
 223
 224     .SqButton-icon {
 225       fill: $primaryHoverForeground;
 226     }
 227   }
 228
 229   /* Active */
 230   &--primary:active {
 231     background: $primaryActiveBackground;
 232     border-color: darken($primaryActiveBackground, 10%);
 233
 234     .SqButton-content {
 235       color: $primaryActiveForeground;
 236     }
 237
 238     .SqButton-icon {
 239       fill: $primaryActiveForeground;
 240     }
 241   }
 242
 243   /* Disabled */
 244   &--primary.is-disabled {
 245     cursor: default;
 246     opacity: .55;
 247   }
 248
 249   &--primary:hover.is-disabled,
 250   &--primary:active.is-disabled {
 251     background: $primaryBackground;
 252     border-color: darken($primaryBackground, 10%);
 253
 254     .SqButton-content {
 255       color: $primaryForeground;
 256     }
 257
 258     .SqButton-icon {
 259       fill: $primaryForeground;
 260     }
 261   }
 262 }
 263
 264 .sqButtonGroup {
 265   display: -ms-flexbox;
 266   display: flex;
 267   -ms-flex-pack: center;
 268       justify-content: center;
 269 }
 270
 271
 272
 273
 274
 275
 276