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/_avatar.scss | 6 +++++ src/mixins/_button.scss | 51 +++++++++++++++++++++++++++++++++++++++++++ src/mixins/_clearfix.scss | 8 +++++++ src/mixins/_color.scss | 24 ++++++++++++++++++++ src/mixins/_label.scss | 11 ++++++++++ src/mixins/_position.scss | 53 +++++++++++++++++++++++++++++++++++++++++++++ src/mixins/_shadow.scss | 9 ++++++++ src/mixins/_text.scss | 6 +++++ src/mixins/_toast.scss | 5 +++++ src/mixins/_transition.scss | 4 ++++ 10 files changed, 177 insertions(+) create mode 100644 src/mixins/_avatar.scss create mode 100644 src/mixins/_button.scss create mode 100644 src/mixins/_clearfix.scss create mode 100644 src/mixins/_color.scss create mode 100644 src/mixins/_label.scss create mode 100644 src/mixins/_position.scss create mode 100644 src/mixins/_shadow.scss create mode 100644 src/mixins/_text.scss create mode 100644 src/mixins/_toast.scss create mode 100644 src/mixins/_transition.scss (limited to 'src/mixins') diff --git a/src/mixins/_avatar.scss b/src/mixins/_avatar.scss new file mode 100644 index 0000000..bb9777a --- /dev/null +++ b/src/mixins/_avatar.scss @@ -0,0 +1,6 @@ +// Avatar mixin +@mixin avatar-base($size: $unit-8) { + 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 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 diff --git a/src/mixins/_clearfix.scss b/src/mixins/_clearfix.scss new file mode 100644 index 0000000..b3c78b0 --- /dev/null +++ b/src/mixins/_clearfix.scss @@ -0,0 +1,8 @@ +// Clearfix mixin +@mixin clearfix() { + &::after { + clear: both; + content: ""; + display: table; + } +} \ No newline at end of file diff --git a/src/mixins/_color.scss b/src/mixins/_color.scss new file mode 100644 index 0000000..376688c --- /dev/null +++ b/src/mixins/_color.scss @@ -0,0 +1,24 @@ +// Background color utility mixin +@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) { + #{$name} { + background: $color; + + @if (lightness($color) < 60) { + color: $light-color; + } + } +} + +// Text color utility mixin +@mixin text-color-variant($name: ".text-primary", $color: $primary-color) { + #{$name} { + color: $color; + } + + a#{$name} { + &:focus, + &:hover { + color: darken($color, 5%); + } + } +} \ No newline at end of file diff --git a/src/mixins/_label.scss b/src/mixins/_label.scss new file mode 100644 index 0000000..4dcb416 --- /dev/null +++ b/src/mixins/_label.scss @@ -0,0 +1,11 @@ +// Label base style +@mixin label-base() { + border-radius: $border-radius; + line-height: 1.2; + padding: .1rem .15rem; +} + +@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 new file mode 100644 index 0000000..bbcadac --- /dev/null +++ b/src/mixins/_position.scss @@ -0,0 +1,53 @@ +// Margin utility mixin +@mixin margin-variant($id: 1, $size: $unit-1) { + .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; + } +} + +// Padding utility mixin +@mixin padding-variant($id: 1, $size: $unit-1) { + .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 new file mode 100644 index 0000000..02ef8fb --- /dev/null +++ b/src/mixins/_shadow.scss @@ -0,0 +1,9 @@ +// Component focus shadow +@mixin control-shadow($color: $primary-color) { + box-shadow: 0 0 0 .1rem rgba($color, .2); +} + +// 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 new file mode 100644 index 0000000..fcabcca --- /dev/null +++ b/src/mixins/_text.scss @@ -0,0 +1,6 @@ +// Text Ellipsis +@mixin text-ellipsis() { + 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 new file mode 100644 index 0000000..1f0f9e5 --- /dev/null +++ b/src/mixins/_toast.scss @@ -0,0 +1,5 @@ +// Toast variant mixin +@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 new file mode 100644 index 0000000..0c79d06 --- /dev/null +++ b/src/mixins/_transition.scss @@ -0,0 +1,4 @@ +// Component transition +@mixin control-transition() { + transition: all .2s ease; +} \ 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') 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