mirror of
https://github.com/picocss/pico.git
synced 2025-04-21 09:06:14 -04:00
reorder scss files to match build output
This commit is contained in:
parent
f91ef15cef
commit
fd93112beb
10 changed files with 27 additions and 25 deletions
|
@ -16,8 +16,8 @@
|
||||||
|
|
||||||
> header,
|
> header,
|
||||||
> footer {
|
> footer {
|
||||||
margin-inline-end: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
|
|
||||||
margin-inline-start: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
|
margin-inline-start: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
|
||||||
|
margin-inline-end: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
|
||||||
padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66)
|
padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66)
|
||||||
var(#{$css-var-prefix}block-spacing-horizontal);
|
var(#{$css-var-prefix}block-spacing-horizontal);
|
||||||
background-color: var(#{$css-var-prefix}card-sectioning-background-color);
|
background-color: var(#{$css-var-prefix}card-sectioning-background-color);
|
||||||
|
@ -29,8 +29,8 @@
|
||||||
border-block-end: var(#{$css-var-prefix}border-width)
|
border-block-end: var(#{$css-var-prefix}border-width)
|
||||||
solid
|
solid
|
||||||
var(#{$css-var-prefix}card-border-color);
|
var(#{$css-var-prefix}card-border-color);
|
||||||
border-end-start-radius: var(#{$css-var-prefix}border-radius);
|
|
||||||
border-start-start-radius: var(#{$css-var-prefix}border-radius);
|
border-start-start-radius: var(#{$css-var-prefix}border-radius);
|
||||||
|
border-end-start-radius: var(#{$css-var-prefix}border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
> footer {
|
> footer {
|
||||||
|
@ -39,8 +39,8 @@
|
||||||
border-block-start: var(#{$css-var-prefix}border-width)
|
border-block-start: var(#{$css-var-prefix}border-width)
|
||||||
solid
|
solid
|
||||||
var(#{$css-var-prefix}card-border-color);
|
var(#{$css-var-prefix}card-border-color);
|
||||||
border-end-end-radius: var(#{$css-var-prefix}border-radius);
|
|
||||||
border-start-end-radius: var(#{$css-var-prefix}border-radius);
|
border-start-end-radius: var(#{$css-var-prefix}border-radius);
|
||||||
|
border-end-end-radius: var(#{$css-var-prefix}border-radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -85,9 +85,9 @@
|
||||||
display: block;
|
display: block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
margin-inline-start: auto;
|
||||||
margin-block-start: calc(var(#{$css-var-prefix}spacing) * -1);
|
margin-block-start: calc(var(#{$css-var-prefix}spacing) * -1);
|
||||||
margin-block-end: var(#{$css-var-prefix}spacing);
|
margin-block-end: var(#{$css-var-prefix}spacing);
|
||||||
margin-inline-start: auto;
|
|
||||||
border: none;
|
border: none;
|
||||||
background-image: var(#{$css-var-prefix}icon-close);
|
background-image: var(#{$css-var-prefix}icon-close);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
|
|
|
@ -68,9 +68,9 @@
|
||||||
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
|
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
|
||||||
select {
|
select {
|
||||||
height: auto;
|
height: auto;
|
||||||
|
margin-inline-start: inherit;
|
||||||
margin-inline-end: inherit;
|
margin-inline-end: inherit;
|
||||||
margin-block-end: 0;
|
margin-block-end: 0;
|
||||||
margin-inline-start: inherit;
|
|
||||||
padding: calc(
|
padding: calc(
|
||||||
var(#{$css-var-prefix}nav-link-spacing-vertical) -
|
var(#{$css-var-prefix}nav-link-spacing-vertical) -
|
||||||
(var(#{$css-var-prefix}border-width) * 2)
|
(var(#{$css-var-prefix}border-width) * 2)
|
||||||
|
|
|
@ -46,10 +46,10 @@
|
||||||
&::after {
|
&::after {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
transform: translate(-50%, 0rem);
|
transform: translate(-50%, 0rem);
|
||||||
border-block-start: 0.3rem solid;
|
|
||||||
border-inline-end: 0.3rem solid transparent;
|
|
||||||
border-inline-start: 0.3rem solid transparent;
|
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
border-inline-start: 0.3rem solid transparent;
|
||||||
|
border-inline-end: 0.3rem solid transparent;
|
||||||
|
border-block-start: 0.3rem solid;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
content: "";
|
content: "";
|
||||||
color: var(#{$css-var-prefix}tooltip-background-color);
|
color: var(#{$css-var-prefix}tooltip-background-color);
|
||||||
|
|
|
@ -145,9 +145,9 @@
|
||||||
display: block;
|
display: block;
|
||||||
margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
|
margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
|
||||||
padding: var(#{$css-var-prefix}spacing);
|
padding: var(#{$css-var-prefix}spacing);
|
||||||
|
border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
|
||||||
|
border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
|
||||||
border-inline-end: none;
|
border-inline-end: none;
|
||||||
border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
|
|
||||||
border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
|
|
||||||
border-inline-end: none;
|
border-inline-end: none;
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
|
|
|
@ -264,18 +264,18 @@
|
||||||
) {
|
) {
|
||||||
&[aria-invalid] {
|
&[aria-invalid] {
|
||||||
@if $enable-important {
|
@if $enable-important {
|
||||||
padding-inline-end: calc(
|
|
||||||
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
|
|
||||||
) !important;
|
|
||||||
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||||
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
|
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
|
||||||
padding-inline-end: calc(
|
padding-inline-end: calc(
|
||||||
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
|
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
|
||||||
) !important;
|
) !important;
|
||||||
|
padding-inline-end: calc(
|
||||||
|
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
|
||||||
|
) !important;
|
||||||
} @else {
|
} @else {
|
||||||
|
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||||
|
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||||
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
|
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
|
||||||
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
|
||||||
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
|
||||||
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
|
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
|
||||||
}
|
}
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
|
@ -393,9 +393,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not([multiple], [size]) {
|
&:not([multiple], [size]) {
|
||||||
|
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||||
|
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||||
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
|
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
|
||||||
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
|
||||||
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
|
|
||||||
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
|
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
|
||||||
background-image: var(#{$css-var-prefix}icon-chevron);
|
background-image: var(#{$css-var-prefix}icon-chevron);
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
|
|
|
@ -22,8 +22,8 @@
|
||||||
appearance: none;
|
appearance: none;
|
||||||
width: 1.25em;
|
width: 1.25em;
|
||||||
height: 1.25em;
|
height: 1.25em;
|
||||||
margin-block-start: -0.125em;
|
|
||||||
margin-inline-end: 0.5em;
|
margin-inline-end: 0.5em;
|
||||||
|
margin-block-start: -0.125em;
|
||||||
border-width: var(#{$css-var-prefix}border-width);
|
border-width: var(#{$css-var-prefix}border-width);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
@ -11,7 +11,9 @@
|
||||||
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||||
#{$css-var-prefix}icon-position: 0.75rem;
|
#{$css-var-prefix}icon-position: 0.75rem;
|
||||||
#{$css-var-prefix}icon-width: 1rem;
|
#{$css-var-prefix}icon-width: 1rem;
|
||||||
padding-inline-end: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position));
|
padding-inline-end: calc(
|
||||||
|
var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position)
|
||||||
|
);
|
||||||
background-image: var(#{$css-var-prefix}icon-date);
|
background-image: var(#{$css-var-prefix}icon-date);
|
||||||
background-position: center right var(#{$css-var-prefix}icon-position);
|
background-position: center right var(#{$css-var-prefix}icon-position);
|
||||||
background-size: var(#{$css-var-prefix}icon-width) auto;
|
background-size: var(#{$css-var-prefix}icon-width) auto;
|
||||||
|
@ -32,8 +34,8 @@
|
||||||
#{$parent-selector} [type="week"] {
|
#{$parent-selector} [type="week"] {
|
||||||
&::-webkit-calendar-picker-indicator {
|
&::-webkit-calendar-picker-indicator {
|
||||||
width: var(#{$css-var-prefix}icon-width);
|
width: var(#{$css-var-prefix}icon-width);
|
||||||
margin-inline-end: calc(var(#{$css-var-prefix}icon-width) * -1);
|
|
||||||
margin-inline-start: var(#{$css-var-prefix}icon-position);
|
margin-inline-start: var(#{$css-var-prefix}icon-position);
|
||||||
|
margin-inline-end: calc(var(#{$css-var-prefix}icon-width) * -1);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,10 +9,10 @@
|
||||||
.container,
|
.container,
|
||||||
.container-fluid {
|
.container-fluid {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-inline-end: auto;
|
|
||||||
margin-inline-start: auto;
|
margin-inline-start: auto;
|
||||||
padding-inline-end: var(#{$css-var-prefix}spacing);
|
margin-inline-end: auto;
|
||||||
padding-inline-start: var(#{$css-var-prefix}spacing);
|
padding-inline-start: var(#{$css-var-prefix}spacing);
|
||||||
|
padding-inline-end: var(#{$css-var-prefix}spacing);
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
@ -23,8 +23,8 @@
|
||||||
max-width: map.get($values, "viewport");
|
max-width: map.get($values, "viewport");
|
||||||
@if $first-breakpoint {
|
@if $first-breakpoint {
|
||||||
$first-breakpoint: false;
|
$first-breakpoint: false;
|
||||||
padding-inline-end: 0;
|
|
||||||
padding-inline-start: 0;
|
padding-inline-start: 0;
|
||||||
|
padding-inline-end: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -32,8 +32,8 @@
|
||||||
@if $enable-semantic-container {
|
@if $enable-semantic-container {
|
||||||
$first-breakpoint: true;
|
$first-breakpoint: true;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-inline-end: auto;
|
|
||||||
margin-inline-start: auto;
|
margin-inline-start: auto;
|
||||||
|
margin-inline-end: auto;
|
||||||
padding: var(#{$css-var-prefix}block-spacing-vertical)
|
padding: var(#{$css-var-prefix}block-spacing-vertical)
|
||||||
var(#{$css-var-prefix}block-spacing-horizontal);
|
var(#{$css-var-prefix}block-spacing-horizontal);
|
||||||
|
|
||||||
|
@ -44,8 +44,8 @@
|
||||||
max-width: map.get($values, "viewport");
|
max-width: map.get($values, "viewport");
|
||||||
@if $first-breakpoint {
|
@if $first-breakpoint {
|
||||||
$first-breakpoint: false;
|
$first-breakpoint: false;
|
||||||
padding-inline-end: 0;
|
|
||||||
padding-inline-start: 0;
|
padding-inline-start: 0;
|
||||||
|
padding-inline-end: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue