extjs/examples/modern/oreilly/sass/src/view/Main.scss

   1 //@include icon('team');
   2 //@include icon('info');
   3 //@include icon('time');
   4 //@include icon('locate');
   5 //@include icon('chat');
   6 //@include icon('action');
   7
   8 @include sencha-tabbar-ui('gray', #111, 'matte', lighten($base-color, 10%));
   9 //@include sencha-toolbar-ui('dark', darken($base-color, 10%), $base-gradient);
  10 @include sencha-toolbar-ui('gray', #ccc);
  11
  12 a, .link {
  13     color: $base-color !important;
  14 }
  15 a:visited {
  16     color: lighten($base-color, 15%) !important;
  17 }
  18
  19 h3 {
  20     margin-top: 0.3em;
  21     font-size: 1.2em;
  22 }
  23 h4 {
  24     color: #999;
  25     margin-bottom: 0.3em;
  26 }
  27
  28
  29 .x-list-item-label > .session {
  30
  31     @include st-box;
  32     @include st-box-orient(horizontal);
  33     @include st-box-align(center);
  34
  35     .title {
  36         @include st-box-flex(1);
  37         font-weight: bold;
  38         font-size: 95%;
  39         overflow: hidden;
  40         text-overflow: ellipsis;
  41         white-space: nowrap;
  42     }
  43
  44     .room {
  45         font-size: 10px !important;
  46         color: $base-color;
  47         margin-left: .5em;
  48         white-space: nowrap;
  49         overflow: hidden;
  50         text-overflow: ellipsis;
  51     }
  52
  53 }
  54
  55 .sessionInfo {
  56
  57     padding: 0.9em;
  58     background: #fff;
  59
  60     h3 {
  61         font-size: 1.2em;
  62         margin-bottom: .1em;
  63         small {
  64             color: $base-color;
  65         }
  66     }
  67     h4 {
  68         font-size: 0.9em;
  69         color: #999;
  70         margin-bottom: .5em;
  71     }
  72     p {
  73         font-size: 0.8em;
  74         line-height: 1.5em;
  75     }
  76 }
  77
  78 .x-list-header.dark {
  79     color: #000;
  80     font-size: 0.7em;
  81     padding: 0.4em 1.3em;
  82 }
  83
  84 .tweets {
  85     h2 {
  86         padding-bottom: 3px;
  87     }
  88     img {
  89         float: left;
  90     }
  91     .tweet {
  92         font-size: 70%;
  93         margin-left: 60px;
  94         min-height: 50px;
  95     }
  96     .x-list-item {
  97         border-top: 1px solid white;
  98     }
  99     .posted {
 100         float: right;
 101     }
 102 }
 103
 104 .tweets {
 105     h2 {
 106         font-weight: bold;
 107     }
 108     img {
 109         border-radius: 5px;
 110         max-width: 50px;
 111         max-height: 50px;
 112     }
 113     .tweet {
 114         color: #333;
 115     }
 116 }
 117
 118 .x-list-item.speaker {
 119
 120     font-size: 0.9em;
 121     line-height: 1.4em;
 122
 123     .avatar {
 124         background-position: center center;
 125         -webkit-border-radius: 0.5em;
 126         float: left;
 127         border: 0;
 128         border-radius: 0.5em;
 129         width: 45px;
 130         height: 45px;
 131         background-size: 47px auto;
 132     }
 133     h3 {
 134         font-weight: bold;
 135         margin-left: 60px;
 136     }
 137     h4 {
 138         color: #999;
 139         margin-left: 60px;
 140     }
 141 }
 142
 143 .speakerInfo {
 144
 145     background: #fff;
 146
 147     .header {
 148         @include background-gradient(#eee);
 149         border-bottom: 1px solid #ccc;
 150         border-top: 1px solid #ddd;
 151         padding: 1em 0.8em;
 152     }
 153
 154     .avatar {
 155         background-position: center center;
 156         -webkit-border-radius: 0.5em;
 157         float: left;
 158         border: 0;
 159         border-radius: 0.5em;
 160         margin-right: 10px;
 161         width: 60px;
 162         height: 60px;
 163         background-size: 62px auto;
 164     }
 165
 166     p {
 167         color: #333;
 168         line-height: 1.5em;
 169         padding: 0.4em 1.2em;
 170         font-size: 0.8em;
 171     }
 172 }
 173
 174 .video {
 175     line-height: 1.5em;
 176     .thumb {
 177         margin: -0.6em;
 178         width: 2.6em;
 179         height: 2.6em;
 180         background-color: #eee;
 181         background-size: 2.6em auto;
 182         background-position: center center;
 183         float: left;
 184         margin-right: 0.6em;
 185     }
 186     .name {
 187         font-weight: bold;
 188         font-size: 0.85em;
 189         display: block;
 190         white-space: nowrap;
 191         overflow: hidden;
 192         text-overflow: ellipsis;
 193     }
 194 }
 195
 196 .htmlPage {
 197
 198     background: #fff;
 199     color: #333;
 200     line-height: 1.5em;
 201     font-size: 0.8em;
 202     padding: 0.4em 1.2em;
 203
 204     p {
 205         padding: 0.4em 0;
 206     }
 207
 208     .sponsor_list_heading {
 209         font-weight: bold;
 210     }
 211     .sponsorList {
 212         margin: 10px 0 25px 0;
 213         padding-left: 0;
 214         list-style-type: none;
 215         overflow: hidden;
 216
 217         li {
 218             display: block;
 219             float: left;
 220             margin-right: 20px;
 221             height: 50px;
 222             img {
 223                 max-height: 50px;
 224             }
 225         }
 226     }
 227 }