QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-20 06:40:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: material progress bar animation from RTL.

Browse Source
This commit is contained in:
a.bouhuolia
2021-08-17 20:45:53 +02:00
parent fc62aca56e
commit a7b0f1a8d2
1 changed files with 83 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
client/src/style/components/MaterialProgressBar.scss
View File

@@ -1,101 +1,149 @@
// IONIC DEFAULT THEME COLORS // IONIC DEFAULT THEME COLORS
$colors: ( $colors: (primary: #387ef5,
primary: #387ef5, secondary: #32db64,
secondary: #32db64, danger: #f53d3d,
danger: #f53d3d, light: #f4f4f4,
light: #f4f4f4, dark: #222);
dark: #222
);
// https://css-tricks.com/html5-progress-element/ .progress,
.progress, progress[value] { progress[value] {
width: 100%; width: 100%;
border: none; border: none;
margin: 5px 0; margin: 5px 0;
height: 5px; height: 5px;
display: block; display: block;
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
&::-webkit-progress-bar { &::-webkit-progress-bar {
background-color: lighten( map-get($colors, primary), 35% ); background-color: lighten(map-get($colors, primary), 35%);
} }
&::-webkit-progress-value { &::-webkit-progress-value {
background-color: map-get($colors, primary); background-color: map-get($colors, primary);
} }
} }
// http://materializecss.com/preloader.html
// https://github.com/Dogfalo/materialize/blob/master/dist/css/materialize.css
.progress-materializecss { .progress-materializecss {
position: absolute; position: absolute;
top: -1px; top: -1px;
height: 2px; height: 2px;
display: block; display: block;
width: 100%; width: 100%;
background-color: transparent; background-color: transparent;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
.indeterminate { .indeterminate {
background-color: #002fff; background-color: #002fff;
&:before{ &:before {
content: ''; content: '';
position: absolute; position: absolute;
background-color: inherit; background-color: inherit;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
will-change: left, right; animation: indeterminate-left 3.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
animation: indeterminate 3.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; will-change: left, right;
[dir="rtl"] & {
animation: indeterminate-right 3.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
} }
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
background-color: inherit; background-color: inherit;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
will-change: left, right; will-change: left, right;
animation: indeterminate-short 3.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: indeterminate-short-left 3.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
animation-delay: 2.15s; animation-delay: 2.15s;
[dir="rtl"] & {
animation: indeterminate-short-right 3.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}
} }
} }
} }
@keyframes indeterminate { @keyframes indeterminate-left {
0% { 0% {
left: -35%; left: -35%;
right: 100%; right: 100%;
} }
60% { 60% {
left: 100%; left: 100%;
right: -90%; right: -90%;
} }
100% { 100% {
left: 100%; left: 100%;
right: -90%; right: -90%;
} }
} }
@keyframes indeterminate-short { @keyframes indeterminate-short-left {
0% { 0% {
left: -200%; left: -200%;
right: 100%; right: 100%;
} }
60% { 60% {
left: 107%; left: 107%;
right: -8%; right: -8%;
} }
100% { 100% {
left: 107%; left: 107%;
right: -8%; right: -8%;
} }
} }
.progress-container{
@keyframes indeterminate-right {
0% {
right: -35%;
left: 100%;
}
60% {
right: 100%;
left: -90%;
}
100% {
right: 100%;
left: -90%;
}
}
@keyframes indeterminate-short-right {
0% {
right: -200%;
left: 100%;
}
60% {
right: 107%;
left: -8%;
}
100% {
right: 107%;
left: -8%;
}
}
.progress-container {
width: 100%; width: 100%;
position: relative; position: relative;
} }
// IRRELEVANTS STYLES // // IRRELEVANTS STYLES //
///////////////////////// /////////////////////////