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

RTL support #34

Browse source
This commit is contained in:
Lucas Larroche 2021-10-24 02:06:00 +07:00
parent 6363f84087
commit 001d1a9657
17 changed files with 374 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

39
scss/content/_form-alt-input-types.scss
View file

@ -35,24 +35,26 @@
}
// Date & Time
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"] {
background-image: var(--icon-date);
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
&::-webkit-calendar-picker-indicator {
opacity: 0;
:not(:dir(rtl)) {
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"] {
background-image: var(--icon-date);
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
&::-webkit-calendar-picker-indicator {
opacity: 0;
}
}
// Time
[type="time"] {
background-image: var(--icon-time);
}
}
// Time
[type="time"] {
background-image: var(--icon-time);
}
// File
@ -75,6 +77,9 @@
--border-color: var(--secondary);
--color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
margin-left: 0;
margin-inline-end: calc(var(--spacing) / 2);
margin-inline-start: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);

5
scss/content/_form-checkbox-radio.scss
View file

@ -12,6 +12,9 @@
height: 1.25em;
margin-top: -.125em;
margin-right: .375em;
margin-left: 0;
margin-inline-end: .375em;
margin-inline-start: 0;
border-width: var(--border-width);
vertical-align: middle;
cursor: pointer;
@ -112,6 +115,8 @@
&::before {
margin-right: 0;
margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
margin-inline-end: 0;
margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
}
}
}

31
scss/content/_form.scss
View file

@ -224,10 +224,16 @@ textarea {
&[aria-invalid] {
@if $enable-important {
padding-right: 2rem !important;
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-left: var(--form-element-spacing-horizontal);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-start: var(--form-element-spacing-horizontal) !important;
}
@else {
padding-right: 2rem;
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-start: var(--form-element-spacing-horizontal);
}
background-position: center right .75rem;
background-repeat: no-repeat;
@ -265,6 +271,16 @@ textarea {
}
}
[dir="rtl"] {
input,
select,
textarea {
&[aria-invalid] {
background-position: center left .75rem;
}
}
}
// Placeholder
input::placeholder,
input::-webkit-input-placeholder,
@ -293,6 +309,9 @@ select {
&:not([multiple]):not([size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-start: var(--form-element-spacing-horizontal);
background-image: var(--icon-chevron);
background-position: center right .75rem;
background-repeat: no-repeat;
@ -300,6 +319,14 @@ select {
}
}
[dir="rtl"] {
select {
&:not([multiple]):not([size]) {
background-position: center left .75rem;
}
}
}
// Helper
input,
select,

1
scss/content/_table.scss
View file

@ -32,6 +32,7 @@ td {
font-size: var(--font-size);
font-weight: var(--font-weight);
text-align: left;
text-align: start;
}
// Rows

6
scss/content/_typography.scss
View file

@ -215,7 +215,10 @@ small {
// Lists
ul,
ol {
padding-right: 0;
padding-left: var(--spacing);
padding-inline-end: 0;
padding-inline-start: var(--spacing);
li {
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
@ -239,7 +242,10 @@ blockquote {
display: block;
margin: var(--typography-spacing-vertical) 0;
padding: var(--spacing);
border-right: none;
border-left: .25rem solid var(--blockquote-border-color);
border-inline-end: none;
border-inline-start: .25rem solid var(--blockquote-border-color);
footer {
margin-top: calc(var(--typography-spacing-vertical) * 0.5);