git.roojs.org Git - ratchet/blob - lib/css/buttons.css

   1 /* General button styles
   2 -------------------------------------------------- */
   3
   4 [class*="button"] {
   5   position: relative;
   6   display: inline-block;
   7   padding: 4px 12px;
   8   margin: 0;
   9   font-weight: bold;
  10   line-height: 18px;
  11   color: #333;
  12   text-align: center;
  13   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  14   vertical-align: top;
  15   cursor: pointer;
  16   background-color: #f8f8f8;
  17   background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%);
  18   background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%);
  19   border: 1px solid rgba(0, 0, 0, .3);
  20   border-radius: 3px;
  21   box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .05);
  22 }
  23
  24 /* Active */
  25 [class*="button"]:active {
  26   padding-top: 5px;
  27   padding-bottom: 3px;
  28   color: #333;
  29   background-color: #ccc;
  30   background-image: none;
  31   box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2);
  32 }
  33
  34 /* Button modifiers
  35 -------------------------------------------------- */
  36
  37 /* Overriding styles for buttons with modifiers  */
  38 .button-main,
  39 .button-positive,
  40 .button-negative {
  41   color: #fff;
  42   text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
  43 }
  44
  45 /* Main button */
  46 .button-main {
  47   background-color: #1eafe7;
  48   background-image: -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%);
  49   background-image: linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%);
  50   border: 1px solid #117aaa;
  51 }
  52
  53 /* Positive button  */
  54 .button-positive {
  55   background-color: #34ba15;
  56   background-image: -webkit-linear-gradient(top, #34ba15 0, #2da012 100%);
  57   background-image: linear-gradient(to bottom, #34ba15 0, #2da012 100%);
  58   border: 1px solid #278f0f;
  59 }
  60
  61 /* Negative button  */
  62 .button-negative {
  63   background-color: #e71e1e;
  64   background-image: -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%);
  65   background-image: linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%);
  66   border: 1px solid #b51a1a;
  67 }
  68
  69 /* Active state for buttons with modifiers */
  70 .button-main:active,
  71 .button-positive:active,
  72 .button-negative:active {
  73   color: #fff;
  74 }
  75 .button-main:active {
  76   background-color: #0876b1;
  77 }
  78 .button-positive:active {
  79   background-color: #298f11;
  80 }
  81 .button-negative:active {
  82   background-color: #b21a1a;
  83 }
  84
  85 /* Block level buttons (full width buttons) */
  86 .button-block {
  87   display: block;
  88   padding: 11px 0 13px;
  89   margin-bottom: 10px;
  90   font-size: 16px;
  91 }
  92
  93 /* Active state for block level buttons */
  94 .button-block:active {
  95   padding: 12px 0;
  96 }
  97
  98 /* Counts in buttons
  99 -------------------------------------------------- */
 100
 101 /* Generic styles for all counts within buttons */
 102 [class*="button"] [class*="count"] {
 103   padding-top: 2px;
 104   padding-bottom: 2px;
 105   margin-right: -4px;
 106   margin-left: 4px;
 107   text-shadow: none;
 108   background-color: rgba(0, 0, 0, .2);
 109   box-shadow: inset 0 1px 1px -1px #000000, 0 1px 1px -1px #fff;
 110 }
 111
 112 /* Position counts within block level buttons
 113    Note: These are absolutely positioned so that text of button isn't "pushed" by count and always
 114    stays at true center of button */
 115 .button-block [class*="count"] {
 116   position: absolute;
 117   right: 0;
 118   padding-top: 4px;
 119   padding-bottom: 4px;
 120   margin-right: 10px;
 121 }