extjs/templates/executive-dashboard/sass/src/view/quarterly/Quarterly.scss

   1 .quarterly-main {
   2     background-color: $exec-light-background;
   3
   4     .quarterly-chart {
   5         border-radius: 3px;
   6         -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
   7         -moz-box-shadow:    0px 1px 1px 0px rgba(0, 0, 0, 0.25);
   8         box-shadow:         0px 1px 1px 0px rgba(0, 0, 0, 0.25);
   9         margin: 20px 20px 0;
  10
  11         z-index: 1000;
  12
  13         .ql-percentage {
  14             font-size: $exec-font-size-content;
  15             margin-left: 5px;
  16         }
  17
  18         .x-toolbar {
  19             background-color: $exec-tile-background;
  20             padding-top: 15px !important;
  21             padding-bottom: 0px !important;
  22             padding: 0;
  23
  24             .x-btn-arrow-right:after {
  25                 background-image: url(images/button/default-toolbar-small-arrow.png) !important;
  26             }
  27
  28             .x-btn-default-toolbar-small {
  29                 background-color: $exec-tile-background;
  30                 border-color: $exec-tile-background;
  31
  32                 .small-sub-text {
  33                     font-size: $exec-font-size-small-content;
  34                 }
  35             }
  36
  37             .x-form-item-label-inner {
  38                 color: $exec-font-light-color;
  39                 font-size: $exec-font-size-small-content;
  40                 font-weight: $exec-font-bold;
  41                 padding: 0;
  42                 margin: 0;
  43             }
  44
  45             .x-form-display-field {
  46                 font-size: $exec-font-size-medium-title;
  47                 margin: 0;
  48                 padding: 0;
  49             }
  50         }
  51     }
  52
  53     .stock-picker-small {
  54         text-align: right;
  55         padding-right: 7px;
  56
  57         .x-form-display-field {
  58             color: $exec-font-light-color !important;
  59             font-size: $exec-font-size-content !important;
  60             font-weight: $exec-font-bold !important;
  61         }
  62     }
  63
  64     .x-btn.quarterly-cycle {
  65
  66         background: none;
  67         border: none;
  68
  69         span {
  70             color: $exec-font-dark-color !important;
  71             font-size: $exec-font-size-xlarge-title !important;
  72             line-height: $exec-font-size-xlarge-title;
  73             font-weight: $exec-font-semibold;
  74         }
  75
  76         &.x-btn-focus {
  77             @include inner-border(1px, mix($exec-blue-color, #fff, 40%));
  78         }
  79
  80         .x-btn-split-right:after {
  81             background-image: url(icons/switch-icon.png) !important;
  82             background-position: center !important;
  83             width: 24px !important;
  84             padding-right: 0 !important;
  85             padding-top: 5px !important;
  86
  87             .x-ie8 & {
  88                 background-image: url(icons/switch-icon-small.png) !important;
  89             }
  90         }
  91
  92         .x-btn-tl,
  93         .x-btn-tc,
  94         .x-btn-tr,
  95         .x-btn-ml,
  96         .x-btn-mc,
  97         .x-btn-mr,
  98         .x-btn-bl,
  99         .x-btn-bc,
 100         .x-btn-br {
 101             background: none
 102         }
 103     }
 104
 105     .quarterly-dataview {
 106         padding: 10px 15px 15px;
 107     }
 108
 109     .statement-type {
 110         width: 100%;
 111         float: left;
 112         color: $exec-font-color;
 113         font-weight: bold;
 114         font-size: $exec-font-size-small-title;
 115         margin: 20px 5px 0;
 116     }
 117
 118     .thumb-title-container {
 119         float: left;
 120         padding-top: 4px;
 121     }
 122
 123     .thumb-title {
 124         color: $exec-font-dark-color;
 125         font-weight: $exec-font-bold;
 126     }
 127
 128     .thumb-title-small {
 129         color: $exec-font-color;
 130         font-size: $exec-font-size-small-content;
 131         font-weight: $exec-font-semibold;
 132     }
 133
 134     .thumb-icon {
 135         background-image: url(icons/pdf.png);
 136         height: 40px;
 137         width: 40px;
 138         background-size: contain;
 139         background-repeat: no-repeat;
 140         float: left;
 141         margin-right: 5px;
 142
 143         .x-ie8 & {
 144             background-image: url(icons/pdf-small.png);
 145         }
 146     }
 147
 148     .thumb-download {
 149         height: 40px;
 150         width: 40px;
 151
 152         background-image: url(icons/download-small.png);
 153         background-position: right center;
 154         background-repeat: no-repeat;
 155         background-size: 50%;
 156
 157         opacity: 0.5;
 158
 159         float: right;
 160     }
 161
 162     .thumb {
 163         display: table-cell;
 164         background-color: $exec-tile-background;
 165         padding: 16px;
 166         border-radius: 3px;
 167
 168         -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
 169         -moz-box-shadow:    0px 1px 1px 0px rgba(0, 0, 0, 0.25);
 170         box-shadow:         0px 1px 1px 0px rgba(0, 0, 0, 0.25);
 171     }
 172
 173     .thumb:hover {
 174         .thumb-download {
 175             opacity: 1;
 176         }
 177     }
 178
 179     .thumb-wrap{
 180         display: table;
 181         float: left;
 182         width: 50%;
 183         padding: 5px;
 184     }
 185 }
 186
 187 @media screen and (max-width: 980px) and (orientation: landscape), screen and (max-width: 760px) and (orientation: portrait) {
 188     .quarterly-main .thumb-wrap {
 189         float: none;
 190         width: 100%;
 191         padding: 5px 0;
 192     }
 193 }
 194
 195 #quarterly-menu {
 196     .x-menu-body {
 197         background-color: white;
 198         span {
 199             color: black;
 200         }
 201     }
 202     .x-menu-item-active {
 203         background-color: darken(white, 10%) !important;
 204     }
 205     .x-menu-item-checked .x-menu-item-checkbox {
 206         background-image: url("icons/group-checked-black-small.png") !important;
 207     }
 208 }
 209
 210 .ext-strict .ext-ie .x-tree .x-panel-bwrap{
 211     position:relative;
 212     overflow:hidden;
 213 }