Optional use of !Important in variables

This commit is contained in:
Lucas 2020-09-25 09:10:04 +07:00
parent 6f260e9b74
commit 15aecaa674
11 changed files with 57 additions and 46 deletions

View file

@ -243,13 +243,16 @@
// Search
[type="search"] {
padding-left: #{$spacing-input-button-horizontal + 1.5rem} !important;
border-radius: #{1rem*$line-height + $spacing-input-button-vertical*2};
// Source: https://feathericons.com/
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
background-position: center left .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
@if $enable-important {
padding-left: #{$spacing-input-button-horizontal + 1.5rem} !important;
// Source: https://feathericons.com/
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
background-position: center left .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
// Cancel button
&::-webkit-search-cancel-button{

View file

@ -1,4 +1,4 @@
@if $enable-transitions {
@if $enable-transitions and $enable-important {
/**
* Reduce Motion Features
@ -17,13 +17,13 @@
*,
::before,
::after {
background-attachment: initial; // 2
animation-duration: 1ms; // 1
animation-delay: -1ms; // 1
animation-iteration-count: 1; // 1
scroll-behavior: auto; // 3
transition-delay: 0s; // 4
transition-duration: 0s; // 4
background-attachment: initial !important; // 2
animation-duration: 1ms !important; // 1
animation-delay: -1ms !important; // 1
animation-iteration-count: 1 !important; // 1
scroll-behavior: auto !important; // 3
transition-delay: 0s !important; // 4
transition-duration: 0s !important; // 4
}
}
}