FM / globals

/home/techb158/dev.balacoffee.com/resources/src/assets/styles/sass/globals/

/home/techb158/dev.balacoffee.com/resources/src/assets/styles/sass/globals

Name	Size	Mode	Actions
components/	-	0755	rm
functions/	-	0755	rm
layouts/	-	0755	rm
mixins/	-	0755	rm
utilities/	-	0755	rm
views/	-	0755	rm
_animations.scss	742	0644	edit dl rm
_box-shadow.scss	206	0644	edit dl rm
_colors.scss	743	0644	edit dl rm
_footer.scss	319	0644	edit dl rm
_globals.scss	4435	0644	edit dl rm
_header-top.scss	9977	0644	edit dl rm
_header.scss	3496	0644	edit dl rm
_height-width.scss	3007	0644	edit dl rm
_layout.scss	7265	0644	edit dl rm
_palette.scss	1278	0644	edit dl rm
_typography.scss	2210	0644	edit dl rm

Edit: /home/techb158/dev.balacoffee.com/resources/src/assets/styles/sass/globals/_palette.scss (1278B)

@each $gcolor_name, $gcolor in $gradient-colors {
  $start-color: map-get($gcolor, start-color);
  $end-color: map-get($gcolor, end-color);

.sidebar-#{$gcolor_name} {
    .sidebar-left {
      @include directional-gradient(-154deg, $start-color, $end-color);
    }
  }
  .#{$gcolor_name} {
    @include directional-gradient(-154deg, $start-color, $end-color);
  }
  .btn.#{$gcolor_name} {
    &:active,
    &.active {
      @include directional-gradient(-90deg, $start-color, $end-color);
    }
  }
}

@each $color_name, $color in $solid-colors {
    .sidebar-#{$color_name} {
        .sidebar-left {
            background: $color;
        }
    }
    .#{$color_name} {
        background: $color;
    }
}

// 
$full-map: gen-color-full-opacity-map($colors);
/*
$full-map: (
  blue: (
    100: #f31312,
    .....,
    900: #f32332
  ),
  red: (
    100: #f31312,
    .....,
    900: #f32332
  )
)
*/

@each $colorName, $map in $full-map {
  @each $name, $value in $map {
    .#{$colorName}-#{$name} {
      background-color: $value;
    }
    .text-#{$colorName}-#{$name} {
        @if (lightness( $value ) > 40) {
          color: black;
        }
        @else {
          color: white;
        }
    }
  }
}

@each $gcolor_name, $gcolor in $gradient-colors { $start-color: map-get($gcolor, start-color); $end-color: map-get($gcolor, end-color); .sidebar-#{$gcolor_name} { .sidebar-left { @include directional-gradient(-154deg, $start-color, $end-color); } } .#{$gcolor_name} { @include directional-gradient(-154deg, $start-color, $end-color); } .btn.#{$gcolor_name} { &:active, &.active { @include directional-gradient(-90deg, $start-color, $end-color); } } } @each $color_name, $color in $solid-colors { .sidebar-#{$color_name} { .sidebar-left { background: $color; } } .#{$color_name} { background: $color; } } // $full-map: gen-color-full-opacity-map($colors); /* $full-map: ( blue: ( 100: #f31312, ....., 900: #f32332 ), red: ( 100: #f31312, ....., 900: #f32332 ) ) */ @each $colorName, $map in $full-map { @each $name, $value in $map { .#{$colorName}-#{$name} { background-color: $value; } .text-#{$colorName}-#{$name} { @if (lightness( $value ) > 40) { color: black; } @else { color: white; } } } }