Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**************************************************
- * Variables
- *************************************************/
- $themes:
- (firmensuche, #34495e),
- (wien, #e30613),
- (immobilienwohnen, #995d41),
- (kunstkultur, #53375b),
- (veranstaltungen, #097e80),
- (freizeit, #3576be),
- (gesundheit, #16a086),
- (lifestyle, #ec8e0e),
- (bildung, #d25400),
- (politik, #95a5a5);
- $util-farben:
- (fallback, #666),
- (dunkelgrau, #666),
- (mittelgrau, #acacac),
- (hellgrau, #e5e5e5),
- (rot, #da0015),
- (hellrot, #f30017),
- (facebook, #3B579D),
- (twitter, #399ad6),
- (googleplus, #b61a22);
- $farben: join($themes, $util-farben);
- $highlight-amount: 5%;
- /**************************************************
- * Functions
- *************************************************/
- @function lookup($list, $key, $default:null) {
- @if length($list) == 0 {
- @return $default;
- }
- @for $i from 1 through length($list) {
- $item: nth($list, $i);
- @if nth($item, 1) == $key {
- @return slice($item, 2);
- }
- }
- @return $default;
- }
- @function slice($list, $from:0, $to:null) {
- $ret: ();
- @if $to == null {
- $to: length($list);
- }
- @for $i from 1 through length($list) {
- @if $i >= $from and $i <= $to {
- $ret: append($ret, nth($list, $i));
- }
- }
- @if length($ret) == 1 {
- $ret: nth($ret, 1);
- }
- @return $ret;
- }
- @function farbe($lookup) {
- @return lookup($farben, $lookup);
- }
- /**************************************************
- * mixin
- *************************************************/
- @each $name, $farbe in $themes {
- .#{$name}:hover > a,
- .#{$name}.active > a,
- .#{$name} .level-2 {
- color: white;
- background-color: $farbe;
- }
- // 2. set the background color of the hovered list element
- .#{$name} .level-2 > li:hover,
- .#{$name} .level-2 > li.hover,
- .#{$name} .level-2 > li.active {
- background-color : lighten($farbe, $highlight-amount);
- }
- // 3. Set link-Color to white in second menu level in hover and active states
- .#{$name} .level-3 {
- background-color : lighten($farbe, $highlight-amount);
- }
- }
- %theme-background-color {
- background-color: farbe(fallback);
- }
- %theme-light-background-color {
- background-color: lighten(farbe(fallback), $highlight-amount);
- }
- %theme-border-color {
- border-color: farbe(fallback);
- }
- %theme-color {
- color: farbe(fallback);
- }
- %theme-light-color {
- color: lighten(farbe(fallback), $highlight-amount);
- }
- @each $name, $farbe in $themes {
- .theme-#{$name} %theme-background-color {
- background-color: $farbe;
- }
- .theme-#{$name} %theme-light-background-color {
- background-color: lighten($farbe, $highlight-amount);
- }
- .theme-#{$name} %theme-border-color {
- border-color: $farbe;
- }
- .theme-#{$name} %theme-color {
- color: $farbe;
- }
- .theme-#{$name} %theme-light-color {
- color: lighten($farbe, $highlight-amount);
- }
- .theme-#{$name}-background-color {
- background-color: $farbe !important;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement