src/examples/navigationview/resources/sass/sencha-touch.scss

   1 $base-gradient: matte;
   2 $list-pressed-color: mix(#08679F, #fff, 10);
   3 $list-active-color: mix(#043F62, #fff, 0);
   4
   5 //import the sencha touch theme
   6 @import 'sencha-touch/default';
   7 @import 'sencha-touch/default/all';
   8
   9 //blue toolbar
  10 @include sencha-toolbar-ui('sencha', #06517E, matte);
  11 .x-toolbar-sencha .x-title {
  12     text-shadow: 0 1px 0 rgba(0,0,0,.8);
  13 }
  14
  15 //buttons
  16 @include sencha-button-ui('sencha', #2E9A3E, matte);
  17
  18 // contacts
  19 .x-contacts {
  20     .x-list-item > .x-innerhtml {
  21         font-weight: bold;
  22         line-height: 18px;
  23                                 min-height: 61px;
  24
  25         > span {
  26             display: block;
  27             font-size: 14px;
  28             font-weight: normal;
  29             color: #666;
  30         }
  31     }
  32
  33     .headshot {
  34         float: left;
  35         height: 37px;
  36         width: 37px;
  37         margin-right: 10px;
  38         background-size: cover;
  39         background-position: center center;
  40         background: #ddd;
  41         @include border-radius(3px);
  42         -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.6);
  43     }
  44
  45     .x-item-pressed,
  46     .x-item-selected {
  47         border-top-color: #D1D1D1 !important;
  48     }
  49 }
  50
  51 // show contact
  52 .x-show-contact {
  53     background: #EEEEEE;
  54
  55     .top {
  56         padding: 22px;
  57         height: 100px;
  58
  59         > * {
  60             float: left;
  61         }
  62
  63         .headshot {
  64             height: 60px;
  65             width: 60px;
  66             margin-right: 10px;
  67             background-size: cover;
  68             background-position: center center;
  69             @include border-radius(10px);
  70             border: 1px solid #444;
  71             -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.4);
  72         }
  73
  74         .name {
  75             width: 195px;
  76             padding-top: 0;
  77             font-size: 22px;
  78             font-weight: bold;
  79
  80             span {
  81                 display: block;
  82                 font-size: 14px;
  83                 font-weight: normal;
  84                 color: #666;
  85             }
  86
  87             a:link {
  88                 color: #3f9b26;
  89                 text-decoration: none;
  90             }
  91         }
  92     }
  93 }
  94
  95 //custom shadow on map
  96 .x-map {
  97     &:before {
  98         content: '';
  99         position: absolute;
 100         top: 0;
 101         left: 0;
 102         right: 0;
 103         bottom: 0;
 104         z-index: 999;
 105                                 pointer-eventS:none;
 106         -webkit-box-shadow: inset 0 3px 3px rgba(0,0,0,.4);
 107     }
 108 }
 109
 110
 111 .x-toolbar-inner {
 112     .x-layout-hbox {
 113         position: relative;
 114
 115         #editButton,
 116         #saveButton {
 117             position: absolute;
 118             right: 0;
 119             top: .4em;
 120         }
 121     }
 122 }