skyquake/plugins/composer/src/src/styles/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 'variables';
  20 .Button {
  21         display: inline-block;
  22         vertical-align: middle;
  23         margin: 2px;
  24         border: 1px solid transparent;
  25         border-radius: 3px;
  26         padding: 3px 6px;
  27         &:hover {
  28                 cursor: pointer;
  29         }
  30         &.primary-action {
  31                 border-color: rgba(34, 34, 34, 0.38);
  32                 box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.65);
  33         }
  34         &:hover {
  35                 color: #ffffff;
  36                 border-color: rgba(34, 34, 34, 0.38);
  37                 box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.65);
  38                 background-color: #7E9BC1;
  39         }
  40         &:active, &:visited{
  41                 background-color:#4C5E74;
  42         }
  43         img {
  44                 width: 20px !important;
  45                 height: 20px !important;
  46                 margin: 0;
  47                 box-shadow: none;
  48                 vertical-align: middle;
  49         }
  50         span {
  51                 vertical-align: middle;
  52                 font-size: 12px;
  53                 font-variant: small-caps;
  54                 text-transform: uppercase;
  55                 margin-left: 3px;
  56                 white-space: nowrap;
  57         }
  58         &.inline-hint {
  59                 display: inline-block !important;
  60                 transform: scale(0.7);
  61                 vertical-align: baseline;
  62                 img {
  63                         width: 13px;
  64                         height: 13px;
  65                 }
  66                 span {
  67                         font-size: 11px;
  68                 }
  69         }
  70 }