Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 espaco 1 
//## Light2 theme color file
2 
 
3 
@import '../../../global/_variables';  // global metronic framework variables
4 
@import '../../../global/components/_mixins'; // global metronic framework mixings
5 
 
6 
@import '../_variables'; // theme level variables
7 
 
8 
 
9 
// Theme Colors Settigns
10 
 
11 
// Main settings
12 
$theme-name:                                                            "light2";
13 
$brand-main-color:                                                      #3FD5C0 !default;
14 
$brand-main-font-color:                                                 #ffffff !default;
15 
 
16 
// Body and header
17 
$bg-color:                                                              #F6F6F6 !default;
18 
$header-bg-color:                                                       #E1E1E1 !default;
19 
 
20 
// Mega Menu
21 
$header-hor-menu-bg-color:                                              $header-bg-color;
22 
$header-hor-menu-fixed-border-box:                                      0px 1px 10px 0px rgba($header-hor-menu-bg-color, 0.2);
23 
 
24 
//** Default Mega Menu
25 
$header-hor-menu-mega-menu-header-font-color:                           darken($header-hor-menu-bg-color, 60%);
26 
 
27 
$header-hor-menu-default-link-font-color:                               darken($header-hor-menu-bg-color, 60%);
28 
$header-hor-menu-default-link-font-color-on-hover:                      darken($header-hor-menu-default-link-font-color, 5%);
29 
$header-hor-menu-default-link-font-color-on-active:                     lighten($header-hor-menu-default-link-font-color, 90%);
30 
 
31 
$header-hor-menu-default-link-icon-color:                               darken($header-hor-menu-bg-color, 35%);
32 
$header-hor-menu-default-link-icon-color-on-hover:                      lighten($header-hor-menu-default-link-icon-color, 5%);
33 
$header-hor-menu-default-link-icon-color-on-active:                     lighten($header-hor-menu-default-link-icon-color, 30%);
34 
 
35 
$header-hor-menu-default-link-bg-color-on-hover:                        lighten($header-bg-color, 5%);
36 
$header-hor-menu-default-link-bg-color-on-active:                       $brand-main-color;
37 
 
38 
// Default Mega Menu Sub Menu
39 
$header-hor-menu-dropdown-menu-bg-color:                                $header-hor-menu-default-link-bg-color-on-hover;
40 
$header-hor-menu-box-shadow:                                            5px 5px rgba(darken($header-hor-menu-dropdown-menu-bg-color, 40%), 0.2);
41 
 
42 
$header-hor-menu-dropdown-menu-link-bg-color-on-active:                 darken($header-hor-menu-default-link-bg-color-on-hover, 4%);
43 
$header-hor-menu-dropdown-menu-link-bg-color-on-hover:                  darken($header-hor-menu-default-link-bg-color-on-hover, 4%);
44 
 
45 
$header-hor-menu-dropdown-menu-link-font-color:                         darken($header-hor-menu-bg-color, 80%);
46 
$header-hor-menu-dropdown-menu-link-font-color-on-hover:                darken($header-hor-menu-dropdown-menu-link-font-color, 14%);
47 
$header-hor-menu-dropdown-menu-link-font-color-on-active:               darken($header-hor-menu-dropdown-menu-link-font-color, 14%);
48 
 
49 
$header-hor-menu-dropdown-menu-link-icon-color:                         lighten($header-hor-menu-dropdown-menu-link-font-color, 34%);
50 
$header-hor-menu-dropdown-menu-link-icon-color-on-hover:                darken($header-hor-menu-dropdown-menu-link-icon-color, 14%);
51 
$header-hor-menu-dropdown-menu-link-icon-color-on-active:               darken($header-hor-menu-dropdown-menu-link-icon-color, 14%);
52 
 
53 
//** Light Mega Menu
54 
$header-light-hor-menu-mega-menu-header-font-color:                     #666;
55 
 
56 
$header-light-hor-menu-default-link-font-color:                         $header-hor-menu-default-link-font-color;
57 
$header-light-hor-menu-default-link-font-color-on-hover:                $header-hor-menu-default-link-font-color-on-hover;
58 
$header-light-hor-menu-default-link-font-color-on-active:               $header-hor-menu-default-link-font-color-on-active;
59 
 
