js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: changed style to minimum support of RTL language (#768)

Browse Source
This commit is contained in:
Godgiven
2022-06-01 18:30:46 +04:30
committed by GitHub
parent 9539123fc3
commit 96c63c60a2
15 changed files with 62 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/alert/alert.styles.ts
View File

@@ -38,7 +38,7 @@ export default css`
display: flex;
align-items: center;
font-size: var(--sl-font-size-large);
padding-left: var(--sl-spacing-large);
padding-inline-start: var(--sl-spacing-large);
}
.alert--primary {
@@ -92,6 +92,6 @@ export default css`
display: flex;
align-items: center;
font-size: var(--sl-font-size-large);
padding-right: var(--sl-spacing-medium);
padding-inline-end: var(--sl-spacing-medium);
}
`;

4
src/components/breadcrumb-item/breadcrumb-item.styles.ts
View File

@@ -68,12 +68,12 @@ export default css`
.breadcrumb-item--has-prefix .breadcrumb-item__prefix {
display: inline-flex;
margin-right: var(--sl-spacing-x-small);
margin-inline-end: var(--sl-spacing-x-small);
}
.breadcrumb-item--has-suffix .breadcrumb-item__suffix {
display: inline-flex;
margin-left: var(--sl-spacing-x-small);
margin-inline-start: var(--sl-spacing-x-small);
}
:host(:last-of-type) .breadcrumb-item__separator {

38
src/components/button/button.styles.ts
View File

@@ -473,57 +473,57 @@ export default css`
}
.button--has-prefix.button--small {
padding-left: var(--sl-spacing-x-small);
padding-inline-start: var(--sl-spacing-x-small);
}
.button--has-prefix.button--small .button__label {
padding-left: var(--sl-spacing-x-small);
padding-inline-start: var(--sl-spacing-x-small);
}
.button--has-prefix.button--medium {
padding-left: var(--sl-spacing-small);
padding-inline-start: var(--sl-spacing-small);
}
.button--has-prefix.button--medium .button__label {
padding-left: var(--sl-spacing-small);
padding-inline-start: var(--sl-spacing-small);
}
.button--has-prefix.button--large {
padding-left: var(--sl-spacing-small);
padding-inline-start: var(--sl-spacing-small);
}
.button--has-prefix.button--large .button__label {
padding-left: var(--sl-spacing-small);
padding-inline-start: var(--sl-spacing-small);
}
.button--has-suffix.button--small,
.button--caret.button--small {
padding-right: var(--sl-spacing-x-small);
padding-inline-end: var(--sl-spacing-x-small);
}
.button--has-suffix.button--small .button__label,
.button--caret.button--small .button__label {
padding-right: var(--sl-spacing-x-small);
padding-inline-end: var(--sl-spacing-x-small);
}
.button--has-suffix.button--medium,
.button--caret.button--medium {
padding-right: var(--sl-spacing-small);
padding-inline-end: var(--sl-spacing-small);
}
.button--has-suffix.button--medium .button__label,
.button--caret.button--medium .button__label {
padding-right: var(--sl-spacing-small);
padding-inline-end: var(--sl-spacing-small);
}
.button--has-suffix.button--large,
.button--caret.button--large {
padding-right: var(--sl-spacing-small);
padding-inline-end: var(--sl-spacing-small);
}
.button--has-suffix.button--large .button__label,
.button--caret.button--large .button__label {
padding-right: var(--sl-spacing-small);
padding-inline-end: var(--sl-spacing-small);
}
/*
@@ -534,8 +534,9 @@ export default css`
*/
:host(.sl-button-group__button--first:not(.sl-button-group__button--last)) .button {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-inline-end-width: 0;
/* border-top-right-radius: 0; */
/* border-bottom-right-radius: 0; */
}
:host(.sl-button-group__button--inner) .button {
@@ -543,13 +544,14 @@ export default css`
}
:host(.sl-button-group__button--last:not(.sl-button-group__button--first)) .button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-start-start-radius: 0;
/* border-top-left-radius: 0;
border-bottom-left-radius: 0; */
}
/* All except the first */
:host(.sl-button-group__button:not(.sl-button-group__button--first)) {
margin-left: calc(-1 * var(--sl-input-border-width));
margin-inline-start: calc(-1 * var(--sl-input-border-width));
}
/* Add a visual separator between solid buttons */
@@ -560,7 +562,7 @@ export default css`
top: 0;
left: 0;
bottom: 0;
border-left: solid 1px rgb(128 128 128 / 33%);
border-inline-start-style: solid 1px rgb(128 128 128 / 33%);
mix-blend-mode: multiply;
}

2
src/components/checkbox/checkbox.styles.ts
View File

@@ -100,7 +100,7 @@ export default css`
.checkbox__label {
line-height: var(--sl-toggle-size);
margin-left: 0.5em;
margin-inline-start: 0.5em;
user-select: none;
}
`;

2
src/components/dialog/dialog.styles.ts
View File

@@ -90,7 +90,7 @@ export default css`
}
.dialog__footer ::slotted(sl-button:not(:first-of-type)) {
margin-left: var(--sl-spacing-x-small);
margin-inline-start: var(--sl-spacing-x-small);
}
.dialog:not(.dialog--has-footer) .dialog__footer {

2
src/components/drawer/drawer.styles.ts
View File

@@ -120,7 +120,7 @@ export default css`
}
.drawer__footer ::slotted(sl-button:not(:last-of-type)) {
margin-right: var(--sl-spacing-x-small);
margin-inline-end: var(--sl-spacing-x-small);
}
.drawer:not(.drawer--has-footer) .drawer__footer {

12
src/components/input/input.styles.ts
View File

@@ -173,11 +173,11 @@ export default css`
}
.input--small .input__prefix ::slotted(*) {
padding-left: var(--sl-input-spacing-small);
padding-inline-start: var(--sl-input-spacing-small);
}
.input--small .input__suffix ::slotted(*) {
padding-right: var(--sl-input-spacing-small);
padding-inline-end: var(--sl-input-spacing-small);
}
.input--medium {
@@ -197,11 +197,11 @@ export default css`
}
.input--medium .input__prefix ::slotted(*) {
padding-left: var(--sl-input-spacing-medium);
padding-inline-start: var(--sl-input-spacing-medium);
}
.input--medium .input__suffix ::slotted(*) {
padding-right: var(--sl-input-spacing-medium);
padding-inline-end: var(--sl-input-spacing-medium);
}
.input--large {
@@ -221,11 +221,11 @@ export default css`
}
.input--large .input__prefix ::slotted(*) {
padding-left: var(--sl-input-spacing-large);
padding-inline-start: var(--sl-input-spacing-large);
}
.input--large .input__suffix ::slotted(*) {
padding-right: var(--sl-input-spacing-large);
padding-inline-end: var(--sl-input-spacing-large);
}
/*

5
src/components/menu-item/menu-item.styles.ts
View File

@@ -18,7 +18,6 @@ export default css`
font-weight: var(--sl-font-weight-normal);
line-height: var(--sl-line-height-normal);
letter-spacing: var(--sl-letter-spacing-normal);
text-align: left;
color: var(--sl-color-neutral-700);
padding: var(--sl-spacing-2x-small) var(--sl-spacing-2x-small);
transition: var(--sl-transition-fast) fill;
@@ -44,7 +43,7 @@ export default css`
}
.menu-item .menu-item__prefix ::slotted(*) {
margin-right: var(--sl-spacing-x-small);
margin-inline-end: var(--sl-spacing-x-small);
}
.menu-item .menu-item__suffix {
@@ -54,7 +53,7 @@ export default css`
}
.menu-item .menu-item__suffix ::slotted(*) {
margin-left: var(--sl-spacing-x-small);
margin-inline-start: var(--sl-spacing-x-small);
}
:host(:focus) {

2
src/components/radio/radio.styles.ts
View File

@@ -99,7 +99,7 @@ export default css`
.radio__label {
line-height: var(--sl-toggle-size);
margin-left: 0.5em;
margin-inline-start: 0.5em;
user-select: none;
}
`;

2
src/components/range/range.styles.ts
View File

@@ -157,7 +157,7 @@ export default css`
width: 0;
height: 0;
left: 50%;
margin-left: calc(-1 * var(--sl-tooltip-arrow-size));
margin-inline-start: calc(-1 * var(--sl-tooltip-arrow-size));
}
.range--tooltip-visible .range__tooltip {

38
src/components/select/select.styles.ts
View File

@@ -166,7 +166,7 @@ export default css`
align-items: center;
flex-wrap: wrap;
justify-content: left;
margin-left: var(--sl-spacing-2x-small);
margin-inline-start: var(--sl-spacing-2x-small);
}
/* Hidden input (for form control validation to show) */
@@ -194,7 +194,7 @@ export default css`
}
.select--small .select__prefix ::slotted(*) {
margin-left: var(--sl-input-spacing-small);
margin-inline-start: var(--sl-input-spacing-small);
}
.select--small .select__label {
@@ -202,15 +202,15 @@ export default css`
}
.select--small .select__clear {
margin-right: var(--sl-input-spacing-small);
margin-inline-end: var(--sl-input-spacing-small);
}
.select--small .select__suffix ::slotted(*) {
margin-right: var(--sl-input-spacing-small);
margin-inline-end: var(--sl-input-spacing-small);
}
.select--small .select__icon {
margin-right: var(--sl-input-spacing-small);
margin-inline-end: var(--sl-input-spacing-small);
}
.select--small .select__tags {
@@ -222,11 +222,11 @@ export default css`
}
.select--small .select__tags sl-tag:not(:last-of-type) {
margin-right: var(--sl-spacing-2x-small);
margin-inline-end: var(--sl-spacing-2x-small);
}
.select--small.select--has-tags .select__label {
margin-left: 0;
margin-inline-start: 0;
}
/* Medium */
@@ -237,7 +237,7 @@ export default css`
}
.select--medium .select__prefix ::slotted(*) {
margin-left: var(--sl-input-spacing-medium);
margin-inline-start: var(--sl-input-spacing-medium);
}
.select--medium .select__label {
@@ -245,15 +245,15 @@ export default css`
}
.select--medium .select__clear {
margin-right: var(--sl-input-spacing-medium);
margin-inline-end: var(--sl-input-spacing-medium);
}
.select--medium .select__suffix ::slotted(*) {
margin-right: var(--sl-input-spacing-medium);
margin-inline-end: var(--sl-input-spacing-medium);
}
.select--medium .select__icon {
margin-right: var(--sl-input-spacing-medium);
margin-inline-end: var(--sl-input-spacing-medium);
}
.select--medium .select__tags {
@@ -265,11 +265,11 @@ export default css`
}
.select--medium .select__tags sl-tag:not(:last-of-type) {
margin-right: var(--sl-spacing-2x-small);
margin-inline-end: var(--sl-spacing-2x-small);
}
.select--medium.select--has-tags .select__label {
margin-left: 0;
margin-inline-start: 0;
}
/* Large */
@@ -280,7 +280,7 @@ export default css`
}
.select--large .select__prefix ::slotted(*) {
margin-left: var(--sl-input-spacing-large);
margin-inline-start: var(--sl-input-spacing-large);
}
.select--large .select__label {
@@ -288,15 +288,15 @@ export default css`
}
.select--large .select__clear {
margin-right: var(--sl-input-spacing-large);
margin-inline-end: var(--sl-input-spacing-large);
}
.select--large .select__suffix ::slotted(*) {
margin-right: var(--sl-input-spacing-large);
margin-inline-end: var(--sl-input-spacing-large);
}
.select--large .select__icon {
margin-right: var(--sl-input-spacing-large);
margin-inline-end: var(--sl-input-spacing-large);
}
.select--large .select__tags {
@@ -307,11 +307,11 @@ export default css`
}
.select--large .select__tags sl-tag:not(:last-of-type) {
margin-right: var(--sl-spacing-2x-small);
margin-inline-end: var(--sl-spacing-2x-small);
}
.select--large.select--has-tags .select__label {
margin-left: 0;
margin-inline-start: 0;
}
/*

2
src/components/switch/switch.styles.ts
View File

@@ -131,7 +131,7 @@ export default css`
.switch__label {
line-height: var(--height);
margin-left: 0.5em;
margin-inline-start: 0.5em;
user-select: none;
}
`;

1
src/components/tab-group/tab-group.styles.ts
View File

@@ -24,7 +24,6 @@ export default css`
.tab-group .tab-group__indicator {
position: absolute;
left: 0;
transition: var(--sl-transition-fast) transform ease, var(--sl-transition-fast) width ease;
}

4
src/components/tab/tab.styles.ts
View File

@@ -43,7 +43,7 @@ export default css`
}
.tab.tab--closable {
padding-right: var(--sl-spacing-small);
padding-inline-end: var(--sl-spacing-small);
}
.tab.tab--disabled {
@@ -53,7 +53,7 @@ export default css`
.tab__close-button {
font-size: var(--sl-font-size-large);
margin-left: var(--sl-spacing-2x-small);
margin-inline-start: var(--sl-spacing-2x-small);
}
.tab__close-button::part(base) {

11
src/components/tag/tag.styles.ts
View File

@@ -70,7 +70,7 @@ export default css`
}
.tag--small .tag__remove {
margin-left: var(--sl-spacing-2x-small);
margin-inline-start: var(--sl-spacing-2x-small);
margin-right: calc(-1 * var(--sl-spacing-3x-small));
}
@@ -82,11 +82,6 @@ export default css`
padding: 0 var(--sl-spacing-small);
}
.tag__remove {
margin-left: var(--sl-spacing-2x-small);
margin-right: calc(-1 * var(--sl-spacing-2x-small));
}
.tag--large {
font-size: var(--sl-button-font-size-large);
height: calc(var(--sl-input-height-large) * 0.8);
@@ -97,8 +92,8 @@ export default css`
.tag__remove {
font-size: 1.4em;
margin-left: var(--sl-spacing-2x-small);
margin-right: calc(-1 * var(--sl-spacing-x-small));
margin-inline-start: var(--sl-spacing-2x-small);
margin-inline-end: calc(-1 * var(--sl-spacing-x-small));
}
/*