Skip to content
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

Jump to bottom

fix: add logical properties to components #1979

Merged
merged 14 commits into from
Oct 25, 2024
Merged

fix: add logical properties to components #1979

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
a39e801
fix: update physical properties to logical properties
QuintonJason Sep 13, 2024
cdd0082
fix: to logical border radius
QuintonJason Sep 13, 2024
270ab12
style: add override to body
QuintonJason Sep 13, 2024
6c727a7
style: update inset values back to physical values
QuintonJason Sep 13, 2024
0248ddf
fix: update input js
QuintonJason Sep 13, 2024
234be4a
style: update property
QuintonJason Sep 13, 2024
4a181c2
fix: remove rtl call
QuintonJason Sep 13, 2024
68d754e
fix: add rtl spacer styles
QuintonJason Sep 16, 2024
9f80b7d
fix: update input group padding
QuintonJason Sep 16, 2024
691a6be
fix: update rtl tooltip arrow positioning
QuintonJason Sep 16, 2024
dad3913
fix: update variable name
QuintonJason Sep 20, 2024
0074e0a
fix: added missing logical props
QuintonJason Sep 30, 2024
93fcaaf
fix: remove icon flex reverse
QuintonJason Oct 16, 2024
00978ba
fix: linter fix
QuintonJason Oct 23, 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
4 changes: 2 additions & 2 deletions docs/app/views/lockup/lockup/unlock.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<%= sage_component SageContainer, { size: "md", html_attributes: { style: "padding-top: 200px;"}} do %>
<%= sage_component SageContainer, { size: "md", html_attributes: { style: "padding-block-start: 200px;"}} do %>
<%= image_tag("media/images/sage.svg", width: 100) %>
<h1 class="t-sage-heading-1">Sage Design System</h1>
<h2 class="t-sage-heading-6">SCSS Based Component Library for our applications UI</h2>
Expand All @@ -13,7 +13,7 @@
</div>
<% end %>

<%= form_for :lockup, url: { action: 'unlock' }, html: {style: "padding-top: 50px"} do |form| %>
<%= form_for :lockup, url: { action: 'unlock' }, html: {style: "padding-block-start: 50px"} do |form| %>
<% if params[:return_to].present? %>
<%= form.hidden_field "return_to", value: params[:return_to] %>
<% elsif @return_to.present? %>
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/sage-frontend/stylesheets/docs/_assistant.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
}

.sage-theme-switch {
margin-bottom: 0;
margin-block-end: 0;

.sage-switch__label {
color: sage-color(white);
Expand Down
6 changes: 3 additions & 3 deletions docs/lib/sage-frontend/stylesheets/docs/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
// color block groupings
.colors {
overflow: hidden;
margin-top: sage-spacing();
margin-bottom: sage-spacing();
margin-block-start: sage-spacing();
margin-block-end: sage-spacing();
border-radius: sage-border(radius);
}

Expand Down Expand Up @@ -99,7 +99,7 @@

&::after {
content: "#{$hex}";
padding-left: sage-spacing(xs);
padding-inline-start: sage-spacing(xs);
font-weight: sage-font-weight(semibold);
text-transform: uppercase;
}
Expand Down
4 changes: 2 additions & 2 deletions docs/lib/sage-frontend/stylesheets/docs/_docs_container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
================================================== */

.docs-container {
margin-top: sage-spacing();
margin-bottom: sage-spacing();
margin-block-start: sage-spacing();
margin-block-end: sage-spacing();

@include sage-panel;
}
Expand Down
28 changes: 14 additions & 14 deletions docs/lib/sage-frontend/stylesheets/docs/_example.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,26 +62,26 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75);
}

.example__block {
margin-top: sage-spacing(sm);
margin-bottom: sage-spacing(sm);
margin-block-start: sage-spacing(sm);
margin-block-end: sage-spacing(sm);
}

.example__block--md {
margin-top: sage-spacing(md);
margin-bottom: sage-spacing(md);
margin-block-start: sage-spacing(md);
margin-block-end: sage-spacing(md);
}

.example__block--lg {
margin-top: sage-spacing(lg);
margin-bottom: sage-spacing(lg);
margin-block-start: sage-spacing(lg);
margin-block-end: sage-spacing(lg);
}

