diff options
author | Yan Zhu <picturepan2@hotmail.com> | 2017-08-28 08:29:09 +0300 |
---|---|---|
committer | Yan Zhu <picturepan2@hotmail.com> | 2017-08-28 08:29:09 +0300 |
commit | 00f87b240e52065f6a07641999315aafb89be781 (patch) | |
tree | 8547f648c647b8cf82c81a731c95c5b8e2d06240 /src | |
parent | e5ae885d6e329d7af9cc742c48c917b2c8c81776 (diff) |
Add Button variant mixins
Diffstat (limited to 'src')
-rw-r--r-- | src/avatars.less | 2 | ||||
-rw-r--r-- | src/buttons.less | 3 | ||||
-rw-r--r-- | src/mixins.less | 87 | ||||
-rw-r--r-- | src/typography.less | 4 | ||||
-rw-r--r-- | src/variables.less | 2 |
5 files changed, 75 insertions, 23 deletions
diff --git a/src/avatars.less b/src/avatars.less index c745f3b..1fa075a 100644 --- a/src/avatars.less +++ b/src/avatars.less @@ -47,7 +47,7 @@ .avatar-presence { background: @gray-color; - box-shadow: 0 0 0 @border-width @light-color; + box-shadow: 0 0 0 @border-width-lg @light-color; border-radius: 50%; height: .5em; width: .5em; diff --git a/src/buttons.less b/src/buttons.less index 403e8f8..0c15d9e 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -19,10 +19,9 @@ vertical-align: middle; white-space: nowrap; &:focus { - background: @secondary-color; .control-shadow(); - text-decoration: none; } + &:focus, &:hover { background: @secondary-color; border-color: @primary-color-dark; diff --git a/src/mixins.less b/src/mixins.less index 9580aed..8cbb3f5 100644 --- a/src/mixins.less +++ b/src/mixins.less @@ -6,6 +6,66 @@ width: @size; } +// Background color utility mixin +.bg-color-variant(@color: @primary-color) { + background: @color; +} + +// Button variant mixin +.button-variant(@color: @primary-color) { + background: @color; + border-color: darken(@color, 3%); + color: @light-color; + &:focus { + .control-shadow(@color); + } + &:focus, + &:hover { + background: darken(@color, 2%); + border-color: darken(@color, 5%); + color: @light-color; + } + &:active, + &.active { + background: darken(@color, 7%); + border-color: darken(@color, 10%); + color: @light-color; + } + &.loading { + &::after { + border-bottom-color: @light-color; + border-left-color: @light-color; + } + } +} + +.button-outline-variant(@color: @primary-color) { + background: @light-color; + border-color: @color; + color: @color; + &:focus { + .control-shadow(@color); + } + &:focus, + &:hover { + background: lighten(@color, 50%); + border-color: darken(@color, 2%); + color: @color; + } + &:active, + &.active { + background: @color; + border-color: darken(@color, 5%); + color: @light-color; + } + &.loading { + &::after { + border-bottom-color: @color; + border-left-color: @color; + } + } +} + // Clearfix mixin .clearfix() { &::after { @@ -25,12 +85,6 @@ transition: all .2s ease; } -// Toast variant -.toast-variant(@color: @dark-color) { - background: fade(@color, 90%); - border-color: @color; -} - // Label base style .label-base() { border-radius: @border-radius; @@ -43,12 +97,7 @@ color: @color; } -// Shadow mixin -.shadow-variant(@offset) { - box-shadow: 0 @offset (@offset + .05rem) * 2 fade(@dark-color, 30%); -} - -// Position utility mixin +// Margin utility mixin .margin-variant(@id: 1, @size: 1) { .m-@{id} { margin: @size; @@ -75,6 +124,7 @@ } } +// Padding utility mixin .padding-variant(@id: 1, @size: 1) { .p-@{id} { padding: @size; @@ -101,7 +151,12 @@ } } -// Colors mixin +// Shadow mixin +.shadow-variant(@offset) { + box-shadow: 0 @offset (@offset + .05rem) * 2 fade(@dark-color, 30%); +} + +// Text color utility mixin .text-color-variant(@color: @primary-color) { color: @color; @@ -113,6 +168,8 @@ } } -.bg-color-variant(@color: @primary-color) { - background: @color; +// Toast variant mixin +.toast-variant(@color: @dark-color) { + background: fade(@color, 90%); + border-color: @color; }
\ No newline at end of file diff --git a/src/typography.less b/src/typography.less index b1d96a7..5fd152f 100644 --- a/src/typography.less +++ b/src/typography.less @@ -83,10 +83,6 @@ blockquote { p:last-child { margin-bottom: 0; } - - cite { - color: @gray-color; - } } // Lists diff --git a/src/variables.less b/src/variables.less index 850940b..d146459 100644 --- a/src/variables.less +++ b/src/variables.less @@ -4,7 +4,7 @@ @html-font-size: 20px; @html-line-height: 1.428571429; @body-bg: @bg-color-light; -@body-font-color: @dark-color; +@body-font-color: lighten(@dark-color, 5%); @font-size: .7rem; @font-size-sm: .6rem; @font-size-lg: .8rem; |