mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-21 09:06:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: replace right/left with inline-* value for better rtl support

Browse source
This commit is contained in:
TAKAHASHI Shuuji 2024-06-09 16:26:12 +09:00
parent 6dc6489e69
commit 2ee481103c
No known key found for this signature in database
GPG key ID: F15C887632129F5E
14 changed files with 44 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

7
scss/components/_accordion.scss
View file

@ -42,7 +42,7 @@
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-inline-start: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5); margin-inline-start: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
float: right; float: inline-end;
transform: rotate(-90deg); transform: rotate(-90deg);
background-image: var(#{$css-var-prefix}icon-chevron); background-image: var(#{$css-var-prefix}icon-chevron);
background-position: right center; background-position: right center;
@ -74,7 +74,7 @@
// Type button // Type button
&[role="button"] { &[role="button"] {
width: 100%; width: 100%;
text-align: left; text-align: start;
// Marker // Marker
&::after { &::after {
@ -104,10 +104,9 @@
[dir="rtl"] { [dir="rtl"] {
#{$parent-selector} details { #{$parent-selector} details {
summary { summary {
text-align: right; text-align: start;
&::after { &::after {
float: left;
background-position: left center; background-position: left center;
} }
} }

8
scss/components/_card.scss
View file

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

2
scss/components/_dropdown.scss
View file

@ -22,7 +22,7 @@
width: 1rem; width: 1rem;
height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5)); height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
margin-inline-start: 0.25rem; margin-inline-start: 0.25rem;
float: right; float: inline-start;
// TODO: find out why we need this magic number (0.2 rem) // TODO: find out why we need this magic number (0.2 rem)
// for the marker to be aligned with the regular select // for the marker to be aligned with the regular select
transform: rotate(0deg) translateX(0.2rem); transform: rotate(0deg) translateX(0.2rem);

20
scss/components/_group.scss
View file

@ -25,14 +25,14 @@
margin-bottom: 0; margin-bottom: 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-end-start-radius: 0;
} }
&:not(:last-child) { &:not(:last-child) {
border-top-right-radius: 0; border-start-end-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-end-start-radius: 5rem;
} }
&:last-child { &:last-child {
border-top-right-radius: 5rem; border-start-end-radius: 5rem;
border-bottom-right-radius: 5rem; border-end-end-radius: 5rem;
} }
} }
} }

10
scss/components/_modal.scss
View file

@ -61,21 +61,21 @@
#{$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: inline-end;
} }
} }
> footer { > footer {
text-align: right; text-align: end;
button, button,
[role="button"] { [role="button"] {
margin-bottom: 0; margin-bottom: 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);
} }
} }
} }
@ -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;

9
scss/components/_nav.scss
View file

@ -11,7 +11,7 @@
// Prevent VoiceOver from ignoring list semantics in Safari (opinionated) // Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
:where(nav li)::before { :where(nav li)::before {
float: left; float: inline-start;
content: "\200B"; content: "\200B";
} }
@ -35,10 +35,10 @@
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,8 @@
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-bottom: 0; margin-bottom: 0;
margin-left: inherit; margin-inline: 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)

5
scss/components/_tooltip.scss
View file

@ -47,9 +47,8 @@
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: 0.3rem solid; border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0; border-radius: 0;
border-inline: 0.3rem solid transparent;
background-color: transparent; background-color: transparent;
content: ""; content: "";
color: var(#{$css-var-prefix}tooltip-background-color); color: var(#{$css-var-prefix}tooltip-background-color);
@ -100,7 +99,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;
} }
} }

1
scss/content/_table.scss
View file

@ -33,7 +33,6 @@
background-color: var(#{$css-var-prefix}background-color); background-color: var(#{$css-var-prefix}background-color);
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);
text-align: left;
text-align: start; text-align: start;
} }

2
scss/content/_typography.scss
View file

@ -145,8 +145,6 @@
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-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-end: none; border-inline-end: none;

8
scss/forms/_basics.scss
View file

@ -264,17 +264,11 @@
) { ) {
&[aria-invalid] { &[aria-invalid] {
@if $enable-important { @if $enable-important {
padding-right: 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) !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-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-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);
} }
@ -393,8 +387,6 @@
} }
&:not([multiple], [size]) { &: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-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);

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

@ -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-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 +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-right: calc(var(#{$css-var-prefix}icon-width) * -1); margin-inline-start: var(#{$css-var-prefix}icon-position);
margin-left: var(#{$css-var-prefix}icon-position); margin-inline-end: calc(var(#{$css-var-prefix}icon-width) * -1);
opacity: 0; opacity: 0;
} }
} }
@ -46,7 +48,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;
} }
} }
@ -55,6 +57,6 @@
[dir="rtl"] [dir="rtl"]
#{$parent-selector} #{$parent-selector}
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) { :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
text-align: right; text-align: start;
} }
} }

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);
} }

9
scss/layout/_container.scss
View file

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

6
scss/layout/_landmarks.scss
View file

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