mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-21 09:06:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Optional use of !Important in variables

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

18
css/pico.classless.css
View file

@ -1228,8 +1228,8 @@ label > textarea {
} }
[type="search"] { [type="search"] {
padding-left: 2.5rem !important;
border-radius: 3rem; border-radius: 3rem;
padding-left: 2.5rem !important;
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='rgba(115, 130, 140, 0.999)' 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-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='rgba(115, 130, 140, 0.999)' 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-position: center left .75rem;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1572,7 +1572,7 @@ article {
} }
article > *:not(header):not(footer):not(pre):last-child { article > *:not(header):not(footer):not(pre):last-child {
margin-bottom: 0; margin-bottom: 0 !important;
} }
/** /**
@ -1824,12 +1824,12 @@ aside li a {
*, *,
::before, ::before,
::after { ::after {
background-attachment: initial; background-attachment: initial !important;
animation-duration: 1ms; animation-duration: 1ms !important;
animation-delay: -1ms; animation-delay: -1ms !important;
animation-iteration-count: 1; animation-iteration-count: 1 !important;
scroll-behavior: auto; scroll-behavior: auto !important;
transition-delay: 0s; transition-delay: 0s !important;
transition-duration: 0s; transition-duration: 0s !important;
} }
} }

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

18
css/pico.css
View file

@ -1472,8 +1472,8 @@ label > textarea {
} }
[type="search"] { [type="search"] {
padding-left: 2.5rem !important;
border-radius: 3rem; border-radius: 3rem;
padding-left: 2.5rem !important;
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='rgba(115, 130, 140, 0.999)' 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-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='rgba(115, 130, 140, 0.999)' 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-position: center left .75rem;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1816,7 +1816,7 @@ article {
} }
article > *:not(header):not(footer):not(pre):last-child { article > *:not(header):not(footer):not(pre):last-child {
margin-bottom: 0; margin-bottom: 0 !important;
} }
/** /**
@ -2072,12 +2072,12 @@ aside li a {
*, *,
::before, ::before,
::after { ::after {
background-attachment: initial; background-attachment: initial !important;
animation-duration: 1ms; animation-duration: 1ms !important;
animation-delay: -1ms; animation-delay: -1ms !important;
animation-iteration-count: 1; animation-iteration-count: 1 !important;
scroll-behavior: auto; scroll-behavior: auto !important;
transition-delay: 0s; transition-delay: 0s !important;
transition-duration: 0s; transition-duration: 0s !important;
} }
} }

18
css/pico.fluid.classless.css
View file

@ -1224,8 +1224,8 @@ label > textarea {
} }
[type="search"] { [type="search"] {
padding-left: 2.5rem !important;
border-radius: 3rem; border-radius: 3rem;
padding-left: 2.5rem !important;
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='rgba(115, 130, 140, 0.999)' 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-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='rgba(115, 130, 140, 0.999)' 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-position: center left .75rem;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1568,7 +1568,7 @@ article {
} }
article > *:not(header):not(footer):not(pre):last-child { article > *:not(header):not(footer):not(pre):last-child {
margin-bottom: 0; margin-bottom: 0 !important;
} }
/** /**
@ -1820,12 +1820,12 @@ aside li a {
*, *,
::before, ::before,
::after { ::after {
background-attachment: initial; background-attachment: initial !important;
animation-duration: 1ms; animation-duration: 1ms !important;
animation-delay: -1ms; animation-delay: -1ms !important;
animation-iteration-count: 1; animation-iteration-count: 1 !important;
scroll-behavior: auto; scroll-behavior: auto !important;
transition-delay: 0s; transition-delay: 0s !important;
transition-duration: 0s; transition-duration: 0s !important;
} }
} }

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

3
scss/_variables.scss
View file

@ -29,6 +29,9 @@ $enable-input-states: true !default;
// Enable transitions for <a>, <button>, <input> // Enable transitions for <a>, <button>, <input>
$enable-transitions: true !default; $enable-transitions: true !default;
// Enable overriding with !important (used for <article>, `reduce-motion`, [type="search"])
$enable-important: true !default;
// Spacings // Spacings
// –––––––––––––––––––– // ––––––––––––––––––––

6
scss/components/_card.scss
View file

@ -54,7 +54,9 @@ article {
} }
// Remove last-child margin bottom // Remove last-child margin bottom
> *:not(header):not(footer):not(pre):last-child { @if $enable-important {
margin-bottom: 0; > *:not(header):not(footer):not(pre):last-child {
margin-bottom: 0 !important;
}
} }
} }

15
scss/content/_form-alt-input-types.scss
View file

@ -243,13 +243,16 @@
// Search // Search
[type="search"] { [type="search"] {
padding-left: #{$spacing-input-button-horizontal + 1.5rem} !important;
border-radius: #{1rem*$line-height + $spacing-input-button-vertical*2}; 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"); @if $enable-important {
background-position: center left .75rem; padding-left: #{$spacing-input-button-horizontal + 1.5rem} !important;
background-repeat: no-repeat; // Source: https://feathericons.com/
background-size: 1rem auto; 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 // Cancel button
&::-webkit-search-cancel-button{ &::-webkit-search-cancel-button{

16
scss/content/_reduce-motion.scss
View file

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

3
scss/pico.slim.scss
View file

@ -19,6 +19,9 @@ $enable-input-states: false;
// Enable transitions for <a>, <button>, <input>, <details> // Enable transitions for <a>, <button>, <input>, <details>
$enable-transitions: false; $enable-transitions: false;
// Enable overriding with !important (used for <article>, `reduce-motion`, [type="search"])
$enable-important: false;
// Pico Lib // Pico Lib
// -------------------- // --------------------