mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 10: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 {
display: block;
margin-bottom: var(#{$css-var-prefix}spacing);
margin-block-end: var(#{$css-var-prefix}spacing);
summary {
line-height: 1rem;
@ -86,7 +86,7 @@
// Open
&[open] {
> summary {
margin-bottom: var(#{$css-var-prefix}spacing);
margin-block-end: var(#{$css-var-prefix}spacing);
&:not([role]) {
&:not(:focus) {

26
scss/components/_card.scss
View file

@ -7,7 +7,7 @@
*/
#{$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)
var(#{$css-var-prefix}block-spacing-horizontal);
border-radius: var(#{$css-var-prefix}border-radius);
@ -16,31 +16,31 @@
> header,
> footer {
margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
margin-inline-end: 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)
var(#{$css-var-prefix}block-spacing-horizontal);
background-color: var(#{$css-var-prefix}card-sectioning-background-color);
}
> header {
margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
border-bottom: var(#{$css-var-prefix}border-width)
margin-block-start: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
margin-block-end: var(#{$css-var-prefix}block-spacing-vertical);
border-block-end: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}card-border-color);
border-top-right-radius: var(#{$css-var-prefix}border-radius);
border-top-left-radius: var(#{$css-var-prefix}border-radius);
border-end-start-radius: var(#{$css-var-prefix}border-radius);
border-start-start-radius: var(#{$css-var-prefix}border-radius);
}
> footer {
margin-top: var(#{$css-var-prefix}block-spacing-vertical);
margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
border-top: var(#{$css-var-prefix}border-width)
margin-block-start: var(#{$css-var-prefix}block-spacing-vertical);
margin-block-end: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
border-block-start: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}card-border-color);
border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
border-end-end-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 {
position: relative;
border-bottom: none;
border-block-end: none;
// Marker
// ––––––––––––––––––––
@ -40,7 +40,7 @@
// ––––––––––––––––––––
#{$parent-selector} nav details.dropdown {
// Override height
margin-bottom: 0;
margin-block-end: 0;
}
// Bouton as a select
@ -165,7 +165,7 @@
width: 100%;
min-width: fit-content;
margin: 0;
margin-top: var(#{$css-var-prefix}outline-width);
margin-block-start: var(#{$css-var-prefix}outline-width);
padding: 0;
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}dropdown-border-color);
border-radius: var(#{$css-var-prefix}border-radius);
@ -188,17 +188,17 @@
li {
width: 100%;
margin-bottom: 0;
margin-block-end: 0;
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal);
list-style: none;
&: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 {
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 {
@ -237,7 +237,7 @@
// inside container type accordion
// ––––––––––––––––––––
#{$parent-selector} details.dropdown[open] summary {
margin-bottom: 0;
margin-block-end: 0;
}
// Menu opened
@ -275,6 +275,6 @@
// Label
// ––––––––––––––––––––
#{$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;
position: relative;
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);
box-shadow: var(#{$css-var-prefix}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle;
@ -22,17 +22,17 @@
select {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
margin-block-end: 0;
&:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-inline-start: 0;
border-start-start-radius: 0;
border-start-end-radius: 0;
}
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-end-start-radius: 0;
border-end-end-radius: 0;
}
&:focus {
@ -48,7 +48,7 @@
input:not([type="checkbox"], [type="radio"]),
select {
&: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"] {
> * {
&:first-child {
border-top-left-radius: 5rem;
border-bottom-left-radius: 5rem;
border-start-start-radius: 5rem;
border-start-end-radius: 5rem;
}
&:last-child {
border-top-right-radius: 5rem;
border-bottom-right-radius: 5rem;
border-end-start-radius: 5rem;
border-end-end-radius: 5rem;
}
}
}

16
scss/components/_modal.scss
View file

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

12
scss/components/_nav.scss
View file

@ -30,15 +30,15 @@
ol,
ul {
align-items: center;
margin-bottom: 0;
margin-block-end: 0;
padding: 0;
list-style: none;
&: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 {
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"]),
select {
height: auto;
margin-right: inherit;
margin-bottom: 0;
margin-left: inherit;
margin-inline-end: inherit;
margin-block-end: 0;
margin-inline-start: inherit;
padding: calc(
var(#{$css-var-prefix}nav-link-spacing-vertical) -
(var(#{$css-var-prefix}border-width) * 2)

2
scss/components/_progress.scss
View file

@ -31,7 +31,7 @@
appearance: none;
width: 100%;
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;
// Remove Firefox and Opera border

14
scss/components/_tooltip.scss
View file

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