mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 16:46:14 -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

4
scss/components/_accordion.scss
View file

@ -8,7 +8,7 @@
#{$parent-selector} details { #{$parent-selector} details {
display: block; display: block;
margin-bottom: var(#{$css-var-prefix}spacing); margin-block-end: var(#{$css-var-prefix}spacing);
summary { summary {
line-height: 1rem; line-height: 1rem;
@ -86,7 +86,7 @@
// Open // Open
&[open] { &[open] {
> summary { > summary {
margin-bottom: var(#{$css-var-prefix}spacing); margin-block-end: var(#{$css-var-prefix}spacing);
&:not([role]) { &:not([role]) {
&:not(:focus) { &:not(:focus) {

26
scss/components/_card.scss
View file

@ -7,7 +7,7 @@
*/ */
#{$parent-selector} article { #{$parent-selector} article {
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical); margin-block-end: var(#{$css-var-prefix}block-spacing-vertical);
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);
border-radius: var(#{$css-var-prefix}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
@ -16,31 +16,31 @@
> header, > header,
> footer { > footer {
margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1); margin-inline-end: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1); margin-inline-start: 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);
} }
> header { > header {
margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1); margin-block-start: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical); margin-block-end: var(#{$css-var-prefix}block-spacing-vertical);
border-bottom: 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-top-right-radius: var(#{$css-var-prefix}border-radius); border-end-start-radius: var(#{$css-var-prefix}border-radius);
border-top-left-radius: var(#{$css-var-prefix}border-radius); border-start-start-radius: var(#{$css-var-prefix}border-radius);
} }
> footer { > footer {
margin-top: var(#{$css-var-prefix}block-spacing-vertical); margin-block-start: var(#{$css-var-prefix}block-spacing-vertical);
margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1); margin-block-end: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
border-top: 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-bottom-right-radius: var(#{$css-var-prefix}border-radius); border-end-end-radius: var(#{$css-var-prefix}border-radius);
border-bottom-left-radius: var(#{$css-var-prefix}border-radius); border-start-end-radius: var(#{$css-var-prefix}border-radius);
} }
} }
} }

16
scss/components/_dropdown.scss
View file

@ -10,7 +10,7 @@
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} details.dropdown { #{$parent-selector} details.dropdown {
position: relative; position: relative;
border-bottom: none; border-block-end: none;
// Marker // Marker
// –––––––––––––––––––– // ––––––––––––––––––––
@ -40,7 +40,7 @@
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} nav details.dropdown { #{$parent-selector} nav details.dropdown {
// Override height // Override height
margin-bottom: 0; margin-block-end: 0;
} }
// Bouton as a select // Bouton as a select
@ -165,7 +165,7 @@
width: 100%; width: 100%;
min-width: fit-content; min-width: fit-content;
margin: 0; margin: 0;
margin-top: var(#{$css-var-prefix}outline-width); margin-block-start: var(#{$css-var-prefix}outline-width);
padding: 0; padding: 0;
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}dropdown-border-color); border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}dropdown-border-color);
border-radius: var(#{$css-var-prefix}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
@ -188,17 +188,17 @@
li { li {
width: 100%; width: 100%;
margin-bottom: 0; margin-block-end: 0;
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal); var(#{$css-var-prefix}form-element-spacing-horizontal);
list-style: none; list-style: none;
&:first-of-type { &:first-of-type {
margin-top: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5); margin-block-start: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
} }
&:last-of-type { &:last-of-type {
margin-bottom: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5); margin-block-end: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
} }
a { a {
@ -237,7 +237,7 @@
// inside container type accordion // inside container type accordion
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} details.dropdown[open] summary { #{$parent-selector} details.dropdown[open] summary {
margin-bottom: 0; margin-block-end: 0;
} }
// Menu opened // Menu opened
@ -275,6 +275,6 @@
// Label // Label
// –––––––––––––––––––– // ––––––––––––––––––––
#{$parent-selector} label > details.dropdown { #{$parent-selector} label > details.dropdown {
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25); margin-block-start: calc(var(#{$css-var-prefix}spacing) * 0.25);
} }
} }

24
scss/components/_group.scss
View file

@ -11,7 +11,7 @@
display: inline-flex; display: inline-flex;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: var(#{$css-var-prefix}spacing); margin-block-end: var(#{$css-var-prefix}spacing);
border-radius: var(#{$css-var-prefix}border-radius); border-radius: var(#{$css-var-prefix}border-radius);
box-shadow: var(#{$css-var-prefix}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); box-shadow: var(#{$css-var-prefix}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle; vertical-align: middle;
@ -22,17 +22,17 @@
select { select {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-block-end: 0;
&:not(:first-child) { &:not(:first-child) {
margin-left: 0; margin-inline-start: 0;
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-start-end-radius: 0;
} }
&:not(:last-child) { &:not(:last-child) {
border-top-right-radius: 0; border-end-start-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
&:focus { &:focus {
@ -48,7 +48,7 @@
input:not([type="checkbox"], [type="radio"]), input:not([type="checkbox"], [type="radio"]),
select { select {
&:not(:first-child) { &:not(:first-child) {
margin-left: calc(var(#{$css-var-prefix}border-width) * -1); margin-inline-start: calc(var(#{$css-var-prefix}border-width) * -1);
} }
} }
@ -107,13 +107,13 @@
#{$parent-selector} [role="search"] { #{$parent-selector} [role="search"] {
> * { > * {
&:first-child { &:first-child {
border-top-left-radius: 5rem; border-start-start-radius: 5rem;
border-bottom-left-radius: 5rem; border-start-end-radius: 5rem;
} }
&:last-child { &:last-child {
border-top-right-radius: 5rem; border-end-start-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
} }
} }

16
scss/components/_modal.scss
View file

@ -56,12 +56,12 @@
> header { > header {
> * { > * {
margin-bottom: 0; margin-block-end: 0;
} }
#{$close-selector} { #{$close-selector} {
margin: 0; margin: 0;
margin-left: var(#{$css-var-prefix}spacing); margin-inline-start: var(#{$css-var-prefix}spacing);
padding: 0; padding: 0;
float: right; float: right;
} }
@ -72,10 +72,10 @@
button, button,
[role="button"] { [role="button"] {
margin-bottom: 0; margin-block-end: 0;
&:not(:first-of-type) { &:not(:first-of-type) {
margin-left: calc(var(#{$css-var-prefix}spacing) * 0.5); margin-inline-start: calc(var(#{$css-var-prefix}spacing) * 0.5);
} }
} }
} }
@ -85,9 +85,9 @@
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: calc(var(#{$css-var-prefix}spacing) * -1); margin-block-start: calc(var(#{$css-var-prefix}spacing) * -1);
margin-bottom: var(#{$css-var-prefix}spacing); margin-block-end: var(#{$css-var-prefix}spacing);
margin-left: auto; 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;
@ -116,7 +116,7 @@
// Utilities // Utilities
@if $enable-classes { @if $enable-classes {
.modal-is-open { .modal-is-open {
padding-right: var(#{$css-var-prefix}scrollbar-width, 0px); padding-inline-end: var(#{$css-var-prefix}scrollbar-width, 0px);
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;

12
scss/components/_nav.scss
View file

@ -30,15 +30,15 @@
ol, ol,
ul { ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-block-end: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
&:first-of-type { &:first-of-type {
margin-left: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1); margin-inline-start: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
} }
&:last-of-type { &:last-of-type {
margin-right: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1); margin-inline-end: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
} }
} }
@ -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-right: inherit; margin-inline-end: inherit;
margin-bottom: 0; margin-block-end: 0;
margin-left: inherit; 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)

2
scss/components/_progress.scss
View file

@ -31,7 +31,7 @@
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 0.5rem; height: 0.5rem;
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5); margin-block-end: calc(var(#{$css-var-prefix}spacing) * 0.5);
overflow: hidden; overflow: hidden;
// Remove Firefox and Opera border // Remove Firefox and Opera border

14
scss/components/_tooltip.scss
View file

@ -10,7 +10,7 @@
position: relative; position: relative;
&:not(a, button, input) { &:not(a, button, input) {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -46,9 +46,9 @@
&::after { &::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid; border-block-start: 0.3rem solid;
border-right: 0.3rem solid transparent; border-inline-end: 0.3rem solid transparent;
border-left: 0.3rem solid transparent; border-inline-start: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
content: ""; content: "";
@ -66,7 +66,7 @@
&:after { &:after {
transform: translate(-50%, -0.3rem); transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-bottom: 0.3rem solid; border-block-end: 0.3rem solid;
} }
} }
@ -83,7 +83,7 @@
&:after { &:after {
transform: translate(0.3rem, -50%); transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-left: 0.3rem solid; border-inline-start: 0.3rem solid;
} }
} }
@ -100,7 +100,7 @@
&:after { &:after {
transform: translate(-0.3rem, -50%); transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent; border: 0.3rem solid transparent;
border-right: 0.3rem solid; border-inline-end: 0.3rem solid;
} }
} }

2
scss/content/_button.scss
View file

@ -88,7 +88,7 @@
#{$parent-selector} [type="submit"], #{$parent-selector} [type="submit"],
#{$parent-selector} [type="reset"], #{$parent-selector} [type="reset"],
#{$parent-selector} [type="button"] { #{$parent-selector} [type="button"] {
margin-bottom: var(#{$css-var-prefix}spacing); margin-block-end: var(#{$css-var-prefix}spacing);
} }
// .secondary, .contrast & .outline // .secondary, .contrast & .outline

2
scss/content/_code.scss
View file

@ -53,7 +53,7 @@
#{$parent-selector} pre { #{$parent-selector} pre {
display: block; display: block;
margin-bottom: var(#{$css-var-prefix}spacing); margin-block-end: var(#{$css-var-prefix}spacing);
overflow-x: auto; overflow-x: auto;
> code { > code {

2
scss/content/_miscs.scss
View file

@ -17,7 +17,7 @@
height: 0; // 2 height: 0; // 2
margin: var(#{$css-var-prefix}typography-spacing-vertical) 0; margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
border: 0; border: 0;
border-top: 1px solid var(#{$css-var-prefix}muted-border-color); border-block-start: 1px solid var(#{$css-var-prefix}muted-border-color);
color: inherit; // 1 color: inherit; // 1
} }

6
scss/content/_table.scss
View file

@ -27,7 +27,7 @@
#{$parent-selector} th, #{$parent-selector} th,
#{$parent-selector} td { #{$parent-selector} td {
padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing); padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing);
border-bottom: var(#{$css-var-prefix}border-width) border-block-end: var(#{$css-var-prefix}border-width)
solid solid
var(#{$css-var-prefix}table-border-color); var(#{$css-var-prefix}table-border-color);
background-color: var(#{$css-var-prefix}background-color); background-color: var(#{$css-var-prefix}background-color);
@ -41,10 +41,10 @@
#{$parent-selector} tfoot { #{$parent-selector} tfoot {
th, th,
td { td {
border-top: var(#{$css-var-prefix}border-width) border-block-start: var(#{$css-var-prefix}border-width)
solid solid
var(#{$css-var-prefix}table-border-color); var(#{$css-var-prefix}table-border-color);
border-bottom: 0; border-block-end: 0;
} }
} }

30
scss/content/_typography.scss
View file

@ -43,8 +43,8 @@
#{$parent-selector} pre, #{$parent-selector} pre,
#{$parent-selector} table, #{$parent-selector} table,
#{$parent-selector} ul { #{$parent-selector} ul {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical); margin-block-end: var(#{$css-var-prefix}typography-spacing-vertical);
color: var(#{$css-var-prefix}color); color: var(#{$css-var-prefix}color);
font-style: normal; font-style: normal;
font-weight: var(#{$css-var-prefix}font-weight); font-weight: var(#{$css-var-prefix}font-weight);
@ -57,8 +57,8 @@
#{$parent-selector} h4, #{$parent-selector} h4,
#{$parent-selector} h5, #{$parent-selector} h5,
#{$parent-selector} h6 { #{$parent-selector} h6 {
margin-top: 0; margin-block-start: 0;
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical); margin-block-end: var(#{$css-var-prefix}typography-spacing-vertical);
color: var(#{$css-var-prefix}color); color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight); font-weight: var(#{$css-var-prefix}font-weight);
font-size: var(#{$css-var-prefix}font-size); font-size: var(#{$css-var-prefix}font-size);
@ -89,22 +89,22 @@
#{$parent-selector} #{$parent-selector}
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) { :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
~ :is(h1, h2, h3, h4, h5, h6) { ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(#{$css-var-prefix}typography-spacing-top); margin-block-start: var(#{$css-var-prefix}typography-spacing-top);
} }
} }
// Paragraphs // Paragraphs
#{$parent-selector} p { #{$parent-selector} p {
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical); margin-block-end: var(#{$css-var-prefix}typography-spacing-vertical);
} }
// Heading group // Heading group
#{$parent-selector} hgroup { #{$parent-selector} hgroup {
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical); margin-block-end: var(#{$css-var-prefix}typography-spacing-vertical);
> * { > * {
margin-top: 0; margin-block-start: 0;
margin-bottom: 0; margin-block-end: 0;
} }
> *:not(:first-child):last-child { > *:not(:first-child):last-child {
@ -117,7 +117,7 @@
// Lists // Lists
#{$parent-selector} :where(ol, ul) { #{$parent-selector} :where(ol, ul) {
li { li {
margin-bottom: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25); margin-block-end: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
} }
} }
@ -125,7 +125,7 @@
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari // 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
#{$parent-selector} :where(dl, ol, ul) :where(dl, ol, ul) { #{$parent-selector} :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; // 1 margin: 0; // 1
margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25); margin-block-start: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
} }
#{$parent-selector} ul li { #{$parent-selector} ul li {
@ -145,13 +145,13 @@
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-right: none; border-inline-end: none;
border-left: 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-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 {
margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5); margin-block-start: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5);
color: var(#{$css-var-prefix}blockquote-footer-color); color: var(#{$css-var-prefix}blockquote-footer-color);
} }
} }
@ -159,7 +159,7 @@
// Abbreviations // Abbreviations
// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari // 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
#{$parent-selector} abbr[title] { #{$parent-selector} abbr[title] {
border-bottom: 1px dotted; border-block-end: 1px dotted;
text-decoration: none; // 1 text-decoration: none; // 1
cursor: help; cursor: help;
} }

26
scss/forms/_basics.scss
View file

@ -127,7 +127,7 @@
#{$parent-selector} fieldset { #{$parent-selector} fieldset {
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-bottom: var(#{$css-var-prefix}spacing); margin-block-end: var(#{$css-var-prefix}spacing);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -136,13 +136,13 @@
#{$parent-selector} label, #{$parent-selector} label,
#{$parent-selector} fieldset legend { #{$parent-selector} fieldset legend {
display: block; 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); color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight)); font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight));
} }
#{$parent-selector} fieldset legend { #{$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% // Blocks, 100%
@ -264,17 +264,17 @@
) { ) {
&[aria-invalid] { &[aria-invalid] {
@if $enable-important { @if $enable-important {
padding-right: 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-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-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;
} @else { } @else {
padding-right: 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-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); 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);
} }
@ -381,7 +381,7 @@
#{$parent-selector} input:not([type="checkbox"], [type="radio"]), #{$parent-selector} input:not([type="checkbox"], [type="radio"]),
#{$parent-selector} select, #{$parent-selector} select,
#{$parent-selector} textarea { #{$parent-selector} textarea {
margin-bottom: var(#{$css-var-prefix}spacing); margin-block-end: var(#{$css-var-prefix}spacing);
} }
// Select // Select
@ -393,8 +393,8 @@
} }
&:not([multiple], [size]) { &:not([multiple], [size]) {
padding-right: 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-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); 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);
@ -446,8 +446,8 @@
+ small { + small {
display: block; display: block;
width: 100%; width: 100%;
margin-top: calc(var(#{$css-var-prefix}spacing) * -0.75); margin-block-start: calc(var(#{$css-var-prefix}spacing) * -0.75);
margin-bottom: var(#{$css-var-prefix}spacing); margin-block-end: var(#{$css-var-prefix}spacing);
color: var(#{$css-var-prefix}muted-color); color: var(#{$css-var-prefix}muted-color);
} }
&[aria-invalid="false"] { &[aria-invalid="false"] {
@ -465,7 +465,7 @@
// Styles for Input inside a label // Styles for Input inside a label
#{$parent-selector} label { #{$parent-selector} label {
> :where(input, select, textarea) { > :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; appearance: none;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em; margin-block-start: -0.125em;
margin-inline-end: 0.5em; margin-inline-end: 0.5em;
border-width: var(#{$css-var-prefix}border-width); border-width: var(#{$css-var-prefix}border-width);
vertical-align: middle; vertical-align: middle;
@ -45,7 +45,7 @@
& ~ label { & ~ label {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-block-end: 0;
cursor: pointer; cursor: pointer;
&:not(:last-of-type) { &: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"]) { &: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-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-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 +32,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-right: calc(var(#{$css-var-prefix}icon-width) * -1); margin-inline-end: calc(var(#{$css-var-prefix}icon-width) * -1);
margin-left: var(#{$css-var-prefix}icon-position); margin-inline-start: var(#{$css-var-prefix}icon-position);
opacity: 0; opacity: 0;
} }
} }
@ -46,7 +46,7 @@
#{$parent-selector} [type="month"], #{$parent-selector} [type="month"],
#{$parent-selector} [type="time"], #{$parent-selector} [type="time"],
#{$parent-selector} [type="week"] { #{$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; 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. // with the forced overflow hidden on the input[type="file"] element.
#{$parent-selector} [type="file"] { #{$parent-selector} [type="file"] {
#{$css-var-prefix}color: var(#{$css-var-prefix}muted-color); #{$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: 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: 0;
border-radius: 0; border-radius: 0;
background: none; background: none;
&::file-selector-button { &::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) padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal); 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; -webkit-appearance: none;
width: $height-thumb; width: $height-thumb;
height: $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: $border-thumb solid var(#{$css-var-prefix}range-thumb-border-color);
border-radius: 50%; border-radius: 50%;
background-color: var(#{$css-var-prefix}range-thumb-color); background-color: var(#{$css-var-prefix}range-thumb-color);

12
scss/layout/_container.scss
View file

@ -9,10 +9,10 @@
.container, .container,
.container-fluid { .container-fluid {
width: 100%; width: 100%;
margin-right: auto; margin-inline-end: auto;
margin-left: auto; margin-inline-start: auto;
padding-right: var(#{$css-var-prefix}spacing); padding-inline-end: var(#{$css-var-prefix}spacing);
padding-left: var(#{$css-var-prefix}spacing); padding-inline-start: 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-right: 0; padding-inline-end: 0;
padding-left: 0; padding-inline-start: 0;
} }
} }
} }

8
scss/layout/_landmarks.scss
View file

@ -32,8 +32,8 @@
@if $enable-semantic-container { @if $enable-semantic-container {
$first-breakpoint: true; $first-breakpoint: true;
width: 100%; width: 100%;
margin-right: auto; margin-inline-end: auto;
margin-left: auto; margin-inline-start: 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-right: 0; padding-inline-end: 0;
padding-left: 0; padding-inline-start: 0;
} }
} }
} }

2
scss/layout/_section.scss
View file

@ -7,6 +7,6 @@
*/ */
#{$parent-selector} section { #{$parent-selector} section {
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical); margin-block-end: var(#{$css-var-prefix}block-spacing-vertical);
} }
} }