src/examples/touchstyle/resources/sass/app.scss

   1 $include-button-uis: false;
   2 $include-default-icons: false;
   3
   4 @import 'sencha-touch/base';
   5 @import 'sencha-touch/base/all';
   6 @import 'sencha-touch/default';
   7
   8 @import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700);
   9
  10 @import 'sencha-touch/default/src/carousel/Carousel';
  11
  12 body,
  13 .x-fullscreen, .x-layout-fit-item, .x-layout-card-item {
  14     background: #000;
  15 }
  16
  17 .x-toolbar {
  18     height: 64px;
  19     position: relative;
  20     z-index: 10;
  21
  22     .x-toolbar-inner {
  23         background: url(../images/toolbar.png) center;
  24         height: 60px;
  25     }
  26
  27     .x-container {
  28         height: 60px;
  29         padding-left: 12px;
  30     }
  31
  32     .x-title {
  33         visibility: hidden;
  34     }
  35
  36     .x-button {
  37         border: 0;
  38         height: 33px;
  39         padding-left: 40px;
  40         background: url(../images/back.png) top left no-repeat;
  41
  42         .x-button-label {
  43             color: #797979;
  44             font-family: 'Quattrocento Sans', sans-serif;
  45             line-height: 32px;
  46             font-weight: 700;
  47
  48             .x-phone & {
  49                 visibility: hidden;
  50             }
  51         }
  52
  53         > * {
  54             display: inline-block;
  55         }
  56     }
  57 }
  58
  59 // Categories list
  60 .categories-list {
  61     text-align: center;
  62
  63     .categories-list-container {
  64         max-width: 1024px;
  65         margin: 0 auto;
  66     }
  67
  68     .categories-list-item {
  69         background: rgba(38, 38, 38, .5);
  70         border: 1px solid rgba(67, 67, 67, .5);
  71         height: 180px;
  72         -webkit-transition: background .2s ease-in, border-color .2s ease-in;
  73
  74         body.x-phone & {
  75             margin: 0 20px;
  76             margin-top: 20px;
  77             padding: 30px;
  78
  79             &:first-child {
  80                 margin-top: 0;
  81             }
  82         }
  83
  84         body:not(.x-phone) & {
  85             display: inline-block;
  86             padding: 30px 50px;
  87         }
  88
  89         .image {
  90             background-color: #fff;
  91             background-position: center;
  92             background-repeat: no-repeat;
  93             height: 87px;
  94             max-width: 212px;
  95
  96             body.x-phone & {
  97                 margin: 0 auto;
  98             }
  99
 100             body:not(.x-phone) & {
 101                 width: 212px;
 102             }
 103         }
 104
 105         .name {
 106             padding-top: 20px;
 107             font-size: 20px;
 108             text-shadow: 0 1px 0 #000;
 109             color: #fff;
 110             font-family: 'Quattrocento Sans', sans-serif;
 111         }
 112
 113         .x-landscape & {
 114             margin: 10px;
 115         }
 116
 117         .x-portrait & {
 118             margin: 20px;
 119         }
 120     }
 121
 122     .x-item-pressed {
 123         background: rgba(0, 53, 41, .7);
 124         border-color: rgba(0, 53, 41, .8);
 125     }
 126
 127     .categories-list-inner {
 128         line-height: 10px;
 129
 130         .x-landscape & {
 131             padding-top: 10px;
 132         }
 133
 134         .x-portrait & {
 135             padding-top: 20px;
 136             padding-bottom: 20px;
 137         }
 138     }
 139
 140     &.root {
 141         background-image: url(../images/bg.jpg);
 142         background-position: top center;
 143         background-repeat: no-repeat;
 144
 145         body:not(.x-phone).x-landscape & {
 146             .categories-list-item {
 147                 &:first-child {
 148                     margin-right: 345px;
 149                 }
 150             }
 151         }
 152
 153         .x-phone & {
 154             .categories-list-inner {
 155                 padding-top: 100px;
 156             }
 157         }
 158
 159         body:not(.x-phone).x-portrait & {
 160             .categories-list-inner {
 161                 padding-top: 280px;
 162             }
 163         }
 164     }
 165 }
 166
 167 // Products
 168 .products {
 169     background: #fff;
 170
 171     .x-innerhtml {
 172         display: table;
 173         table-layout: fixed;
 174         width: 100%;
 175         height: 100%;
 176         border: 1px solid #ccc;
 177         border-width: 0 1px 1px 0;
 178
 179         .x-phone & {
 180             border-right: 0;
 181             border-bottom: 0;
 182         }
 183     }
 184
 185     .row {
 186         display: table-row;
 187
 188         > * {
 189             display: table-cell;
 190         }
 191
 192         &:last-child .product {
 193             border-bottom: 0;
 194         }
 195     }
 196
 197     .product {
 198         background-size: 80%;
 199         background-position: center;
 200         background-repeat: no-repeat;
 201         border-width: 0 1px 1px 0;
 202         border-style: solid;
 203         border-color: #ddd;
 204         text-align: center;
 205
 206         .image {
 207             height: 160px;
 208             background-repeat: no-repeat;
 209             background-position: center center;
 210         }
 211
 212         img {
 213             @include border-radius;
 214         }
 215
 216         .name {
 217             width: 100%;
 218             padding: 20px 10px 5px 10px;
 219             color: #014637;
 220             font-size: 16px;
 221             font-family: 'Quattrocento Sans', sans-serif;
 222             white-space: nowrap;
 223             overflow: hidden;
 224             text-overflow: ellipsis;
 225         }
 226
 227         .price {
 228             width: 100%;
 229             font-size: 12px;
 230             color: #aaa;
 231             font-family: 'Quattrocento Sans', sans-serif;
 232             white-space: nowrap;
 233             overflow: hidden;
 234             text-overflow: ellipsis;
 235         }
 236     }
 237
 238     .landscape .product {
 239         width: 25%;
 240
 241         .image {
 242             margin-top: 36px;
 243         }
 244     }
 245
 246     .portrait .product {
 247         width: 33%;
 248
 249         .image {
 250             margin-top: 18px;
 251         }
 252     }
 253 }
 254
 255 .product-view {
 256     background: #fff;
 257     padding: 30px;
 258
 259     .product-view-inner {
 260         .description {
 261             padding-left: 15px;
 262
 263             ul li {
 264                 list-style: disc outside none;
 265                 margin-left: 25px;
 266             }
 267         }
 268
 269         .name {
 270             font-family: 'Quattrocento Sans', sans-serif;
 271             line-height: 28px;
 272             font-size: 20px;
 273             font-weight: 700;
 274             color: #014637;
 275         }
 276
 277         .text {
 278             font-size:14px;
 279             color: #aaa;
 280             line-height: 20px;
 281         }
 282
 283         .x-img {
 284             background-size: contain;
 285             background-repeat: no-repeat;
 286             background-position: center center;
 287         }
 288     }
 289 }
 290
 291 .product-view,
 292 .products {
 293     a:link,
 294     a:active,
 295     a:visited {
 296         display: block;
 297         @include background-gradient(#028257, glossy);
 298         @include border-radius(5px);
 299         border: 1px solid darken(#028257, 10);
 300         margin: 30px 60px;
 301         text-align: center;
 302         padding: 10px;
 303         font-size: 22px;
 304         font-family: 'Quattrocento Sans', sans-serif;
 305         font-weight: bold;
 306         color: #fff;
 307         text-shadow: 0 -1px 0 rgba(0,0,0,.3);
 308         text-decoration: none;
 309     }
 310 }
 311
 312 .products a {
 313     margin-top: 0;
 314 }