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   align-items: center;
  66   border-style: solid;
  67   border-radius: 3px;
  68   border-width: 0px;
  69   cursor: pointer;
  70   display: inline-flex;
  71   font-size: 1rem;
  72   height: 50px;
  73   justify-content: center;
  74   margin: 0 10px;
  75   outline: none;
  76   padding: 0 15px;
  77   text-transform: uppercase;
  78   transition: $transition;
  79   -moz-user-select: none;
  80   -ms-user-select: none;
  81   -webkit-touch-callout: none;
  82   -webkit-user-select: none;
  83   user-select: none;
  84
  85   /* Button Content */
  86   &-content {
  87     overflow: hidden;
  88     text-overflow: ellipsis;
  89     transition: $transition;
  90     white-space: nowrap;
  91   }
  92
  93   /* Button Icon */
  94   &-icon {
  95     transition: $transition;
  96   }
  97
  98   /* Spacing between content and icon when icon is on the right */
  99   &-icon + &-content {
 100     margin-left: 10px;
 101   }
 102
 103   /* Spacing between content and icon when icon is on the left */
 104   &-content + &-icon {
 105     margin-left: 10px;
 106   }
 107
 108   /* Focus */
 109   &:focus {
 110     // box-shadow: $focus-shadow;
 111     border: 1px solid red;
 112   }
 113
 114   /* SIZES
 115   ############################################################################ */
 116
 117   &--large {
 118     width: 250px;
 119   }
 120
 121   &--medium {
 122     width: 175px;
 123   }
 124
 125   &--small {
 126     width: 85px;
 127   }
 128
 129   /* NORMAL
 130   ############################################################################ */
 131
 132   /* Base */
 133   &--normal {
 134     background: $normalBackground;
 135     border-color: darken($normalBackground, 10%);
 136
 137     .SqButton-content {
 138       color: $normalForeground;
 139     }
 140
 141     .SqButton-icon {
 142       fill: $normalForeground;
 143     }
 144   }
 145
 146   /* Hover */
 147   &--normal:hover {
 148     background: $normalHoverBackground;
 149     border-color: darken($normalHoverBackground, 10%);
 150
 151     .SqButton-content {
 152       color: $normalHoverForeground;
 153     }
 154
 155     .SqButton-icon {
 156       fill: $normalHoverForeground;
 157     }
 158   }
 159
 160   /* Active */
 161   &--normal:active {
 162     background: $normalActiveBackground;
 163     border-color: darken($normalActiveBackground, 10%);
 164
 165     .SqButton-content {
 166       color: $normalActiveForeground;
 167     }
 168
 169     .SqButton-icon {
 170       fill: $normalActiveForeground;
 171     }
 172   }
 173
 174   /* Disabled */
 175   &--normal.is-disabled {
 176     cursor: default;
 177     opacity: .55;
 178   }
 179
 180   &--normal:hover.is-disabled,
 181   &--normal:active.is-disabled {
 182     background: $normalBackground;
 183     border-color: darken($normalBackground, 10%);
 184
 185     .SqButton-content {
 186       color: $normalForeground;
 187     }
 188
 189     .SqButton-icon {
 190       fill: $normalForeground;
 191     }
 192   }
 193
 194
 195   /* PRIMARY
 196   ############################################################################ */
 197
 198   /* Base */
 199   &--primary {
 200     background: $primaryBackground;
 201     border-color: darken($primaryBackground, 10%);
 202
 203     .SqButton-content {
 204       color: $primaryForeground;
 205     }
 206
 207     .SqButton-icon {
 208       fill: $primaryForeground;
 209     }
 210   }
 211
 212   /* Hover */
 213   &--primary:hover {
 214     background: $primaryHoverBackground;
 215     border-color: darken($primaryHoverBackground, 10%);
 216
 217     .SqButton-content {
 218       color: $primaryHoverForeground;
 219     }
 220
 221     .SqButton-icon {
 222       fill: $primaryHoverForeground;
 223     }
 224   }
 225
 226   /* Active */
 227   &--primary:active {
 228     background: $primaryActiveBackground;
 229     border-color: darken($primaryActiveBackground, 10%);
 230
 231     .SqButton-content {
 232       color: $primaryActiveForeground;
 233     }
 234
 235     .SqButton-icon {
 236       fill: $primaryActiveForeground;
 237     }
 238   }
 239
 240   /* Disabled */
 241   &--primary.is-disabled {
 242     cursor: default;
 243     opacity: .55;
 244   }
 245
 246   &--primary:hover.is-disabled,
 247   &--primary:active.is-disabled {
 248     background: $primaryBackground;
 249     border-color: darken($primaryBackground, 10%);
 250
 251     .SqButton-content {
 252       color: $primaryForeground;
 253     }
 254
 255     .SqButton-icon {
 256       fill: $primaryForeground;
 257     }
 258   }
 259
 260
 261 }
 262
 263
 264
 265
 266
 267
 268
 269
 270