.example__expand-btn {
@include sage-button-style-reset();
position: absolute;
z-index: sage-z_index(raised);
bottom: sage-spacing(xs);
left: 0;
inset-block-end: sage-spacing(xs);
inset-inline-start: 0;
width: 100%;
padding: sage-spacing(xs);
color: $-example-code-preview-button-color;
Expand Down Expand Up @@ -131,18 +131,18 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75);
max-height: $-example-code-preview-height;

.prettyprint {
margin-bottom: 0;
padding-bottom: sage-spacing(xl);
margin-block-end: 0;
padding-block-end: sage-spacing(xl);
}

&::before {
content: "";
display: block;
z-index: sage-z-index(default, 100);
position: absolute;
left: 0;
right: 0;
bottom: 0;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
height: 100%;
background-image: linear-gradient(to bottom, rgba($docs-code-editor-background, 0) 0%, rgba($docs-code-editor-background, 0.9) 100%);
transition: map-get($sage-transitions, default);
Expand All @@ -168,7 +168,7 @@ $-example-code-preview-button-bg: rgba(sage-color(primary, 300), 0.75);
}
.sage-card__header {
padding: sage-spacing();
padding-bottom: sage-spacing(xs);
padding-block-end: sage-spacing(xs);
code {
background: sage-color(grey, 300);
}
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/sage-frontend/stylesheets/docs/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

.grid-item {
width: 100%;
margin-bottom: sage-spacing(md);
margin-block-end: sage-spacing(md);
padding: sage-spacing(xs) sage-spacing(md);
text-align: center;
background: sage-color(grey, 200);
Expand Down
22 changes: 11 additions & 11 deletions docs/lib/sage-frontend/stylesheets/docs/_home.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
background-color: sage-color(primary, 500);

@media (max-width: sage-breakpoint(md-min)) {
padding-bottom: sage-spacing(xl);
padding-block-end: sage-spacing(xl);
}

.sage-btn--subtle.sage-btn--secondary {
Expand All @@ -32,8 +32,8 @@

.docs-hero__background {
position: absolute;
left: 0;
top: 0;
inset-inline-start: 0;
inset-block-start: 0;
width: 100%;
height: 100%;
object-fit: cover;
Expand All @@ -44,8 +44,8 @@
}

.docs-hero__title {
margin-bottom: sage-spacing(sm);
margin-top: sage-spacing();
margin-block-end: sage-spacing(sm);
margin-block-start: sage-spacing();
font-size: 4rem;
line-height: 1;
color: inherit;
Expand All @@ -64,20 +64,20 @@
}

.docs-section__title {
margin-bottom: sage-spacing(2xl);
margin-block-end: sage-spacing(2xl);

@media (max-width: sage-breakpoint(md-min)) {
margin-bottom: sage-spacing();
margin-block-end: sage-spacing();
}
}

.docs-section__icon {
margin-bottom: sage-spacing();
margin-block-end: sage-spacing();
}

.docs-section__platform-icon {
width: rem(48px);
margin-bottom: sage-spacing();
margin-block-end: sage-spacing();
}

.docs-iframe {
Expand All @@ -90,8 +90,8 @@
content: "";
position: absolute;
z-index: sage-z-index(default, 1);
top: 0;
left: 0;
inset-block-start: 0;
inset-inline-start: 0;
height: 100%;
width: 100%;
backdrop-filter: blur(70px);
Expand Down
8 changes: 4 additions & 4 deletions docs/lib/sage-frontend/stylesheets/docs/_icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
flex-direction: column;
flex-wrap: wrap;
align-items: center;
margin-bottom: sage-spacing();
margin-block-end: sage-spacing();
padding: sage-spacing(lg) sage-spacing(sm);
text-align: center;
background: sage-color(grey, 150);
Expand All @@ -18,15 +18,15 @@
}

.docs-icon-block__label {
margin-top: sage-spacing(xs);
margin-bottom: 0;
margin-block-start: sage-spacing(xs);
margin-block-end: 0;
font-size: sage-font-size(body-xs);
font-weight: sage-font-weight(semibold);
}


.docs-icon-inline {
margin-bottom: sage-spacing(sm);
margin-block-end: sage-spacing(sm);
padding: sage-spacing(sm);
text-align: right;
background: sage-color(grey, 150);
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/sage-frontend/stylesheets/docs/_nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
}

.docs-hero & {
margin-bottom: rem(100px);
margin-block-end: rem(100px);
}
}

Expand Down
2 changes: 1 addition & 1 deletion docs/lib/sage-frontend/stylesheets/docs/_panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@
}

p + p {
margin-top: 1.5rem;
margin-block-start: 1.5rem;
}
}
8 changes: 4 additions & 4 deletions docs/lib/sage-frontend/stylesheets/docs/_quick_links.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ $-quick-links-color-background: sage-color(primary, 200);

