scss code essai

From mod, 1 Month ago, written in Plain Text, viewed 26 times. This paste will kick the bucket in 1 Second.
URL http://codebin.org/view/edb4fdca Embed
Download Paste or View Raw
  1.  
  2. $primary: grey;
  3. $secondary: grey;
  4. $purple: purple;
  5. $orange2: orange;
  6. $green: green;
  7. $success: green;
  8. $info: blue;
  9. $warning: red;
  10. $danger: red;
  11. $light: cyan;
  12. $dark: black;
  13.  
  14. $body-color: aquamarine ;
  15. $white: white ;
  16. $text-color-dark-default: $body-color !default;
  17. $text-color-light-default: $white !default;
  18.  
  19. @function color-contrast($color, $dark: $text-color-dark-default, $light: $text-color-light-default) {
  20.   @if $color == null {
  21.         @return null;
  22.          
  23.   }
  24.   @else {
  25.         $yiq: (red($color) * 299 + green($color) * 587 + blue($color) * 114) / 1000;
  26.             @return if($yiq >= 128, $dark, $light);
  27.   }
  28.  
  29. }
  30. @function id ($color) {
  31.   @return $color
  32. }
  33.  
  34. /**
  35.  * For each theme color, define the color of the:
  36.  * - text color
  37.  * - link color (with hover and focus)
  38.  * - heading colors
  39.  *
  40.  * Expected result for the "purple" color:
  41.  * <code>
  42.  * .bg-purple {
  43.  *   color: white;
  44.  * }
  45.  *
  46.  * .bg-purple a {
  47.  *   color: white;
  48.  * }
  49.  *
  50.  * .bg-purple a:focus,
  51.  * .bg-purple a:hover {
  52.  *   color: white; // If possible, a lighten or darken color (7.5%)
  53.  * }
  54.  * </code>
  55.  */
  56.  
  57.  
  58.  
  59. $theme-colors: (
  60.   "primary":    $primary,
  61.   "secondary":  $secondary,
  62.   "purple":     $purple,
  63.   "orange2":    $orange2,
  64.   "green":      $green,
  65.   "success":    $success,
  66.   "info":       $info,
  67.   "warning":    $warning,
  68.   "danger":     $danger,
  69.   "light":      $light,
  70.   "dark":       $dark,
  71. );
  72.  
  73. @each $color, $value in $theme-colors {
  74.   $hover-background: darken($value, 7.5%);
  75.  
  76.   .bg-#{$color} {
  77.     color: color-contrast($value);
  78.  
  79.     a {
  80.       color: color-contrast($value);
  81.  
  82.       &:hover,
  83.       &:focus {
  84.         color: color-contrast($hover-background);
  85.       }
  86.     }
  87.  
  88.     h1, h2, h3, h4, h5, h6 {
  89.       color: color-contrast($value);
  90.     }
  91.   }
  92. }
  93.  
  94.  
  95. /**
  96.  * For the light background colors, make the link color (with hover/focus) use the default link colors:
  97.  * - $link-color
  98.  * - $link-hover-color
  99.  */
  100.  
  101. $link-color: #871f1f ;
  102. $link-hover-color: #5950dd ;
  103. .bg-light{
  104.   a {
  105.     &:hover{
  106.       color: $link-color;
  107.     }
  108.     &:focus {
  109.       color: $link-hover-color;
  110.     }
  111.   }
  112. }
  113.  
  114.  
  115. /**
  116.  * Make the previous code working with the body background, even if dark.
  117.  */
  118.  

Reply to "scss code essai"

Here you can reply to the paste above