examples/app/nested-loading/resources/sass/nested-loading.scss

   1 $base-color: #ddd;
   2
   3 $font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
   4
   5 @import 'compass';
   6 @import 'ext4/default/all';
   7
   8 $highlight-background-color: #7b8b9d;
   9
  10 $header-background-color: darken($highlight-background-color, 30);
  11 $sidebar-background-color: #eaeaea;
  12 $review-background-color: lighten($highlight-background-color, 20);
  13
  14 /**
  15  * Application header
  16  */
  17 .app-header {
  18     padding: 10px;
  19
  20     @include background-gradient($header-background-color, 'matte');
  21
  22     color: #fff;
  23     font-size: 16px;
  24     font-weight: bold;
  25     text-align: center;
  26     text-shadow: 0 1px 0 darken($header-background-color, 15);
  27
  28     border-bottom: 1px solid darken($header-background-color, 15) !important;
  29 }
  30
  31 //for browsers that dont support linear gradients
  32 .x-nlg {
  33     .app-header {
  34         background: url(../images/legacy/header-bg.png) repeat-x;
  35     }
  36 }
  37
  38 /**
  39  * Sidebar
  40  */
  41 .sidebar-list {
  42     //border-right: 1px solid $panel-border-color !important;
  43
  44     background: $sidebar-background-color;
  45
  46     .x-item-selected {
  47         color: #fff;
  48         font-weight: bold;
  49         text-shadow: 0 1px 0 darken($highlight-background-color, 20);
  50
  51         border-color: $highlight-background-color;
  52
  53         @include background-gradient($highlight-background-color, 'matte');
  54     }
  55 }
  56
  57 //for browsers that dont support linear gradients
  58 .x-nlg {
  59     .sidebar-list {
  60         .x-item-selected {
  61             background: url(../images/legacy/sidebar-selected-bg.png) repeat-x;
  62         }
  63     }
  64 }
  65
  66 .sidebar-title {
  67     color: #666;
  68     font-size: 11px;
  69     font-weight: bold;
  70     text-transform: uppercase;
  71     text-shadow: 0 1px 0 lighten(#e8ecf1, 10);
  72
  73     padding: 5px;
  74 }
  75
  76 .product {
  77     border-width: 1px 0;
  78     border-style: solid;
  79     border-color: $sidebar-background-color;
  80
  81     padding: 3px 10px;
  82
  83     font-size: 12px;
  84 }
  85
  86 /**
  87  * Reviews
  88  */
  89 .review-list {
  90     @include background-gradient($review-background-color, 'recessed');
  91
  92     border: 1px solid darken($review-background-color, 10);
  93
  94     color: darken($highlight-background-color, 40);
  95     font-size: 12px;
  96
  97     padding: 0;
  98
  99     .review-title {
 100         color: lighten($highlight-background-color, 40);
 101         font-size: 20px;
 102         text-shadow: 0 1px 0 darken($review-background-color, 10);
 103
 104         @include background-gradient($header-background-color, 'matte');
 105
 106         padding: 10px;
 107
 108         span {
 109             color: lighten($highlight-background-color, 2);
 110         }
 111     }
 112
 113     .review {
 114         margin: 10px;
 115         padding: 10px;
 116
 117         background: lighten($review-background-color, 20);
 118
 119         line-height: 18px;
 120
 121         .title {
 122             font-size: 13px;
 123             font-weight: bold;
 124
 125             img {
 126                 position: relative;
 127                 top: 1px;
 128
 129                 margin-right: 1px;
 130             }
 131         }
 132
 133         .author {
 134             color: darken($highlight-background-color, 30);
 135             font-size: 11px;
 136
 137             margin-bottom: 5px;
 138
 139             span {
 140                 color: darken($highlight-background-color, 40);
 141                 font-weight: bold;
 142             }
 143         }
 144     }
 145 }
 146
 147 /**
 148  *
 149  */
 150 .item-ct {
 151     table {
 152         margin: 50px auto;
 153     }
 154
 155     .img {
 156         padding-right: 10px;
 157         margin-right: 10px;
 158
 159         border-right: 1px solid $panel-border-color;
 160
 161         text-align: right;
 162     }
 163
 164     .name {
 165         font-size: 28px;
 166         font-weight: bold;
 167         text-wrap: nowrap;
 168
 169         span {
 170             color: $highlight-background-color;
 171         }
 172     }
 173
 174     .author {
 175         color: #333;
 176         font-size: 18px;
 177
 178         border-bottom: 1px solid #eaeaea;
 179
 180         padding-bottom: 10px;
 181         margin-bottom: 10px;
 182
 183         span {
 184             color: #000;
 185         }
 186     }
 187 }
 188