Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-25 20:44:38 +04:00
Code Issues Projects Releases Wiki Activity

Merge pull request #921 from tabler/dev-transitions

Browse Source
This commit is contained in:
Paweł Kuna
2021-10-24 23:22:08 +02:00
committed by GitHub
parent 31d5e00d3a d1e2282b80
commit c6cc82f4cf
15 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/_variables.scss
+5 -3
View File
@@ -259,7 +259,7 @@ $container-variations: (
$content-padding-y: 1.25rem !default;
// Acpect ratios
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
@@ -270,7 +270,10 @@ $aspect-ratios: (
"9x21": calc(21 / 9 * 100%),
) !default;
// overlay
// Transitions
$transition-time: .3s !default;
// Overlay
$overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 100%) !default;
//accordion
@@ -308,7 +311,6 @@ $badge-font-weight: $font-weight-medium !default;
$badge-empty-size: .5rem !default;
//buttons
$input-color: $body-color !default;
$input-btn-line-height: $line-height-base !default;
$input-btn-font-size: $font-size-base !default;
$input-btn-padding-y: .5rem - .0625rem !default;
src/scss/layout/_navbar.scss
+4 -4
View File
@@ -291,7 +291,7 @@ Navbar toggler
width: 1.25em;
background: currentColor;
border-radius: 10px;
transition: $navbar-toggler-animation-time $navbar-toggler-animation-time top, $navbar-toggler-animation-time $navbar-toggler-animation-time bottom, $navbar-toggler-animation-time transform, 0s $navbar-toggler-animation-time opacity;
@include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);
position: relative;
&:before,
@@ -304,7 +304,7 @@ Navbar toggler
background: inherit;
position: absolute;
left: 0;
transition: inherit;
@include transition(inherit);
}
&:before {
@@ -317,7 +317,7 @@ Navbar toggler
.navbar-toggler[aria-expanded="true"] & {
transform: rotate(45deg);
transition: .3s top, .3s bottom, .3s .3s transform, 0s .3s opacity;
@include transition(top $transition-time, bottom $transition-time, transform $transition-time $transition-time, opacity 0s $transition-time);
&:before {
top: 0;
@@ -390,7 +390,7 @@ Navbar vertical
bottom: 0;
z-index: $zindex-fixed;
align-items: flex-start;
transition: .3s transform;
@include transition(transform $transition-time);
overflow-x: auto;
&.navbar-right {
src/scss/mixins/_mixins.scss
+1 -1
View File
@@ -17,7 +17,7 @@
&::-webkit-scrollbar {
width: 6px;
height: 6px;
transition: .3s background;
@include transition(background $transition-time);
}
&::-webkit-scrollbar-thumb {
src/scss/ui/_avatars.scss
+1 -1
View File
@@ -89,7 +89,7 @@
border: 1px dashed $border-color;
background: $form-check-input-bg;
flex-direction: column;
transition: .3s color, .3s background-color;
@include transition(color $transition-time, background-color $transition-time);
svg {
width: 1.5rem;
src/scss/ui/_calendars.scss
+1 -1
View File
@@ -55,7 +55,7 @@
border: 1px solid transparent;
border-radius: $border-radius-pill;
outline: 0;
transition: background .3s, border .3s, box-shadow .32s, color .3s;
@include transition(background $transition-time, border $transition-time, box-shadow .32s, color $transition-time);
&:hover {
color: $primary;
src/scss/ui/_cards.scss
+2 -2
View File
@@ -21,7 +21,7 @@
@at-root a#{&} {
color: inherit;
transition: .3s box-shadow;
@include transition(box-shadow $transition-time);
&:hover {
text-decoration: none;
@@ -94,7 +94,7 @@
justify-content: center;
padding: $card-spacer-y $card-spacer-x;
text-align: center;
transition: .3s background;
@include transition(background $transition-time);
border-top: 1px solid $border-color;
flex: 1;
color: inherit;
src/scss/ui/_forms.scss
+2 -2
View File
@@ -153,7 +153,7 @@ Form help
user-select: none;
background: $min-white;
border-radius: $border-radius-pill;
transition: .3s background-color, .3s color;
@include transition(background-color $transition-time, color $transition-time);
&:hover,
&[aria-describedby] {
@@ -199,7 +199,7 @@ Input group
.input-group-text {
background: transparent;
transition: $input-transition;
@include transition($input-transition);
&:first-child {
padding-right: 0;
src/scss/ui/_lists.scss
+1 -1
View File
@@ -34,7 +34,7 @@
.list-group-hoverable {
.list-group-item-actions {
opacity: 0;
transition: .3s opacity;
@include transition(opacity $transition-time);
}
.list-group-item:hover .list-group-item-actions,
src/scss/ui/_nav.scss
+2 -2
View File
@@ -63,14 +63,14 @@
.nav-link {
display: flex;
transition: .3s color;
@include transition(color $transition-time);
align-items: center;
}
.nav-link-toggle {
margin-left: auto;
padding: 0 .25rem;
transition: .3s transform;
@include transition(transform $transition-time);
@include caret();
&:after {
src/scss/ui/_switch-icon.scss
+5 -5
View File
@@ -57,7 +57,7 @@
.switch-icon-fade {
.switch-icon-a,
.switch-icon-b {
transition: opacity .5s;
@include transition(opacity .5s);
}
}
@@ -65,7 +65,7 @@
.switch-icon-scale {
.switch-icon-a,
.switch-icon-b {
transition: opacity .5s, transform .0s .5s;
@include transition(opacity .5s, transform .0s .5s);
}
.switch-icon-b {
@@ -75,7 +75,7 @@
&.active {
.switch-icon-a,
.switch-icon-b {
transition: opacity .0s, transform .5s;
@include transition(opacity .0s, transform .5s);
}
.switch-icon-b {
@@ -92,7 +92,7 @@
.switch-icon-b {
backface-visibility: hidden;
transform-style: preserve-3d;
transition: opacity 0s .2s, transform .4s ease-in-out;
@include transition(opacity 0s .2s, transform .4s ease-in-out);
}
.switch-icon-a {
@@ -127,7 +127,7 @@
.switch-icon-a,
.switch-icon-b {
transition: opacity .3s, transform .3s;
@include transition(opacity $transition-time, transform $transition-time);
}
.switch-icon-a {
src/scss/ui/forms/_form-check.scss
+1 -1
View File
@@ -14,7 +14,7 @@ Form check
margin-top: ($form-check-min-height - $form-check-input-width) * .5;
.form-switch & {
transition: .3s background-color, .3s background-position;
@include transition(background-color$transition-time, background-position $transition-time);
}
}
src/scss/ui/forms/_form-colorinput.scss
+1 -1
View File
@@ -34,7 +34,7 @@ Color Input
background: no-repeat center center/$form-check-input-checked-bg-size;
background-image: escape-svg($form-check-input-checked-bg-image);
opacity: 0;
transition: .3s opacity;
@include transition(opacity $transition-time);
.form-colorinput-input:checked ~ & {
opacity: 1;
src/scss/ui/forms/_form-imagecheck.scss
+3 -3
View File
@@ -45,7 +45,7 @@ Image check
background: $white;
border: 1px solid $border-color;
border-radius: 3px;
transition: .3s opacity;
@include transition(opacity $transition-time);
.form-imagecheck-input:checked ~ & {
background-color: $form-check-input-checked-bg-color;
@@ -62,7 +62,7 @@ Image check
max-width: 100%;
display: block;
opacity: .64;
transition: .3s opacity;
@include transition(opacity $transition-time);
&:first-child {
border-top-left-radius: 2px;
@@ -86,7 +86,7 @@ Image check
font-size: $font-size-sm;
color: $text-muted;
text-align: center;
transition: .3s color;
@include transition(color $transition-time);
.form-imagecheck:hover &,
.form-imagecheck-input:focus ~ .form-imagecheck-figure &,
src/scss/ui/forms/_form-selectgroup.scss
+1 -1
View File
@@ -43,7 +43,7 @@ Select group
user-select: none;
border: 1px solid $input-border-color;
border-radius: 3px;
transition: border-color .3s, background .3s, color .3s;
@include transition(border-color $transition-time, background $transition-time, color $transition-time);
.icon:only-child {
margin: 0 -.25rem;
src/scss/vendor/_litepicker.scss
Vendored
+1 -1
View File
@@ -41,7 +41,7 @@
.day-item {
cursor: pointer !important;
padding: .5rem 0 !important;
transition: .3s color, .3s background-color, .3s border-color;
@include transition(color $transition-time, background-color $transition-time, border-color $transition-time);
}
}