Skip to content

Logical properties #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 5 commits into from
Closed

Logical properties #27

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f91ef15
fix: scss uses logical properties
drmason13 Aug 31, 2024
fd93112
reorder scss files to match build output
drmason13 Aug 31, 2024
1b4853c
commit build output
drmason13 Aug 31, 2024
827e5fa
fix: text align logical properties
drmason13 Aug 31, 2024
c8eb505
build output
drmason13 Aug 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
fix: scss uses logical properties
  • Loading branch information
@drmason13
drmason13 committed Aug 31, 2024
commit f91ef15cefee5cec8d6a7157efd83b88a266a7ce
4 changes: 2 additions & 2 deletions scss/components/_accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down
26 changes: 13 additions & 13 deletions scss/components/_card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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 changes: 8 additions & 8 deletions scss/components/_dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
// ––––––––––––––––––––
#{$parent-selector} details.dropdown {
position: relative;
border-bottom: none;
border-block-end: none;

// Marker
// ––––––––––––––––––––
Expand Down Expand Up @@ -40,7 +40,7 @@
// ––––––––––––––––––––
#{$parent-selector} nav details.dropdown {
// Override height
margin-bottom: 0;
margin-block-end: 0;
}

// Bouton as a select
Expand Down Expand Up @@ -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);
Expand All @@ -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 {
Expand Down Expand Up @@ -237,7 +237,7 @@
// inside container type accordion
// ––––––––––––––––––––
#{$parent-selector} details.dropdown[open] summary {
margin-bottom: 0;
margin-block-end: 0;
}

// Menu opened
Expand Down Expand Up @@ -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 changes: 12 additions & 12 deletions scss/components/_group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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);
}
}

Expand Down Expand Up @@ -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;
}
}
}
Expand Down
16 changes: 8 additions & 8 deletions scss/components/_modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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);
}
}
}
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
12 changes: 6 additions & 6 deletions scss/components/_nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion scss/components/_progress.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
14 changes: 7 additions & 7 deletions scss/components/_tooltip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
position: relative;

&:not(a, button, input) {
border-bottom: 1px dotted;
border-block-end: 1px dotted;
text-decoration: none;
cursor: help;
}
Expand Down Expand Up @@ -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: "";
Expand All @@ -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;
}
}

Expand All @@ -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;
}
}

Expand All @@ -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;
}
}

Expand Down
2 changes: 1 addition & 1 deletion scss/content/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@
#{$parent-selector} [type="submit"],
#{$parent-selector} [type="reset"],
#{$parent-selector} [type="button"] {
margin-bottom: var(#{$css-var-prefix}spacing);
margin-block-end: var(#{$css-var-prefix}spacing);
}

// .secondary, .contrast & .outline
Expand Down
2 changes: 1 addition & 1 deletion scss/content/_code.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@

#{$parent-selector} pre {
display: block;
margin-bottom: var(#{$css-var-prefix}spacing);
margin-block-end: var(#{$css-var-prefix}spacing);
overflow-x: auto;

> code {
Expand Down
2 changes: 1 addition & 1 deletion scss/content/_miscs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
height: 0; // 2
margin: var(#{$css-var-prefix}typography-spacing-vertical) 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
}

Expand Down
6 changes: 3 additions & 3 deletions scss/content/_table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
#{$parent-selector} th,
#{$parent-selector} td {
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
var(#{$css-var-prefix}table-border-color);
background-color: var(#{$css-var-prefix}background-color);
Expand All @@ -41,10 +41,10 @@
#{$parent-selector} tfoot {
th,
td {
border-top: var(#{$css-var-prefix}border-width)
border-block-start: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}table-border-color);
border-bottom: 0;
border-block-end: 0;
}
}

Expand Down
Loading