Last active
December 16, 2015 02:48
-
-
Save brianfeister/5365168 to your computer and use it in GitHub Desktop.
Bootstrap Sub-theme Iterating Function
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// Mixins to build sub-themes | |
// -------------------------------------------------- | |
// call this to build a new theme and create all needed variables in _sub-themes.less | |
.setThemeColors( @themeName ) { | |
(~"body.@{themeName}") { | |
color: ~"@{@{themeName}-PrimarySubdued}"; | |
background-color: ~"@{@{themeName}-AccentColor}"; | |
a { | |
color: ~"@{@{themeName}-PrimaryColor}"; | |
&:hover { | |
color: ~"@{@{themeName}-TextHover}"; | |
} | |
} | |
.brand { | |
background-color: ~"@{@{themeName}-PrimaryHSLAlight}"; | |
.icon-amar-gamal-logo { | |
color: ~"@{@{themeName}-PrimaryColor}"; | |
} | |
} | |
.page-header { | |
border-bottom: 2px solid ~"@{@{themeName}-PrimaryColor}"; | |
border-bottom: 3px solid ~"@{@{themeName}-PrimaryHSLA}"; | |
} | |
h1, h2, h3 { | |
color: ~"@{@{themeName}-PrimaryColor}"; | |
} | |
#header-pre-nav { | |
span.tagline i, | |
.social-header i { | |
color: ~"@{@{themeName}-PrimaryColor}"; | |
} | |
.goog-te-gadget-simple, | |
.goog-te-gadget-simple span { | |
color: ~"@{@{themeName}-AccentColor}" !important; | |
background-color: ~"@{@{themeName}-PrimaryColor}"; | |
border-left-color: ~"@{@{themeName}-AccentColor}" !important; | |
} | |
.dropdown-menu { | |
color: ~"@{@{themeName}-PrimaryColor}"; | |
input[type="text"], input[type="email"] { | |
background-color: ~"@{@{themeName}-PrimarySubdued}"; | |
background-color: ~"@{@{themeName}-PrimaryHSLA}"; | |
border-color: ~"@{@{themeName}-PrimaryColor}"; | |
border-color: ~"@{@{themeName}-PrimaryHSLA}"; | |
color: ~"@{@{themeName}-AccentColor}"; | |
} | |
} | |
} | |
.navbar-inner { | |
background-color: ~"@{@{themeName}-AccentColor}"; | |
border-color: ~"@{@{themeName}-PrimarySubdued}"; | |
border-color: ~"@{@{themeName}-PrimaryHSLA}"; | |
} | |
.navbar .nav > li > a { | |
background-color: ~"@{@{themeName}-AccentColor}"; | |
color: ~"@{@{themeName}-PrimaryColor}"; | |
} | |
.navbar .nav > li > a:focus, | |
.navbar .nav > li > a:hover { | |
background-color: ~"@{@{themeName}-PrimaryColor}"; | |
color: ~"@{@{themeName}-AccentColor}"; | |
} | |
.navbar .nav > .active > a, | |
.navbar .nav > .active > a:hover, | |
.navbar .nav > .active > a:focus { | |
color: ~"@{@{themeName}-AccentColor}"; | |
background-color: ~"@{@{themeName}-PrimaryColor}"; | |
.box-shadow( none ); | |
} | |
.navbar .nav li.dropdown.open > .dropdown-toggle, | |
.navbar .nav li.dropdown.active > .dropdown-toggle { | |
background-color: ~"@{@{themeName}-PrimaryColor}"; | |
color: ~"@{@{themeName}-AccentColor}"; | |
} | |
.navbar .nav li.dropdown.active:hover > .dropdown-toggle { | |
background-color: ~"@{@{themeName}-PrimarySubdued}"; | |
} | |
.navbar .nav li.dropdown > .dropdown-toggle .caret, { | |
border-top-color: ~"@{@{themeName}-PrimarySubdued}"; | |
border-top-color: ~"@{@{themeName}-PrimaryHSLA}"; | |
border-bottom-color: ~"@{@{themeName}-PrimarySubdued}"; | |
border-bottom-color: ~"@{@{themeName}-PrimaryHSLA}"; | |
} | |
.navbar .nav li.dropdown:hover > .dropdown-toggle .caret, | |
.navbar .nav li.dropdown.open > .dropdown-toggle .caret, | |
.navbar .nav li.dropdown.active > .dropdown-toggle .caret, | |
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret{ | |
border-top-color: ~"@{@{themeName}-PrimaryInverse}"; | |
border-top-color: ~"@{@{themeName}-PrimaryInverse}"; | |
border-bottom-color: "@{@{themeName}-PrimaryInverse}"; | |
border-bottom-color: "@{@{themeName}-PrimaryInverse}"; | |
} | |
.dropdown-menu { | |
background-color: ~"@{@{themeName}-PrimaryInverse}"; | |
border-top-color: transparent; | |
a { | |
color: ~"@{@{themeName}-PrimaryColor}"; | |
} | |
} | |
.dropdown-menu li > a:hover, | |
.dropdown-menu li > a:focus, | |
.dropdown-submenu:hover > a, | |
.dropdown-menu .active > a, | |
.dropdown-menu .active > a:hover { | |
background-color: ~"@{@{themeName}-PrimaryColor}"; | |
color: ~"@{@{themeName}-AccentColor}"; | |
} | |
.dropdown-submenu > a:after { | |
border-left-color: ~"@{@{themeName}-PrimaryColor}"; | |
} | |
.dropdown-submenu > a:hover:after { | |
border-left-color: ~"@{@{themeName}-PrimaryInverse}"; | |
} | |
.navbar .nav > li > .dropdown-menu:after { | |
border-bottom-color: ~"@{@{themeName}-PrimaryInverse}"; | |
} | |
.navbar .btn-navbar { | |
background-image: none; | |
background: ~"@{@{themeName}-PrimaryHSLAlight}"; | |
.icon-bar { | |
background-color: ~"@{@{themeName}-PrimaryColor}"; | |
} | |
} | |
.nav-header { | |
color: ~"@{@{themeName}-TextHover}"; | |
background: ~"@{@{themeName}-PrimaryHSLAlight}"; | |
} | |
.btn, | |
#main .btn, | |
#main input.button, | |
#main button, | |
#main input[type="button"], | |
#main input[type="reset"], | |
#main input[type="submit"] { | |
background-color: ~"@{@{themeName}-PrimaryColor}"; | |
color: ~"@{@{themeName}-PrimaryInverse}"; | |
&:hover { | |
background-color: ~"@{@{themeName}-PrimarySubdued}"; | |
color: ~"@{@{themeName}-AccentColor}"; | |
} | |
} | |
#main .flexslider { | |
background-color: ~"@{@{themeName}-AccentColor}"; | |
} | |
#main > table, | |
#main .entry-content > table { | |
background: ~"@{@{themeName}-PrimarySubdued}"; | |
background: ~"@{@{themeName}-PrimaryHSLA}"; | |
color: ~"@{@{themeName}-AccentColor}"; | |
a { | |
color: ~"@{@{themeName}-AccentColor}"; | |
} | |
&.schedule-grid tbody > tr { | |
border-top: 1px solid ~"@{@{themeName}-AccentColor}"; | |
border-top: 1px solid ~"@{@{themeName}-AccentHSLAlight}"; | |
} | |
} | |
.color-bar { | |
background-color: ~"@{@{themeName}-PrimaryHSLAlight}"; | |
} | |
textarea, | |
input[type="text"], | |
input[type="password"], | |
input[type="datetime"], | |
input[type="datetime-local"], | |
input[type="date"], | |
input[type="month"], | |
input[type="time"], | |
input[type="week"], | |
input[type="number"], | |
input[type="email"], | |
input[type="url"], | |
input[type="search"], | |
input[type="tel"], | |
input[type="color"], | |
.uneditable-input { | |
background-color: ~"@{@{themeName}-PrimaryInverse}"; | |
color: ~"@{@{themeName}-PrimaryColor}"; | |
} | |
#content-info { | |
border-top: 2px solid ~"@{@{themeName}-PrimaryColor}"; | |
border-top: 3px solid ~"@{@{themeName}-PrimaryHSLA}"; | |
} | |
@media (max-width: 979px) { | |
// Make all grid-sized elements block level again | |
.nav-collapse .nav .nav-header { | |
color: ~"@{@{themeName}-TextHover}"; | |
background: ~"@{@{themeName}-PrimaryHSLAlight}"; | |
} | |
} | |
@media (max-width: 767px) { | |
// Make all grid-sized elements block level again | |
#main { | |
background-color: ~"@{@{themeName}-AccentColor}"; | |
} | |
} | |
} | |
} | |
// | |
// Default sub-theme | |
// -------------------------------------------------- | |
.setThemeColors( "error404" ); | |
// | |
// Home sub-theme | |
// -------------------------------------------------- | |
.setThemeColors( "home-sub-theme" ); | |
// | |
// About sub-theme | |
// -------------------------------------------------- | |
.setThemeColors( "about-sub-theme" ); | |
// | |
// Events sub-theme | |
// -------------------------------------------------- | |
.setThemeColors( "events-sub-theme" ); | |
// | |
// Instruction sub-theme | |
// -------------------------------------------------- | |
.setThemeColors( "instruction-sub-theme" ); | |
// | |
// Gallery sub-theme | |
// -------------------------------------------------- | |
.setThemeColors( "gallery-sub-theme" ); | |
// | |
// Store sub-theme | |
// -------------------------------------------------- | |
.setThemeColors( "store-sub-theme" ); | |
// | |
// Booking & Contact sub-theme | |
// -------------------------------------------------- | |
.setThemeColors( "booking_contact-sub-theme" ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment