src/resources/themes/stylesheets/sencha-touch/bb10/src/_Button.scss

   1 //// Toolbar icons used with permission from Drew Wilson
   2 //// http://pictos.drewwilson.com/
   3 //// Pictos icons are (c) 2010 Drew Wilson
   4
   5 /**
   6  * @class Ext.Button
   7  */
   8
   9 $button-border-radius: 5px;
  10
  11 .x-button {
  12     height: 35px;
  13     padding: 0 3px;
  14     border-color: #CECACE;
  15     @include border-radius($button-border-radius);
  16     @include background(linear-gradient(color-stops(#C6C3C6, #E7E7E7)));
  17     position: relative;
  18
  19     &:before {
  20         content: '';
  21         position: absolute;
  22         top: 1px;
  23         right: 1px;
  24         bottom: 1px;
  25         left: 1px;
  26         border: 1px solid #B9B7B9;
  27         @include border-radius(4px);
  28         @include background(linear-gradient(color-stops(#FFFFFF, #DEDFDE)));
  29     }
  30
  31     .x-button-label {
  32         color: #252525;
  33     }
  34 }
  35
  36 .x-button-icon {
  37     width: 40px;
  38     height: 40px;
  39     background-size: 36px;
  40     background-position: bottom center;
  41 }
  42
  43 .x-button-pressing {
  44     border-color: #5E5E5E;
  45     @include background(linear-gradient(color-stops(#404040, #858585)));
  46
  47     &:before {
  48         border-color: #565656;
  49         @include background(linear-gradient(color-stops(#2E85A1, #0C8AB2)));
  50     }
  51
  52     .x-button-label {
  53         color: #FAFAFA;
  54     }
  55 }
  56
  57 .x-button-round,
  58 .x-button-decline-round,
  59 .x-button-confirm-round {
  60     @include border-radius(20px);
  61
  62     &:before {
  63         @include border-radius(19px);
  64     }
  65 }
  66
  67 .x-button-label {
  68     position: relative;
  69     font-size: 14px;
  70     padding: 0 5px;
  71 }
  72
  73 .x-badge {
  74     right: 5px;
  75 }
  76
  77 // Toolbar buttons
  78
  79 .x-toolbar {
  80     .x-button {
  81         margin: 0 5px;
  82         padding: 0 10px;
  83     }
  84 }
  85
  86 .x-toolbar-light {
  87     .x-button {
  88         border-color: #0A5A88;
  89         @include background(linear-gradient(color-stops(#05608F, #04557F)));
  90         @include box-shadow(0 0 0 1px #1C79AD);
  91
  92         &:before {
  93             border-color: #10618A;
  94             @include background(linear-gradient(color-stops(#3498CB, #0974A8)));
  95             @include box-shadow(inset 0 1px 0 0 #55AAD5);
  96         }
  97     }
  98
  99     .x-button-label {
 100         color: #fff;
 101     }
 102
 103     .x-button-pressed,
 104     .x-button-pressing {
 105         border-color: #061C27;
 106         @include background(linear-gradient(color-stops(#020C10, #0A2B3B)));
 107         @include box-shadow(0 0 0 1px #3889B7);
 108
 109         &:before {
 110             border-color: #0A2532;
 111             @include background(linear-gradient(color-stops(#122D3A, #0D4662)));
 112             @include box-shadow(inset 0 -1px 0 0 #1B4E64);
 113         }
 114     }
 115 }
 116
 117 .x-toolbar-dark {
 118     .x-button,
 119     .x-button-pressing {
 120         border-color: #060606;
 121         @include background(linear-gradient(color-stops(#010101, #060606)));
 122         @include box-shadow(0 0 0 1px #393939);
 123
 124         &:before {
 125             border-color: #010101;
 126             @include background(linear-gradient(color-stops(#404040, #262626)));
 127             @include box-shadow(inset 0 1px 0 0 #404040);
 128         }
 129     }
 130
 131     .x-button-label {
 132         color: #fff;
 133     }
 134
 135     .x-button-pressed,
 136     .x-button-pressing {
 137         &:before {
 138             @include background(linear-gradient(color-stops(#235F71, #0D6681)));
 139             @include box-shadow(inset 0 -1px 0 0 #176982);
 140         }
 141     }
 142 }
 143
 144 .x-toolbar-plain,
 145 .x-toolbar-neutral {
 146     .x-button-pressed,
 147     .x-button-pressing {
 148         .x-button-label {
 149             color: #fff;
 150         }
 151
 152         &:before {
 153             @include background(linear-gradient(color-stops(#235F71, #0D6681)));
 154             @include box-shadow(inset 0 -1px 0 0 #176982);
 155         }
 156     }
 157 }
 158
 159 // Back button
 160
 161 .x-toolbar .x-button-back,
 162 .x-toolbar .x-button-forward {
 163     height: 100%;
 164     margin: 0 !important;
 165     border: 0;
 166     @include border-radius(0);
 167     @include box-shadow(none);
 168     background: transparent;
 169     background-image: none;
 170     @include st-box-orient(vertical);
 171     overflow: hidden;
 172
 173     .x-button-icon {
 174         margin: 0 auto;
 175         display: block;
 176         height: 42px;
 177         background-image: theme_image('bb10', "icons/ic_previous.png");
 178         background-size: 30px;
 179         background-position: center 8px;
 180
 181         &:before {
 182             content: '';
 183         }
 184     }
 185
 186     &:before {
 187         background: transparent;
 188         background-image: none;
 189     }
 190
 191     &.x-button-pressed,
 192                 &.x-button-pressing {
 193         background: transparent;
 194         background-image: none;
 195
 196         &:before {
 197             background: transparent;
 198             background-image: none;
 199         }
 200     }
 201
 202     &.x-button-pressing .x-badge {
 203                         display: block !important;
 204                         position: absolute;
 205                         left: 0px;
 206                         width: 4px;
 207                         top: 4px;
 208                         bottom: 4px;
 209                         border-radius: 0px;
 210                         padding: 0px;
 211                         border: 0px;
 212                         min-width: 4px;
 213     }
 214
 215                 .x-button-label {
 216                         margin: 0 0 3px;
 217                         font-size: 10px;
 218                         line-height: 12px;
 219                         min-width: 29px;
 220                 }
 221
 222     .x-landscape & {
 223         .x-button-icon {
 224             margin-top: 8px;
 225             background-position: center 4px;
 226         }
 227     }
 228 }
 229
 230 .x-toolbar .x-button-back {
 231     padding: 0 30px 0 14px;
 232
 233     &:before {
 234         @include rotate(10deg);
 235         right: 6px;
 236         top: -15px;
 237         bottom: -15px;
 238         border-color: #0f76c2;
 239         border-width: 0 2px 0 0;
 240         @include border-radius(0);
 241     }
 242 }
 243
 244 .x-toolbar .x-button-forward {
 245     padding: 0 14px 0 20px;
 246
 247     &:before {
 248         @include rotate(-6deg);
 249         left: 5px;
 250         top: -5px;
 251         bottom: -5px;
 252         border-color: $base-color;
 253         border-width: 0 0 0 2px;
 254         @include border-radius(0);
 255     }
 256
 257     .x-button-icon {
 258         background-image: theme_image('bb10', "icons/ic_next.png");
 259     }
 260 }
 261
 262 // Badges
 263
 264 .x-hasbadge {
 265     overflow: visible;
 266 }
 267
 268 .x-badge {
 269     background-color: #0378B2;
 270     border: 1px solid #0796D0;
 271     @include border-radius(3px);
 272     color: #fff;
 273     padding: 1px 3px;
 274     right: -2px;
 275     top: -2px;
 276 }
 277
 278 // Icons
 279
 280 .x-button-icon {
 281     width: 1.5em;
 282     height: 1.5em;
 283
 284     &:before {
 285         color: #fff;
 286         font-size: 24px;
 287         line-height: .9em;
 288     }
 289 }
 290
 291 @if $include-default-icons {
 292     @include icon('calendar');
 293     @include icon('action');
 294     @include icon('add');
 295     @include icon('arrow_down');
 296     @include icon('arrow_left');
 297     @include icon('arrow_right');
 298     @include icon('arrow_up');
 299     @include icon('compose');
 300     @include icon('delete');
 301     @include icon('organize');
 302     @include icon('refresh');
 303     @include icon('reply');
 304     @include icon('search');
 305     @include icon('settings');
 306     @include icon('star');
 307     @include icon('trash');
 308     @include icon('maps');
 309     @include icon('locate');
 310     @include icon('home');
 311     @include icon('bookmarks');
 312     @include icon('download');
 313     @include icon('favorites');
 314     @include icon('info');
 315     @include icon('more');
 316     @include icon('time');
 317     @include icon('user');
 318     @include icon('team');
 319     @include icon('list');
 320 }