Summary Files Commits Branches @commit @diff @stats
path: root / src / mixins.less
diff options
context:
space:
mode:
1 files changed, 0 insertions, 175 deletions
-rw-r--r--src/mixins.less175
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