philo/contrib/gilbert/static/gilbert/murano/sass/murano/components/_button.scss

   1 button{
   2         margin:0;
   3         padding:0;
   4         background:none;
   5         border-width:0;
   6 }
   7
   8 .x-btn{
   9         @include background($gloss-gradient);
  10         @include box-shadow(0 0 0 1px bla($base-background-alpha*.25));
  11         @include border-radius(2px);
  12         background-color: bla($base-background-alpha*.5);
  13         border:1px solid wha(.3);
  14         border-top-color:wha(.5);
  15         border-bottom-color:wha(.05);
  16         margin:{
  17                 top:1px;
  18                 bottom:1px;
  19         };
  20         position:relative;
  21         white-space:nowrap;
  22         display:inline-block;
  23         padding:2px;
  24         em{
  25                 display:block;
  26         }
  27 }
  28
  29 .x-btn-over{
  30         border-color:$accent-color;
  31         border-top-color:lighten($accent-color, 20%);
  32         border-bottom-color:darken($accent-color, 10%);
  33 }
  34
  35 .x-btn-pressed{
  36         @extend .x-btn;
  37         background-color:wha(.2);
  38         border-color:wha(.2);
  39         border-top-color:wha(.4);
  40         border-bottom-color:wha(.1);
  41 }
  42
  43 .x-btn-menu-active{
  44         background: bla(.5);
  45         @include box-shadow(0 2px 4px 0 rgba(0,0,0,.5) inset, 0 0 0 1px bla($base-background-alpha*.25));
  46         border:1px solid wha(.5);
  47 }
  48
  49 .x-btn-inner{
  50         display:block;
  51         padding:0 5px;
  52         color:$base-text-color;
  53         background-repeat:no-repeat;
  54 }
  55
  56 $small: 16px;
  57 $medium: 24px;
  58 $large: 32px;
  59
  60 /* different sizes */
  61
  62 .x-btn-noicon, .x-btn-default-icon, .x-btn-icon-text-left, .x-btn-icon-text-right{
  63         .x-btn-inner{
  64                 line-height:$small;
  65         }
  66 }
  67
  68 .x-btn-default-medium-noicon, .x-btn-default-medium-icon-text-left, .x-btn-default-medium-icon-text-right{
  69         .x-btn-inner{
  70                 line-height:$medium;
  71         }
  72 }
  73
  74 .x-btn-default-large-noicon, .x-btn-default-large-icon-text-left, .x-btn-default-large-icon-text-right{
  75         .x-btn-inner{
  76                 line-height:$large;
  77         }
  78 }
  79
  80 /* icons
  81  * ----- */
  82
  83 /* icon only */
  84
  85 .x-btn-default-small-icon .x-btn-inner, .x-btn-icon .x-btn-inner{
  86         padding:0;
  87         width:$small;
  88         height:$small;
  89 }
  90 .x-btn-default-medium-icon .x-btn-inner{
  91         padding:0;
  92         width:$medium;
  93         height:$medium;
  94 }
  95 .x-btn-default-large-icon .x-btn-inner{
  96         padding:0;
  97         width:$large;
  98         height:$large;
  99 }
 100
 101 /* text w/ icon left */
 102
 103 .x-btn-icon-text-left{
 104         background-position:0 center;
 105 }
 106
 107 .x-btn-icon-text-left .x-btn-inner{
 108         padding-left:$small+2px;
 109 }
 110 .x-btn-default-medium-icon-text-left .x-btn-inner{
 111         padding-left:$medium+2px;
 112 }
 113 .x-btn-default-large-icon-text-left .x-btn-inner{
 114         padding-left:$large+2px;
 115 }
 116
 117 /* text w/ icon top */
 118
 119 .x-btn-icon-text-top .x-btn-inner{
 120         background-position:center 2px;
 121 }
 122 .x-btn-default-small-icon-text-top .x-btn-inner{
 123         padding-top:$small+2px;
 124 }
 125 .x-btn-default-medium-icon-text-top .x-btn-inner{
 126         padding-top:$medium+2px;
 127 }
 128 .x-btn-default-large-icon-text-top .x-btn-inner{
 129         padding-top:$large+2px;
 130 }
 131
 132 /* text w/ icon right */
 133
 134 .x-btn-icon-text-right .x-btn-inner{
 135         background-position: right center;
 136 }
 137 .x-btn-default-small-icon-text-right .x-btn-inner{
 138         padding-right:$small+2px;
 139 }
 140 .x-btn-default-medium-icon-text-right .x-btn-inner{
 141         padding-right:$medium+2px;
 142 }
 143 .x-btn-default-large-icon-text-right .x-btn-inner{
 144         padding-right:$large+2px;
 145 }
 146
 147 /* text w/ icon bottom */
 148
 149 .x-btn-icon-text-bottom .x-btn-inner{
 150         background-position: center bottom;
 151 }
 152 .x-btn-default-small-icon-text-bottom .x-btn-inner{
 153         padding-bottom:$small;
 154 }
 155 .x-btn-default-medium-icon-text-bottom .x-btn-inner{
 156         padding-bottom:$medium;
 157 }
 158 .x-btn-default-large-icon-text-bottom .x-btn-inner{
 159         padding-bottom:$large;
 160 }
 161
 162 /* arrow on right */
 163 .x-btn-arrow-right{
 164         padding-right:14px;
 165         background: transparent theme-image($theme-name, 'btn/menu.png') right center no-repeat;
 166 }
 167
 168 /* arrow on botton */
 169 .x-btn-arrow-bottom{
 170         padding-bottom:14px;
 171         background: transparent theme-image($theme-name, 'btn/menu.png') center bottom no-repeat;
 172 }
 173
 174 /* split on right */
 175
 176 .x-btn-split-right{
 177         padding-right:16px;
 178         background: transparent theme-image($theme-name, 'btn/splith.png') right center no-repeat;
 179         display:block;
 180 }
 181
 182 /* split on bottom */
 183
 184 .x-btn-split-bottom{
 185         padding-bottom:16px;
 186         background: transparent theme-image($theme-name, 'btn/splitv.png') center bottom no-repeat;
 187         display:block;
 188 }