mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 02:16:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Order scss properties

Browse source
This commit is contained in:
Lucas Larroche 2021-11-02 02:54:52 +07:00
parent c71144455b
commit f6d38a7586
41 changed files with 372 additions and 295 deletions
Download patch file Download diff file Expand all files Collapse all files

2
scss/components/_accordion.scss
View file

@ -42,8 +42,8 @@ details {
transform: rotate(-90deg);
background-image: var(--icon-chevron);
background-position: center;
background-repeat: no-repeat;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
@if $enable-transitions {

2
scss/components/_progress.scss
View file

@ -21,10 +21,10 @@ progress {
// Reset the default appearance
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
// Styles
display: inline-block;
appearance: none;
width: 100%;
height: 0.5rem;
margin-bottom: calc(var(--spacing) * 0.5);

2
scss/content/_button.scss
View file

@ -65,8 +65,8 @@ a[role="button"] {
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-size: 1rem;
font-weight: var(--font-weight);
font-size: 1rem;
line-height: var(--line-height);
text-align: center;
cursor: pointer;

6
scss/content/_code.scss
View file

@ -13,8 +13,8 @@ pre,
code,
kbd,
samp {
font-family: var(--font-family); // 1
font-size: 0.875em; // 2
font-family: var(--font-family); // 1
}
// Prevent overflow of the container in all browsers (opinionated)
@ -29,11 +29,11 @@ pre {
pre,
code,
kbd {
border-radius: var(--border-radius);
background: var(--code-background-color);
color: var(--code-color);
font-weight: var(--font-weight);
line-height: initial;
border-radius: var(--border-radius);
}
code,
@ -48,9 +48,9 @@ pre {
overflow-x: auto;
> code {
background: transparent;
display: block;
padding: var(--spacing);
background: transparent;
font-size: 14px;
line-height: var(--line-height);
}

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

@ -42,8 +42,8 @@
[type="week"] {
background-image: var(--icon-date);
background-position: center right 0.75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
background-repeat: no-repeat;
&::-webkit-calendar-picker-indicator {
opacity: 0;
@ -77,8 +77,8 @@
--color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
margin-left: 0;
margin-inline-end: calc(var(--spacing) / 2);
margin-inline-start: 0;
margin-inline-end: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5)
calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color);
@ -87,8 +87,8 @@
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-size: 1rem;
font-weight: var(--font-weight);
font-size: 1rem;
line-height: var(--line-height);
text-align: center;
cursor: pointer;
@ -222,8 +222,8 @@
) !important;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-repeat: no-repeat;
background-size: 1rem auto;
background-repeat: no-repeat;
}
// Cancel button

8
scss/content/_form-checkbox-radio.scss
View file

@ -13,8 +13,8 @@
margin-top: -0.125em;
margin-right: 0.375em;
margin-left: 0;
margin-inline-end: 0.375em;
margin-inline-start: 0;
margin-inline-end: 0.375em;
border-width: var(--border-width);
vertical-align: middle;
cursor: pointer;
@ -30,8 +30,8 @@
--border-color: var(--primary);
background-image: var(--icon-checkbox);
background-position: center;
background-repeat: no-repeat;
background-size: 0.75em auto;
background-repeat: no-repeat;
}
& ~ label {
@ -49,8 +49,8 @@
--border-color: var(--primary);
background-image: var(--icon-minus);
background-position: center;
background-repeat: no-repeat;
background-size: 0.75em auto;
background-repeat: no-repeat;
}
}
@ -115,8 +115,8 @@
&::before {
margin-right: 0;
margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
margin-inline-end: 0;
margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
margin-inline-end: 0;
}
}

14
scss/content/_form.scss
View file

@ -14,10 +14,10 @@ optgroup,
select,
textarea {
margin: 0; // 2
font-family: inherit; // 1
font-size: 1rem; // 1
letter-spacing: inherit; // 2
line-height: var(--line-height); // 1
font-family: inherit; // 1
letter-spacing: inherit; // 2
}
// Show the overflow in IE.
@ -223,19 +223,19 @@ textarea {
var(--form-element-spacing-horizontal) + 1.5rem
) !important;
padding-left: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal) !important;
padding-inline-end: calc(
var(--form-element-spacing-horizontal) + 1.5rem
) !important;
padding-inline-start: var(--form-element-spacing-horizontal) !important;
} @else {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-start: var(--form-element-spacing-horizontal);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
}
background-position: center right 0.75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
background-repeat: no-repeat;
}
&[aria-invalid="false"] {
@ -316,12 +316,12 @@ select {
&:not([multiple]):not([size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-start: var(--form-element-spacing-horizontal);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
background-image: var(--icon-chevron);
background-position: center right 0.75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
background-repeat: no-repeat;
}
}

2
scss/content/_table.scss
View file

@ -27,8 +27,8 @@ td {
padding: calc(var(--spacing) / 2) var(--spacing);
border-bottom: var(--border-width) solid var(--table-border-color);
color: var(--color);
font-size: var(--font-size);
font-weight: var(--font-weight);
font-size: var(--font-size);
text-align: left;
text-align: start;
}

14
scss/content/_typography.scss
View file

@ -61,9 +61,9 @@ ul {
margin-top: 0;
margin-bottom: var(--typography-spacing-vertical);
color: var(--color);
font-size: var(--font-size);
font-weight: var(--font-weight);
font-style: normal;
font-weight: var(--font-weight);
font-size: var(--font-size);
}
// Links
@ -135,9 +135,9 @@ h6 {
margin-top: 0;
margin-bottom: var(--typography-spacing-vertical);
color: var(--color);
font-family: var(--font-family);
font-size: var(--font-size);
font-weight: var(--font-weight);
font-size: var(--font-size);
font-family: var(--font-family);
}
h1 {
@ -191,8 +191,8 @@ hgroup {
> *:last-child {
--color: var(--muted-color);
--font-weight: unset;
font-family: unset;
font-size: 1rem;
font-family: unset;
}
}
@ -211,8 +211,8 @@ ul,
ol {
padding-right: 0;
padding-left: var(--spacing);
padding-inline-end: 0;
padding-inline-start: var(--spacing);
padding-inline-end: 0;
li {
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
@ -238,8 +238,8 @@ blockquote {
padding: var(--spacing);
border-right: none;
border-left: 0.25rem solid var(--blockquote-border-color);
border-inline-end: none;
border-inline-start: 0.25rem solid var(--blockquote-border-color);
border-inline-end: none;
footer {
margin-top: calc(var(--typography-spacing-vertical) * 0.5);

8
scss/layout/_document.scss
View file

@ -32,14 +32,14 @@
html {
-webkit-text-size-adjust: 100%; // 2
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 3
tab-size: 4; // 5
-ms-text-size-adjust: 100%; // 6
text-rendering: optimizeLegibility;
background-color: var(--background-color);
color: var(--color);
font-family: var(--font-family);
font-size: var(--font-size);
font-weight: var(--font-weight);
font-size: var(--font-size);
line-height: var(--line-height); // 1
text-rendering: optimizeLegibility;
font-family: var(--font-family);
cursor: default; // 4
tab-size: 4; // 5
}

9
scss/postcss.config.js Normal file
View file

@ -0,0 +1,9 @@
module.exports = {
syntax: "postcss-scss",
map: false,
plugins: {
"css-declaration-sorter": {
order: "smacss"
}
}
}

4
scss/utilities/_loading.scss
View file

@ -18,10 +18,10 @@
border: 0.1875em solid currentColor;
border-radius: 1em;
border-right-color: transparent;
content: '';
vertical-align: text-bottom;
vertical-align: -.125em; // Visual alignment
animation: spinner 0.75s linear infinite;
content: '';
opacity: var(--loading-spinner-opacity);
}
@ -29,8 +29,8 @@
&::before {
margin-right: calc(var(--spacing) * 0.5);
margin-left: 0;
margin-inline-end: calc(var(--spacing) * 0.5);
margin-inline-start: 0;
margin-inline-end: calc(var(--spacing) * 0.5);
}
}

8
scss/utilities/_tooltip.scss
View file

@ -23,14 +23,14 @@
transform: translate(-50%, -.25rem);
border-radius: var(--border-radius);
background: var(--tooltip-background-color);
content: attr(data-tooltip);
color: var(--tooltip-color);
font-size: .875rem;
font-style: normal;
font-weight: var(--font-weight);
font-size: .875rem;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
content: attr(data-tooltip);
opacity: 0;
pointer-events: none;
}
@ -44,8 +44,8 @@
border-left: .3rem solid transparent;
border-radius: 0;
background-color: transparent;
color: var(--tooltip-background-color);
content: '';
color: var(--tooltip-background-color);
}
&:focus,
@ -55,8 +55,8 @@
opacity: 1;
@if $enable-transitions {
animation-name: slide;
animation-duration: .2s;
animation-name: slide;
}
}