.quick-links {
position: sticky;
top: 0;
inset-block-start: 0;
overflow: hidden;
padding: sage-spacing(2xs) sage-spacing();
background-color: #fff;
Expand All @@ -29,14 +29,14 @@ $-quick-links-color-background: sage-color(primary, 200);
list-style: none;

&:not(:last-child) {
margin-bottom: sage-spacing(2xs);
margin-block-end: sage-spacing(2xs);
}
}

.quick-links__link {
display: flex;
align-items: center;
margin-bottom: rem(2px);
margin-block-end: rem(2px);
padding: sage-spacing(2xs) sage-spacing(xs);
color: $-quick-links-color-text;
border-radius: sage-border(radius);
Expand All @@ -58,7 +58,7 @@ $-quick-links-color-background: sage-color(primary, 200);
}

.quick-links__link--secondary {
margin-left: sage-spacing(sm);
margin-inline-start: sage-spacing(sm);
}

.quick-links__title {
Expand Down
4 changes: 2 additions & 2 deletions docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
.example__preview & {
z-index: sage-z-index();
position: relative;
top: auto;
left: auto;
inset-block-start: auto;
inset-inline-start: auto;
transform: none;
height: auto;
box-shadow: none;
Expand Down
4 changes: 2 additions & 2 deletions docs/lib/sage-frontend/stylesheets/docs/_snippet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
inset-inline-end: 0;
inset-block-start: 0;
height: 100%;
width: sage-spacing(lg);
background: linear-gradient(
Expand Down
6 changes: 3 additions & 3 deletions docs/lib/sage-frontend/stylesheets/docs/_specs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,18 @@
th {
padding: 4px;
color: sage-color(grey, 700);
border-bottom: 1px solid sage-color(grey, 300);
border-block-end: 1px solid sage-color(grey, 300);
}

td {
padding: 4px;
font-size: sage-font-size(body-xs);
vertical-align: middle;
border-bottom: 1px solid sage-color(grey, 200);
border-block-end: 1px solid sage-color(grey, 200);
}

tfoot td {
padding-top: 12px;
padding-block-start: 12px;
border-bottom-color: transparent;
}
}
8 changes: 4 additions & 4 deletions docs/lib/sage-frontend/stylesheets/docs/_status_key.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@
align-items: center;
flex-wrap: wrap;
flex-grow: 1;
margin-right: sage-spacing(sm);
margin-inline-end: sage-spacing(sm);

&__wrapper {
display: flex;
flex-wrap: wrap;
margin-bottom: sage-spacing();
margin-block-end: sage-spacing();
}

&__icon {
Expand Down Expand Up @@ -49,7 +49,7 @@
}

&__text {
margin-left: sage-spacing(xs);
margin-inline-start: sage-spacing(xs);
font-size: sage-font-size(body-sm);
font-weight: sage-font-weight(semibold);
color: sage-color(grey, 700);
Expand All @@ -60,6 +60,6 @@
}

@media screen and (min-width: sage-breakpoint(xl-min)) {
margin-right: sage-spacing(lg);
margin-inline-end: sage-spacing(lg);
}
}
10 changes: 5 additions & 5 deletions docs/lib/sage-frontend/stylesheets/docs/_status_table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,21 @@ $-status-table-heading-padding: sage-spacing(xs) sage-spacing(sm);

tbody {
tr {
border-bottom: 0;
border-block-end: 0;
}

tr:last-child {
border-bottom: 0;
border-block-end: 0;
}
}

th {
padding: $-status-table-heading-padding;
text-align: center;
border-bottom: $-status-table-border;
border-block-end: $-status-table-border;

&:first-child {
padding-left: 0;
padding-inline-start: 0;
text-align: left;
text-align: inline-start;
}
Expand All @@ -44,7 +44,7 @@ $-status-table-heading-padding: sage-spacing(xs) sage-spacing(sm);
padding: $-status-table-cell-padding;
vertical-align: middle;
text-align: center;
border-bottom: sage-border();
border-block-end: sage-border();

&:first-child {
font-weight: sage-font-weight(semibold);
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/sage-frontend/stylesheets/docs/_table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

.sage-table {
.example__preview & {
margin-bottom: sage-spacing();
margin-block-end: sage-spacing();
}

table {
Expand Down
Loading
Loading