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;
 115     border-color: darken($normalHoverBackground, 10%);
 116   }
 117
 118   /* SIZES
 119   ############################################################################ */
 120
 121   &--large {
 122     width: 250px;
 123   }
 124
 125   &--medium {
 126     width: 175px;
 127   }
 128
 129   &--small {
 130     width: 85px;
 131   }
 132
 133   /* NORMAL
 134   ############################################################################ */
 135
 136   /* Base */
 137   &--normal {
 138     background: $normalBackground;
 139     border-color: darken($normalBackground, 10%);
 140
 141     .SqButton-content {
 142       color: $normalForeground;
 143     }
 144
 145     .SqButton-icon {
 146       fill: $normalForeground;
 147     }
 148   }
 149
 150   /* Hover */
 151   &--normal:hover {
 152     background: $normalHoverBackground;
 153     border-color: darken($normalHoverBackground, 10%);
 154
 155     .SqButton-content {
 156       color: $normalHoverForeground;
 157     }
 158
 159     .SqButton-icon {
 160       fill: $normalHoverForeground;
 161     }
 162   }
 163
 164   /* Active */
 165   &--normal:active {
 166     background: $normalActiveBackground;
 167     border-color: darken($normalActiveBackground, 10%);
 168
 169     .SqButton-content {
 170       color: $normalActiveForeground;
 171     }
 172
 173     .SqButton-icon {
 174       fill: $normalActiveForeground;
 175     }
 176   }
 177
 178   /* Disabled */
 179   &--normal.is-disabled {
 180     cursor: default;
 181     opacity: .55;
 182   }
 183
 184   &--normal:hover.is-disabled,
 185   &--normal:active.is-disabled {
 186     background: $normalBackground;
 187     border-color: darken($normalBackground, 10%);
 188
 189     .SqButton-content {
 190       color: $normalForeground;
 191     }
 192
 193     .SqButton-icon {
 194       fill: $normalForeground;
 195     }
 196   }
 197
 198
 199   /* PRIMARY
 200   ############################################################################ */
 201
 202   /* Base */
 203   &--primary {
 204     background: $primaryBackground;
 205     border-color: darken($primaryBackground, 10%);
 206
 207     .SqButton-content {
 208       color: $primaryForeground;
 209     }
 210
 211     .SqButton-icon {
 212       fill: $primaryForeground;
 213     }
 214   }
 215
 216   /* Hover */
 217   &--primary:hover {
 218     background: $primaryHoverBackground;
 219     border-color: darken($primaryHoverBackground, 10%);
 220
 221     .SqButton-content {
 222       color: $primaryHoverForeground;
 223     }
 224
 225     .SqButton-icon {
 226       fill: $primaryHoverForeground;
 227     }
 228   }
 229
 230   /* Active */
 231   &--primary:active {
 232     background: $primaryActiveBackground;
 233     border-color: darken($primaryActiveBackground, 10%);
 234
 235     .SqButton-content {
 236       color: $primaryActiveForeground;
 237     }
 238
 239     .SqButton-icon {
 240       fill: $primaryActiveForeground;
 241     }
 242   }
 243
 244   /* Disabled */
 245   &--primary.is-disabled {
 246     cursor: default;
 247     opacity: .55;
 248   }
 249
 250   &--primary:hover.is-disabled,
 251   &--primary:active.is-disabled {
 252     background: $primaryBackground;
 253     border-color: darken($primaryBackground, 10%);
 254
 255     .SqButton-content {
 256       color: $primaryForeground;
 257     }
 258
 259     .SqButton-icon {
 260       fill: $primaryForeground;
 261     }
 262   }
 263 }
 264
 265 .sqButtonGroup {
 266   display: -ms-flexbox;
 267   display: flex;
 268   -ms-flex-pack: center;
 269       justify-content: center;
 270 }
 271
 272
 273
 274
 275
 276
 277