diff options
1 files changed, 0 insertions, 175 deletions
| -rw-r--r-- | src/mixins.less | 175 |
diff --git a/src/mixins.less b/src/mixins.less deleted file mode 100644 index 8cbb3f5..0000000 --- a/src/mixins.less +++ /dev/null @@ -1,175 +0,0 @@ -// Mixins -// Avatar mixin -.avatar-base(@size: @unit-8) { - font-size: @size / 2; - height: @size; - 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 { - clear: both; - content: ""; - display: table; - } -} - -// Component focus shadow -.control-shadow(@color: @primary-color) { - box-shadow: 0 0 0 .1rem fade(@color, 20%); -} - -// Component transition -.control-transition() { - transition: all .2s ease; -} - -// Label base style -.label-base() { - border-radius: @border-radius; - line-height: 1; - padding: .15rem .2rem; -} - -.label-variant(@color: @light-color, @bg-color: @primary-color) { - background: @bg-color; - color: @color; -} - -// Margin utility mixin -.margin-variant(@id: 1, @size: 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 -.padding-variant(@id: 1, @size: 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; - } -} - -// 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; - - a& { - &:focus, - &:hover { - color: darken(@color, 5%); - } - } -} - -// Toast variant mixin -.toast-variant(@color: @dark-color) { - background: fade(@color, 90%); - border-color: @color; -}
\ No newline at end of file |