60 
$header-light-hor-menu-default-link-icon-color:                         $header-hor-menu-default-link-icon-color;
61 
$header-light-hor-menu-default-link-icon-color-on-hover:                $header-hor-menu-default-link-icon-color-on-hover;
62 
$header-light-hor-menu-default-link-icon-color-on-active:               $header-hor-menu-default-link-icon-color-on-active;
63 
 
64 
$header-light-hor-menu-default-link-bg-color-on-hover:                  $header-hor-menu-default-link-bg-color-on-hover;
65 
$header-light-hor-menu-default-link-bg-color-on-active:                 $header-hor-menu-default-link-bg-color-on-active;
66 
 
67 
$header-light-hor-menu-default-link-bg-color-on-onen:                   lighten(#FAFAFC, 2%);
68 
$header-light-hor-menu-default-link-font-color-on-onen:                 #333;
69 
$header-light-hor-menu-default-link-icon-color-on-onen:                 #333;
70 
 
71 
// Light Mega Menu Sub Menu
72 
$header-light-hor-menu-dropdown-menu-bg-color:                          $header-light-hor-menu-default-link-bg-color-on-onen;
73 
$header-light-hor-menu-box-shadow:                                      5px 5px rgba(#666, 0.1);
74 
 
75 
$header-light-hor-menu-dropdown-menu-link-bg-color-on-active:           darken($header-light-hor-menu-dropdown-menu-bg-color, 4%);
76 
$header-light-hor-menu-dropdown-menu-link-bg-color-on-hover:            darken($header-light-hor-menu-dropdown-menu-bg-color, 4%);
77 
 
78 
$header-light-hor-menu-dropdown-menu-link-font-color:                   #000;
79 
$header-light-hor-menu-dropdown-menu-link-font-color-on-hover:          #000;
80 
$header-light-hor-menu-dropdown-menu-link-font-color-on-active:         #000;
81 
 
82 
$header-light-hor-menu-dropdown-menu-link-icon-color:                   #888;
83 
$header-light-hor-menu-dropdown-menu-link-icon-color-on-hover:          #666;
84 
$header-light-hor-menu-dropdown-menu-link-icon-color-on-active:         #666;
85 
 
86 
// Header search
87 
$header-search-bg-color:                                                darken($header-bg-color, 3%) !default;
88 
$header-search-bg-hover-color:                                          $header-hor-menu-default-link-bg-color-on-hover !default;
89 
$header-search-bg-color-on-open:                                        $header-search-bg-hover-color !default;
90 
$header-search-font-color:                                              #888888 !default;
91 
$header-search-placeholder-font-color:                                  darken($header-search-font-color, 1%) !default;
92 
 
93 
// Top menu
94 
$header-top-menu-bg-hover-color:                                        $header-hor-menu-default-link-bg-color-on-hover !default;
95 
$header-top-menu-bg-hover-color-on-dropdown-open:                       $header-hor-menu-default-link-bg-color-on-hover !default;
96 
$header-top-menu-badge-bg-color:                                        $brand-main-color;
97 
$header-top-menu-badge-font-color:                                      #ffffff;
98 
$header-top-menu-icon-font-color:                                       #AAAAAA !default;
99 
 
100 
// Top menu user bar
101 
$header-top-menu-user-font-color:                                       $header-hor-menu-default-link-font-color !default;
102 
$header-top-menu-user-bg-color:                                         $header-search-bg-color !default;
103 
 
104 
//begin: Top Menu Extended Dropdowns
105 
$header-top-menu-extended-dropdown-item-bg-color-on-hover:              #f8f9fa;
106 
$header-top-menu-extended-dropdown-item-border-color:                   #EFF2F6;
107 
$header-top-menu-extended-dropdown-item-font-color:                     #888888;
108 
 
109 
$header-top-menu-extended-dropdown-header-bg-color:                     darken(#f7f8fa, 4%);
110 
$header-top-menu-extended-dropdown-border-color:                        darken($header-top-menu-extended-dropdown-header-bg-color, 1%);
111 
$header-top-menu-extended-dropdown-header-font-color:                   darken(#6f949c, 5%);
112 
 
113 
$header-top-menu-inbox-dropdown-from-font-color:                        #5b9bd1;
114 
 
115 
$header-top-menu-task-dropdown-progress-bg-color:                       #dfe2e9;
116 
 
117 
$header-top-menu-notification-time-bg-color:                            lighten(#eee, 1%);
118 
 
119 
// Top Menu Notifications
120 
$header-top-menu-dropdown-dark-bg-color:                                darken($header-hor-menu-bg-color, 20%);
121 
$header-top-menu-dropdown-dark-header-bg-color:                         darken($header-hor-menu-bg-color, 35%);
122 
$header-top-menu-dropdown-dark-header-font-color:                       lighten($header-top-menu-dropdown-dark-header-bg-color, 40%);
123 
 
124 
$header-top-menu-dropdown-dark-item-font-color:                         lighten($header-top-menu-dropdown-dark-header-bg-color, 45%);
125 
$header-top-menu-dropdown-dark-item-border-color:                       lighten($header-top-menu-dropdown-dark-bg-color, 4%);
126 
$header-top-menu-dropdown-dark-item-icon-color:                         lighten($header-top-menu-dropdown-dark-header-bg-color, 40%);
127 
$header-top-menu-dropdown-dark-item-bg-color-on-hover:                  lighten($header-top-menu-dropdown-dark-bg-color, 2%);
128 
 
129 
$header-top-menu-dropdown-dark-default-menu-divider:                    $header-top-menu-dropdown-dark-item-border-color;
130 
$header-top-menu-dropdown-dark-notification-time-bg-color:              darken($header-top-menu-dropdown-dark-bg-color, 3%);
131 
//end: Top Menu Extended Dropdowns
132 
 
133 
// Sidebar menu
134 
$sidebar-menu-devider-border-color:                                     #EEEEEE !default;
135 
 
136 
$sidebar-menu-link-font-color:                                          #555555 !default;
137 
$sidebar-menu-link-font-color-on-hover:                                 $sidebar-menu-link-font-color !default;
138 
$sidebar-menu-link-font-color-on-active:                                #ffffff !default;
139 
 
140 
$sidebar-menu-link-icon-font-color:                                     #AAAAAA !default;
141 
$sidebar-menu-link-icon-font-color-on-active:                           $sidebar-menu-link-font-color-on-active !default;
142 
$sidebar-menu-link-icon-font-color-on-hover:                            #AAAAAA !default;
143 
 
144 
$sidebar-menu-link-bg-color-on-hover:                                   #EFEFEF !default;
145 
$sidebar-menu-link-bg-color-on-active:                                  $brand-main-color;
146 
 
147 
$sidebar-menu-link-arrow-bg-img-on-active:                              "sidebar-menu-arrow.png" !default;
148 
$sidebar-menu-link-arrow-bg-img-on-active-reversed:                     "sidebar-menu-arrow-reverse.png" !default;
149 
 
150 
$sidebar-menu-arrow-color:                                              $sidebar-menu-link-icon-font-color !default;
151 
$sidebar-menu-arrow-color-on-active:                                    $sidebar-menu-link-icon-font-color-on-active !default;
152 
$sidebar-menu-arrow-color-on-hover:                                     $sidebar-menu-link-icon-font-color-on-hover !default;
153 
 
154 
$sidebar-menu-sub-menu-box-shadow-color:                                $sidebar-menu-link-bg-color-on-hover !default;
155 
$sidebar-menu-sub-menu-link-font-color:                                 $sidebar-menu-link-font-color !default;
156 
$sidebar-menu-sub-menu-link-icon-font-color:                            $sidebar-menu-arrow-color !default;
157 
$sidebar-menu-sub-menu-link-bg-color-on-hover:                          #EFEFEF !default;
158 
$sidebar-menu-sub-menu-link-icon-font-color-on-hover:                   $sidebar-menu-link-icon-font-color-on-hover !default;
159 
 
160 
$sidebar-menu-hover-sub-menu-bg-color:                                  darken($sidebar-menu-link-bg-color-on-hover, 3%) !default;
161 
 
162 
// Sidebar for mobile
163 
$mobile-sidebar-menu-bg-color:                                          darken($header-bg-color, 1%) !default;
164 
$mobile-sidebar-menu-link-bg-color-on-hover:                            darken($bg-color, 15%) !default;
165 
 
166 
// Light sidebar menu
167 
$light-sidebar-menu-link-border-color:                                  $brand-main-color !default;
168 
$light-sidebar-menu-link-bg-color-on-hover:                             darken($bg-color, 5%) !default;
169 
$light-sidebar-menu-link-bg-color-on-active:                            darken($bg-color, 7%) !default;
170 
$light-sidebar-menu-link-font-color-on-active:                          #666666 !default;
171 
$light-sidebar-menu-link-icon-color-on-active:                          #999999 !default;
172 
$light-sidebar-menu-link-arrow-color-on-active:                         #999999 !default;
173 
 
174 
$light-sidebar-menu-sub-menu-bg-color:                                  lighten($bg-color, 1%) !default;
175 
$light-sidebar-menu-sub-menu-link-bg-color-on-hover:                    darken($bg-color, 5%) !default;
176 
 
177 
$mobile-light-sidebar-menu-sub-menu-bg-color:                           $mobile-sidebar-menu-bg-color !default;
178 
$mobile-light-sidebar-menu-link-bg-color-on-hover:                      darken($mobile-sidebar-menu-bg-color, 5%) !default;
179 
$mobile-light-sidebar-menu-link-bg-color-on-active:                     darken($mobile-sidebar-menu-bg-color, 8%) !default;
180 
$mobile-light-sidebar-menu-sub-menu-link-bg-color-on-hover:             darken($mobile-sidebar-menu-bg-color, 5%) !default;
181 
 
182 
// Sidebar search
183 
$sidebar-search-bg-color:                                               darken($header-bg-color, 1%) !default;
184 
$sidebar-search-bottom-border-color:                                    darken($sidebar-menu-devider-border-color, 4%) !default;
185 
$sidebar-search-full-border-color:                                      darken($sidebar-menu-devider-border-color, 4%) !default;
186 
$sidebar-search-input-font-color:                                       #999999 !default;
187 
$sidebar-search-input-placeholder-font-color:                           lighten($sidebar-search-input-font-color, 1%) !default;
188 
 
189 
// Quick Sidebar
190 
$quick-sidebar-bg-color:                                                #9ea6af;
191 
$quick-sidebar-font-color:                                              #efefef;
192 
 
193 
// Footer
194 
$footer-default-font-color:                                             #333333 !default;
195 
$footer-default-go-top-bg-color:                                        #9CA6AD !default;
196 
$footer-default-go-top-icon-font-color:                                 #dddddd !default;
197 
$footer-fixed-bg-color:                                                 lighten($header-bg-color, 40%) !default;
198 
 
199 
//Boxed layout
200 
$for-min-992px-page-boxed-page-container-bg-color:                      $sidebar-menu-devider-border-color !default;
201 
$for-min-992px-page-boxed-bg-color:                                     darken($bg-color, 3%) !default;
202 
$for-min-992px-page-boxed-sidebar-fixed-border-color:                   $sidebar-menu-devider-border-color !default;
203 
 
204 
@import '_base';
205 
 
206 
/* Page sidebar */
207 
 
208 
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover,
209 
.page-sidebar {
210 
 
211 
    .page-sidebar-menu {
212 
        /* Sidebar search */
213 
        li {
214 
            > a {
215 
                font-weight: normal;
216 
            }
217 
 
218 
            .sub-menu {
219 
                 li {
220 
                    > a {
221 
                        font-weight: normal;
222 
                    }
223 
                }
224 
            }
225 
        }
226 
    }
227 
}
228 
 
229 
@media (max-width: $screen-sm-max) { /* 991px */
230 
 
231 
    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover,
232 
    .page-sidebar {
233 
        .page-sidebar-menu {
234 
            > li {
235 
                > a {
236 
                    border-top: 1px solid $sidebar-menu-devider-border-color;
237 
                }
238 
            }
239 
        }
240 
    }
241 
}
242 
 
243 
@media (max-width: $screen-xs-min) { /* 480px */
244 
    body {
245 
        background: $bg-color;
246 
    }
247 
}