Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-12 22:32:21 +04:00
Code Issues Projects Releases Wiki Activity

tabler v1.0 improvements

Browse Source
This commit is contained in:
codecalm
2020-11-01 22:40:47 +01:00
parent afebee8a33
commit 39156c1141
36 changed files with 298 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/ui/_buttons.scss
+93 -18
View File
@@ -1,8 +1,20 @@
.btn {
font-weight: $btn-font-weight;
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
background-color: $white;
border-color: $border-color-transparent;
&:hover {
color: inherit;
border-color: $text-muted-light;
}
&:focus {
border-color: rgba(var(--#{$variable-prefix}btn-color, hex-to-rgb($primary)), .5);
box-shadow: 0 0 0 $input-btn-focus-width rgba(var(--#{$variable-prefix}btn-color, hex-to-rgb($primary)), $input-btn-focus-color-opacity)
}
&:disabled,
&.disabled {
@@ -12,7 +24,7 @@
svg {
width: 1.25rem;
height: 1.25rem;
margin: 0 .5em 0 -.5em;
margin: 0 .5rem 0 -.25rem;
vertical-align: bottom;
}
@@ -20,22 +32,57 @@
width: 1.25rem;
height: 1.25rem;
vertical-align: text-top;
margin: 0 .5em 0 -.5em;
margin: 0 .5rem 0 -.5rem;
}
.icon-right {
margin: 0 -.5em 0 .5em;
margin: 0 -.25rem 0 .5rem;
}
}
.btn-white {
@include button-variant($white, $border-color-dark, $text-muted);
box-shadow: none !important;
%btn-color {
background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
color: var(--#{$variable-prefix}btn-color-text);
&.active {
background: $primary;
color: $white;
z-index: 3 !important;
&:hover {
color: var(--#{$variable-prefix}btn-color-text);
background: rgba(var(--#{$variable-prefix}btn-color-darker), 1);
border-color: transparent;
}
}
%btn-outline {
background-color: transparent;
color: rgba(var(--#{$variable-prefix}btn-color), 1);
border-color: $border-color-transparent;
&:hover {
background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
color: var(--#{$variable-prefix}btn-color-text);
border-color: rgba(var(--#{$variable-prefix}btn-color), 1);
}
}
%btn-ghost {
background: transparent;
color: rgba(var(--#{$variable-prefix}btn-color), 1);
border-color: transparent;
&:hover {
background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
color: var(--#{$variable-prefix}btn-color-text);
border-color: rgba(var(--#{$variable-prefix}btn-color), 1);
}
}
.btn-link {
color: $link-color;
background-color: transparent;
border-color: transparent;
&:hover {
color: $link-hover-color;
border-color: transparent;
}
}
@@ -50,7 +97,7 @@
padding-left: 1.5em;
border-radius: 10rem;
&[class*="btn-icon"]{
&[class*="btn-icon"] {
padding: 0.375rem 15px;
}
}
@@ -67,11 +114,6 @@
}
}
// stylelint-disable declaration-no-important
.btn-link {
box-shadow: none !important;
}
.btn-square {
border-radius: 0;
}
@@ -86,7 +128,7 @@
margin: 0 .5rem .5rem 0;
}
>.btn-block {
> .btn-block {
flex: 1;
white-space: nowrap;
}
@@ -140,4 +182,37 @@
top: calc(50% - .5rem);
animation: spinner-border .75s linear infinite;
}
}
$btn-colors: $theme-colors;
@if $enable-extra-colors {
$btn-colors: map-merge($btn-colors, $colors);
}
@if $enable-social-colors {
$btn-colors: map-merge($btn-colors, $social-colors);
}
@each $name, $color in $btn-colors {
.btn-#{$name},
.btn-outline-#{$name},
.btn-ghost-#{$name} {
--#{$variable-prefix}btn-color: #{hex-to-rgb($color)};
--#{$variable-prefix}btn-color-darker: #{hex-to-rgb(theme-color-darker($color))};
--#{$variable-prefix}btn-color-text: #{color-contrast($color)};
}
.btn-#{$name} {
@extend %btn-color;
}
.btn-outline-#{$name} {
@extend %btn-outline;
}
.btn-ghost-#{$name} {
@extend %btn-ghost;
}
}