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

fix: scss uses logical properties

Browse source
This commit is contained in:
drmason13 2024-08-31 10:28:35 +01:00
parent 6dc6489e69
commit f91ef15cef
21 changed files with 112 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

26
scss/forms/_basics.scss
View file

@ -127,7 +127,7 @@
#{$parent-selector} fieldset {
width: 100%;
margin: 0;
margin-bottom: var(#{$css-var-prefix}spacing);
margin-block-end: var(#{$css-var-prefix}spacing);
padding: 0;
border: 0;
}
@ -136,13 +136,13 @@
#{$parent-selector} label,
#{$parent-selector} fieldset legend {
display: block;
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.375);
margin-block-end: calc(var(#{$css-var-prefix}spacing) * 0.375);
color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight));
}
#{$parent-selector} fieldset legend {
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
margin-block-end: calc(var(#{$css-var-prefix}spacing) * 0.5);
}
// Blocks, 100%
@ -264,17 +264,17 @@
) {
&[aria-invalid] {
@if $enable-important {
padding-right: calc(
padding-inline-end: calc(
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
) !important;
padding-left: 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-end: calc(
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
) !important;
} @else {
padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
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);
}
@ -381,7 +381,7 @@
#{$parent-selector} input:not([type="checkbox"], [type="radio"]),
#{$parent-selector} select,
#{$parent-selector} textarea {
margin-bottom: var(#{$css-var-prefix}spacing);
margin-block-end: var(#{$css-var-prefix}spacing);
}
// Select
@ -393,8 +393,8 @@
}
&:not([multiple], [size]) {
padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
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);
background-image: var(#{$css-var-prefix}icon-chevron);
@ -446,8 +446,8 @@
+ small {
display: block;
width: 100%;
margin-top: calc(var(#{$css-var-prefix}spacing) * -0.75);
margin-bottom: var(#{$css-var-prefix}spacing);
margin-block-start: calc(var(#{$css-var-prefix}spacing) * -0.75);
margin-block-end: var(#{$css-var-prefix}spacing);
color: var(#{$css-var-prefix}muted-color);
}
&[aria-invalid="false"] {
@ -465,7 +465,7 @@
// Styles for Input inside a label
#{$parent-selector} label {
> :where(input, select, textarea) {
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
margin-block-start: calc(var(#{$css-var-prefix}spacing) * 0.25);
}
}
}

4
scss/forms/_checkbox-radio-switch.scss
View file

@ -22,7 +22,7 @@
appearance: none;
width: 1.25em;
height: 1.25em;
margin-top: -0.125em;
margin-block-start: -0.125em;
margin-inline-end: 0.5em;
border-width: var(#{$css-var-prefix}border-width);
vertical-align: middle;
@ -45,7 +45,7 @@
& ~ label {
display: inline-block;
margin-bottom: 0;
margin-block-end: 0;
cursor: pointer;
&:not(:last-of-type) {

8
scss/forms/_input-date.scss
View file

@ -11,7 +11,7 @@
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
#{$css-var-prefix}icon-position: 0.75rem;
#{$css-var-prefix}icon-width: 1rem;
padding-right: 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-position: center right var(#{$css-var-prefix}icon-position);
background-size: var(#{$css-var-prefix}icon-width) auto;
@ -32,8 +32,8 @@
#{$parent-selector} [type="week"] {
&::-webkit-calendar-picker-indicator {
width: var(#{$css-var-prefix}icon-width);
margin-right: calc(var(#{$css-var-prefix}icon-width) * -1);
margin-left: var(#{$css-var-prefix}icon-position);
margin-inline-end: calc(var(#{$css-var-prefix}icon-width) * -1);
margin-inline-start: var(#{$css-var-prefix}icon-position);
opacity: 0;
}
}
@ -46,7 +46,7 @@
#{$parent-selector} [type="month"],
#{$parent-selector} [type="time"],
#{$parent-selector} [type="week"] {
padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
padding-inline-end: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
background-image: none !important;
}
}

6
scss/forms/_input-file.scss
View file

@ -10,15 +10,15 @@
// with the forced overflow hidden on the input[type="file"] element.
#{$parent-selector} [type="file"] {
#{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
margin-left: calc(var(#{$css-var-prefix}outline-width) * -1); // 1
margin-inline-start: calc(var(#{$css-var-prefix}outline-width) * -1); // 1
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) 0;
padding-left: var(#{$css-var-prefix}outline-width); // 1
padding-inline-start: var(#{$css-var-prefix}outline-width); // 1
border: 0;
border-radius: 0;
background: none;
&::file-selector-button {
margin-right: calc(var(#{$css-var-prefix}spacing) / 2);
margin-inline-end: calc(var(#{$css-var-prefix}spacing) / 2);
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal);
}

2
scss/forms/_input-range.scss
View file

@ -25,7 +25,7 @@ $border-thumb: 2px;
-webkit-appearance: none;
width: $height-thumb;
height: $height-thumb;
margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
margin-block-start: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
border: $border-thumb solid var(#{$css-var-prefix}range-thumb-border-color);
border-radius: 50%;
background-color: var(#{$css-var-prefix}range-thumb-color);