From ffd611d72ae26ad41a9eaa2589993c846768b6e0 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Thu, 7 Dec 2017 14:25:15 +0800 Subject: Split mixins --- src/mixins/_button.scss | 51 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 src/mixins/_button.scss (limited to 'src/mixins/_button.scss') diff --git a/src/mixins/_button.scss b/src/mixins/_button.scss new file mode 100644 index 0000000..b7c84d9 --- /dev/null +++ b/src/mixins/_button.scss @@ -0,0 +1,51 @@ +// Button variant mixin +@mixin button-variant($color: $primary-color) { + background: $color; + border-color: darken($color, 3%); + color: $light-color; + &:focus { + @include 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 { + @extend .btn-primary.loading; + } +} + +@mixin button-outline-variant($color: $primary-color) { + background: $light-color; + border-color: $color; + color: $color; + &:focus { + @include 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; + } + } +} \ No newline at end of file -- cgit v1.3.1-23-gd82d From 357c8601a9346757bd76842cd68b3782db09bbc5 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Thu, 7 Dec 2017 16:45:47 +0800 Subject: Add empty lines --- CHANGELOG.md | 2 +- src/mixins/_avatar.scss | 2 +- src/mixins/_button.scss | 2 +- src/mixins/_clearfix.scss | 2 +- src/mixins/_color.scss | 2 +- src/mixins/_label.scss | 2 +- src/mixins/_position.scss | 14 +++++++++++++- src/mixins/_shadow.scss | 2 +- src/mixins/_text.scss | 2 +- src/mixins/_toast.scss | 2 +- src/mixins/_transition.scss | 2 +- 11 files changed, 23 insertions(+), 11 deletions(-) (limited to 'src/mixins/_button.scss') diff --git a/CHANGELOG.md b/CHANGELOG.md index 970bb72..aa3ca3b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,7 @@ - IMPORTANT: Restore /dist folder - Add Grid nesting example #353 - Add Form control sizes support -- Update Off-canvas default behavior #347 +- Update Off-canvas default behavior and new option available #347 - Split Mixins - Fix Navbar last-child align right bug #346 - Fix modal doc typo diff --git a/src/mixins/_avatar.scss b/src/mixins/_avatar.scss index bb9777a..14617ad 100644 --- a/src/mixins/_avatar.scss +++ b/src/mixins/_avatar.scss @@ -3,4 +3,4 @@ font-size: $size / 2; height: $size; width: $size; -} \ No newline at end of file +} diff --git a/src/mixins/_button.scss b/src/mixins/_button.scss index b7c84d9..338e8e3 100644 --- a/src/mixins/_button.scss +++ b/src/mixins/_button.scss @@ -48,4 +48,4 @@ border-left-color: $color; } } -} \ No newline at end of file +} diff --git a/src/mixins/_clearfix.scss b/src/mixins/_clearfix.scss index b3c78b0..db6895f 100644 --- a/src/mixins/_clearfix.scss +++ b/src/mixins/_clearfix.scss @@ -5,4 +5,4 @@ content: ""; display: table; } -} \ No newline at end of file +} diff --git a/src/mixins/_color.scss b/src/mixins/_color.scss index 376688c..f2e2e5c 100644 --- a/src/mixins/_color.scss +++ b/src/mixins/_color.scss @@ -21,4 +21,4 @@ color: darken($color, 5%); } } -} \ No newline at end of file +} diff --git a/src/mixins/_label.scss b/src/mixins/_label.scss index 4dcb416..fad20c1 100644 --- a/src/mixins/_label.scss +++ b/src/mixins/_label.scss @@ -8,4 +8,4 @@ @mixin label-variant($color: $light-color, $bg-color: $primary-color) { background: $bg-color; color: $color; -} \ No newline at end of file +} diff --git a/src/mixins/_position.scss b/src/mixins/_position.scss index bbcadac..0943469 100644 --- a/src/mixins/_position.scss +++ b/src/mixins/_position.scss @@ -3,22 +3,28 @@ .m-#{$id} { margin: $size; } + .mb-#{$id} { margin-bottom: $size; } + .ml-#{$id} { margin-left: $size; } + .mr-#{$id} { margin-right: $size; } + .mt-#{$id} { margin-top: $size; } + .mx-#{$id} { margin-left: $size; margin-right: $size; } + .my-#{$id} { margin-bottom: $size; margin-top: $size; @@ -30,24 +36,30 @@ .p-#{$id} { padding: $size; } + .pb-#{$id} { padding-bottom: $size; } + .pl-#{$id} { padding-left: $size; } + .pr-#{$id} { padding-right: $size; } + .pt-#{$id} { padding-top: $size; } + .px-#{$id} { padding-left: $size; padding-right: $size; } + .py-#{$id} { padding-bottom: $size; padding-top: $size; } -} \ No newline at end of file +} diff --git a/src/mixins/_shadow.scss b/src/mixins/_shadow.scss index 02ef8fb..7984449 100644 --- a/src/mixins/_shadow.scss +++ b/src/mixins/_shadow.scss @@ -6,4 +6,4 @@ // Shadow mixin @mixin shadow-variant($offset) { box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3); -} \ No newline at end of file +} diff --git a/src/mixins/_text.scss b/src/mixins/_text.scss index fcabcca..97dc99d 100644 --- a/src/mixins/_text.scss +++ b/src/mixins/_text.scss @@ -3,4 +3,4 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -} \ No newline at end of file +} diff --git a/src/mixins/_toast.scss b/src/mixins/_toast.scss index 1f0f9e5..a7d3bbf 100644 --- a/src/mixins/_toast.scss +++ b/src/mixins/_toast.scss @@ -2,4 +2,4 @@ @mixin toast-variant($color: $dark-color) { background: rgba($color, .9); border-color: $color; -} \ No newline at end of file +} diff --git a/src/mixins/_transition.scss b/src/mixins/_transition.scss index 0c79d06..0b7497b 100644 --- a/src/mixins/_transition.scss +++ b/src/mixins/_transition.scss @@ -1,4 +1,4 @@ // Component transition @mixin control-transition() { transition: all .2s ease; -} \ No newline at end of file +} -- cgit v1.3.1-23-gd82d