From 15e6ecde1cc666dbb2d14c4323ac125b234ebe7b Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Fri, 6 May 2016 00:23:00 +0100 Subject: [PATCH] Add white black light dark colors, Fix button inverted --- CHANGELOG.md | 2 ++ sass/components/card.sass | 6 +++--- sass/components/message.sass | 2 +- sass/components/modal.sass | 2 +- sass/components/tabs.sass | 2 +- sass/elements/box.sass | 8 ++++---- sass/elements/button.sass | 15 ++++----------- sass/elements/form.sass | 2 +- sass/elements/other.sass | 9 +++------ sass/elements/table.sass | 2 +- sass/layout/header.sass | 6 +++--- sass/layout/hero.sass | 6 +++--- sass/layout/section.sass | 2 +- sass/utilities/functions.sass | 2 +- sass/utilities/variables.sass | 10 +++++++--- 15 files changed, 36 insertions(+), 40 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5ae65c9b..69531428 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,8 @@ ## 0.0.25 * Added: `utilities/controls.sass` and `elements/form.sass` +* Added: new responsive classes +* Added: white/black and light/dark colors * Changed: `.tabs` need `.icon` now * Changed: cdnjs link doesn't include version diff --git a/sass/components/card.sass b/sass/components/card.sass index 991c6305..f5d33411 100644 --- a/sass/components/card.sass +++ b/sass/components/card.sass @@ -1,6 +1,6 @@ .card-header align-items: stretch - box-shadow: 0 1px 2px rgba(black, 0.1) + box-shadow: 0 1px 2px rgba($black, 0.1) display: flex min-height: 40px @@ -43,8 +43,8 @@ border-right: 1px solid $border .card - background: white - box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1) + background: $white + box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) color: $text max-width: 100% position: relative diff --git a/sass/components/message.sass b/sass/components/message.sass index 33d5e8c3..83b8424e 100644 --- a/sass/components/message.sass +++ b/sass/components/message.sass @@ -24,7 +24,7 @@ @each $name, $pair in $colors $color: nth($pair, 1) $color-invert: nth($pair, 2) - $lightning: (100% - lightness($color)) - 4% + $lightning: max((100% - lightness($color)) - 4%, 0%) $darkness: max(lightness($color) - 10%, lightness($color)) &.is-#{$name} background: lighten($color, $lightning) diff --git a/sass/components/modal.sass b/sass/components/modal.sass index 87e7843e..09d40ff0 100644 --- a/sass/components/modal.sass +++ b/sass/components/modal.sass @@ -1,6 +1,6 @@ .modal-background +overlay - background: rgba(black, 0.86) + background: rgba($black, 0.86) .modal-content margin: 0 20px diff --git a/sass/components/tabs.sass b/sass/components/tabs.sass index 0e3aa952..20bf2330 100644 --- a/sass/components/tabs.sass +++ b/sass/components/tabs.sass @@ -49,7 +49,7 @@ // Modifiers &.is-active a - background: white + background: $white border-color: $border border-bottom-color: transparent // Modifiers diff --git a/sass/elements/box.sass b/sass/elements/box.sass index caf9c6ad..23f02e51 100644 --- a/sass/elements/box.sass +++ b/sass/elements/box.sass @@ -1,14 +1,14 @@ .box @extend .block - background: white + background: $white border-radius: 5px - box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1) + box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) display: block padding: 20px a.box &:hover, &:focus - box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px $link + box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link &:active - box-shadow: inset 0 1px 2px rgba(black, 0.2), 0 0 0 1px $link + box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link diff --git a/sass/elements/button.sass b/sass/elements/button.sass index db9e3d47..6f5327ae 100644 --- a/sass/elements/button.sass +++ b/sass/elements/button.sass @@ -42,7 +42,7 @@ &:hover color: $control-hover &:active - box-shadow: inset 0 1px 2px rgba(black, 0.2) + box-shadow: inset 0 1px 2px rgba($black, 0.2) // Colors @each $name, $pair in $colors $color: nth($pair, 1) @@ -63,14 +63,6 @@ color: $color &:hover background: darken($color-invert, 5%) - &.is-outlined - background-color: transparent - border-color: $color-invert - color: $color-invert - &:hover - background: rgba(black, 0.05) - border-color: $color-invert - color: $color-invert &.is-loading &:after border-color: transparent transparent $color-invert $color-invert !important @@ -80,8 +72,9 @@ color: $color &:hover, &:focus - border-color: darken($color, 10%) - color: darken($color, 10%) + background: $color + border-color: $color + color: $color-invert &.is-link background: transparent border-color: transparent diff --git a/sass/elements/form.sass b/sass/elements/form.sass index 9a9bed08..5e38db85 100644 --- a/sass/elements/form.sass +++ b/sass/elements/form.sass @@ -7,7 +7,7 @@ .input +form-control - box-shadow: inset 0 1px 2px rgba(black, 0.1) + box-shadow: inset 0 1px 2px rgba($black, 0.1) max-width: 100% width: 100% &[type="search"] diff --git a/sass/elements/other.sass b/sass/elements/other.sass index 42642e46..9f78d087 100644 --- a/sass/elements/other.sass +++ b/sass/elements/other.sass @@ -2,7 +2,7 @@ +unselectable -moz-appearance: none -webkit-appearance: none - background: rgba(black, 0.2) + background: rgba($black, 0.2) border: none border-radius: 290486px cursor: pointer @@ -13,7 +13,7 @@ width: 24px &:before, &:after - background: white + background: $white content: "" display: block height: 2px @@ -28,7 +28,7 @@ &:after transform: rotate(-45deg) &:hover - background: rgba(black, 0.5) + background: rgba($black, 0.5) // Sizes &.is-small height: 16px @@ -160,9 +160,6 @@ &.is-#{$name} background: $color color: $color-invert - &.is-dark - background: $text - color: $text-invert // Sizes &.is-small font-size: $size-small diff --git a/sass/elements/table.sass b/sass/elements/table.sass index 1f994939..192dfb56 100644 --- a/sass/elements/table.sass +++ b/sass/elements/table.sass @@ -1,5 +1,5 @@ .table - background: white + background: $white color: $text-strong margin-bottom: 20px width: 100% diff --git a/sass/layout/header.sass b/sass/layout/header.sass index 3b23f69a..b1ed6c0c 100644 --- a/sass/layout/header.sass +++ b/sass/layout/header.sass @@ -1,6 +1,6 @@ .header +clearfix - background: white + background: $white display: flex line-height: 24px position: relative @@ -12,7 +12,7 @@ width: 100% // Modifiers &.has-shadow - box-shadow: 0 1px 2px rgba(black, 0.1) + box-shadow: 0 1px 2px rgba($black, 0.1) // Responsiveness +mobile .container @@ -128,7 +128,7 @@ a.header-item .header-menu // Responsiveness +mobile - box-shadow: 0 4px 7px rgba(black, 0.1) + box-shadow: 0 4px 7px rgba($black, 0.1) display: none .header-item border-top: 1px solid rgba($border, 0.5) diff --git a/sass/layout/hero.sass b/sass/layout/hero.sass index 1feff906..b9d8de05 100644 --- a/sass/layout/hero.sass +++ b/sass/layout/hero.sass @@ -36,7 +36,7 @@ margin-right: 20px .hero - background: white + background: $white .header background: none .container @@ -89,7 +89,7 @@ a color: $color-invert &:hover - background: rgba(black, 0.1) + background: rgba($black, 0.1) li.is-active a &, &:hover @@ -106,7 +106,7 @@ span background: $color-invert &:hover - background: rgba(black, 0.1) + background: rgba($black, 0.1) &.is-active span background: $color-invert diff --git a/sass/layout/section.sass b/sass/layout/section.sass index 98271a5c..7b82c341 100644 --- a/sass/layout/section.sass +++ b/sass/layout/section.sass @@ -1,5 +1,5 @@ .section - background: white + background: $white padding: 40px 20px // Responsiveness +desktop diff --git a/sass/utilities/functions.sass b/sass/utilities/functions.sass index ca7f72be..661a72cc 100644 --- a/sass/utilities/functions.sass +++ b/sass/utilities/functions.sass @@ -29,6 +29,6 @@ @function findColorInvert($color) @if (colorLuminance($color) > 0.8) - @return rgba(black, 0.5) + @return rgba($black, 0.5) @else @return white diff --git a/sass/utilities/variables.sass b/sass/utilities/variables.sass index f6212acc..5b1635ea 100644 --- a/sass/utilities/variables.sass +++ b/sass/utilities/variables.sass @@ -2,11 +2,13 @@ // Colors +$black: #111 !default $grey-darker: #222324 !default $grey-dark: #69707a !default $grey: #aeb1b5 !default $grey-light: #d3d6db !default $grey-lighter: #f5f7fa !default +$white: #fff !default $blue: #42afe3 !default $green: #97cd76 !default @@ -62,7 +64,8 @@ $success: $green !default $warning: $yellow !default $danger: $red !default -$dark: $grey-darker !default +$light: $grey-lighter !default +$dark: $grey-dark !default $text: $grey-dark !default @@ -77,7 +80,8 @@ $success-invert: findColorInvert($success) !default $warning-invert: findColorInvert($warning) !default $danger-invert: findColorInvert($danger) !default -$dark-invert: findColorInvert($dark) !default +$light-invert: $dark !default +$dark-invert: $light !default // General colors @@ -142,6 +146,6 @@ $size-huge: $size-1 !default // 4. Lists and maps -$colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert)) !default +$colors: (white: ($white, $black), black: ($black, $white), light: ($light, $light-invert), dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert)) !default $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 !default