utils/test/reporting/3rd_party/sass/components/_button.scss

   1 ///\r
   2 /// Phantom by HTML5 UP\r
   3 /// html5up.net | @ajlkn\r
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
   5 ///\r
   6 \r
   7 /* Button */\r
   8 \r
   9         input[type="submit"],\r
  10         input[type="reset"],\r
  11         input[type="button"],\r
  12         button,\r
  13         .button {\r
  14                 @include vendor('appearance', 'none');\r
  15                 @include vendor('transition', (\r
  16                         'background-color #{_duration(transition)} ease-in-out',\r
  17                         'color #{_duration(transition)} ease-in-out',\r
  18                         'box-shadow #{_duration(transition)} ease-in-out'\r
  19                 ));\r
  20                 background-color: transparent;\r
  21                 border-radius: _size(border-radius);\r
  22                 border: 0;\r
  23                 box-shadow: inset 0 0 0 (_size(border-width) * 2) _palette(fg);\r
  24                 color: _palette(fg) !important;\r
  25                 cursor: pointer;\r
  26                 display: inline-block;\r
  27                 font-size: 0.8em;\r
  28                 font-weight: _font(weight-bold);\r
  29                 height: 3.5em;\r
  30                 letter-spacing: _font(letter-spacing);\r
  31                 line-height: 3.45em;\r
  32                 overflow: hidden;\r
  33                 padding: 0 1.25em 0 #{1.25em + _font(letter-spacing)};\r
  34                 text-align: center;\r
  35                 text-decoration: none;\r
  36                 text-overflow: ellipsis;\r
  37                 text-transform: uppercase;\r
  38                 white-space: nowrap;\r
  39 \r
  40                 &.icon {\r
  41                         &:before {\r
  42                                 margin-right: 0.5em;\r
  43                         }\r
  44                 }\r
  45 \r
  46                 &.fit {\r
  47                         display: block;\r
  48                         margin: 0 0 (_size(element-margin) * 0.5) 0;\r
  49                         width: 100%;\r
  50                 }\r
  51 \r
  52                 &:hover {\r
  53                         color: _palette(accent1) !important;\r
  54                         box-shadow: inset 0 0 0 (_size(border-width) * 2) _palette(accent1);\r
  55                 }\r
  56 \r
  57                 &:active {\r
  58                         background-color: transparentize(_palette(accent1), 0.9);\r
  59                 }\r
  60 \r
  61                 &.small {\r
  62                         font-size: 0.6em;\r
  63                 }\r
  64 \r
  65                 &.big {\r
  66                         font-size: 1em;\r
  67                 }\r
  68 \r
  69                 &.special {\r
  70                         box-shadow: none;\r
  71                         background-color: _palette(fg);\r
  72                         color: _palette(bg) !important;\r
  73 \r
  74                         &:hover {\r
  75                                 background-color: _palette(accent1);\r
  76                         }\r
  77 \r
  78                         &:active {\r
  79                                 background-color: darken(_palette(accent1), 8);\r
  80                         }\r
  81                 }\r
  82 \r
  83                 &.disabled,\r
  84                 &:disabled {\r
  85                         @include vendor('pointer-events', 'none');\r
  86                         opacity: 0.25;\r
  87                 }\r
  88         }