Skip to content

Commit

Permalink
chore: rem: tidy up rem usage (#49)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dkilgore-eightfold
dkilgore-eightfold authored Apr 8, 2022
1 parent 7fc3bf9 commit ea42723
Show file tree
Hide file tree
Showing 12 changed files with 522 additions and 555 deletions.
26 changes: 13 additions & 13 deletions src/components/Button/button.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.button {
background-color: inherit;
border: rem(2px) solid rgba(var(--blue-color-40), 0.01);
border: 2px solid rgba(var(--blue-color-40), 0.01);
border-radius: $corner-radius-s;
cursor: pointer;
display: inline-block;
Expand Down Expand Up @@ -49,8 +49,8 @@
}

&:focus-visible {
outline: rem(2px) solid var(--blue-color-80);
outline-offset: rem(-2px);
outline: 2px solid var(--blue-color-80);
outline-offset: -2px;
}
}

Expand Down Expand Up @@ -119,8 +119,8 @@
.button-secondary {
color: var(--primary-color);
background-color: var(--text-inverse-color);
outline: var(--primary-color) solid rem(2px);
outline-offset: rem(-2px);
outline: var(--primary-color) solid 2px;
outline-offset: -2px;

&:hover {
background-color: var(--primary-color-10);
Expand Down Expand Up @@ -160,8 +160,8 @@
.button-secondary-disruptive {
color: var(--disruptive-color-70);
background-color: var(--white-color);
outline: var(--disruptive-color-70) solid rem(2px);
outline-offset: rem(-2px);
outline: var(--disruptive-color-70) solid 2px;
outline-offset: -2px;

&:hover {
background-color: var(--disruptive-color-10);
Expand All @@ -180,8 +180,8 @@

.button-default {
color: var(--primary-color);
outline: transparent solid rem(2px);
outline-offset: rem(-2px);
outline: transparent solid 2px;
outline-offset: -2px;

&:hover {
background-color: var(--primary-color-20);
Expand All @@ -200,8 +200,8 @@

.button-disruptive {
color: var(--disruptive-color-70);
outline: transparent solid rem(2px);
outline-offset: rem(-2px);
outline: transparent solid 2px;
outline-offset: -2px;

&:hover {
background-color: var(--disruptive-color-20);
Expand All @@ -220,8 +220,8 @@

.button-neutral {
color: var(--text-secondary-color);
outline: transparent solid rem(2px);
outline-offset: rem(-2px);
outline: transparent solid 2px;
outline-offset: -2px;

&:hover {
background-color: var(--grey-color-20);
Expand Down
8 changes: 4 additions & 4 deletions src/components/Icon/Icon.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import { IconName } from './mdi';
import { IconProps as MdiIconProps } from '@mdi/react/dist/IconProps';

export enum IconSize {
Large = '2.4rem',
Medium = '2rem',
Small = '1.6rem',
XSmall = '1.4rem',
Large = '24px',
Medium = '20px',
Small = '16px',
XSmall = '14px',
}

export interface IconProps extends MdiIconProps {
Expand Down
82 changes: 41 additions & 41 deletions src/components/Inputs/input.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,26 @@
input[type='search'],
input[type='text'] {
background-color: var(--background-color);
border: rem(1px) solid var(--border-color);
border: 1px solid var(--border-color);
border-radius: $corner-radius-s;
box-sizing: border-box;
color: var(--grey-color-60);
font-family: 'Source Sans Pro', sans-serif;
font-size: $text-font-size-3;
min-width: rem(320px);
padding: $space-xs calc($space-xxl + rem(4px)) $space-xs $space-xs;
min-width: 320px;
padding: $space-xs calc($space-xxl + 4px) $space-xs $space-xs;

&::-webkit-search-cancel-button {
-webkit-appearance: none;
}

&.with-icon {
padding: $space-xs calc($space-xxl + rem(4px)) $space-xs $space-xl;
padding: $space-xs calc($space-xxl + 4px) $space-xs $space-xl;
}

&.with-image-icon {
padding: $space-xs calc($space-xxl + rem(4px)) $space-xs
calc($space-xl + rem(4px));
padding: $space-xs calc($space-xxl + 4px) $space-xs
calc($space-xl + 4px);
}

&.with-icon-button {
Expand Down Expand Up @@ -113,7 +113,7 @@
}

&.pill-shape-with-image-icon {
padding: $space-xs $space-s $space-xs calc($space-xl + rem(4px));
padding: $space-xs $space-s $space-xs calc($space-xl + 4px);
}

&.pill-shape-with-icon-button {
Expand Down Expand Up @@ -154,8 +154,8 @@
}

&:focus-visible {
outline: rem(2px) solid var(--primary-color-40);
outline-offset: rem(-2px);
outline: 2px solid var(--primary-color-40);
outline-offset: -2px;
}

&.input-stretch {
Expand All @@ -165,26 +165,26 @@

.icon-wrapper {
bottom: 0;
height: rem(36px);
height: 36px;
position: absolute;
width: rem(36px);
width: 36px;

&.left-icon {
left: rem(4px);
left: 4px;
}

&.right-icon {
right: rem(4px);
right: 4px;
}

span {
padding: rem(8px) rem(4px);
padding: 8px 4px;
}

img {
display: inline-block;
height: 100%;
padding: rem(3px) rem(3px);
padding: 3px 3px;
max-width: 30px;
vertical-align: middle;
}
Expand All @@ -196,19 +196,19 @@

.icon-button {
background-color: var(--background-color);
bottom: rem(1px);
bottom: 1px;
color: var(--grey-color-60);
height: rem(34px);
height: 34px;
padding: $button-padding-vertical-small $space-xxs;
position: absolute;
transition: none;

&.left-icon {
left: rem(2px);
left: 2px;
}

&.right-icon {
right: rem(2px);
right: 2px;
}

svg {
Expand Down Expand Up @@ -237,20 +237,20 @@
}

&:focus-visible {
outline: rem(2px) solid var(--primary-color-40);
outline-offset: rem(-2px);
outline: 2px solid var(--primary-color-40);
outline-offset: -2px;
}
}

.clear-icon-button {
background-color: transparent;
bottom: rem(1px);
bottom: 1px;
color: var(--grey-color-60);
height: rem(35px);
height: 35px;
position: absolute;
right: rem(1px);
right: 1px;
transition: none;
width: rem(35px);
width: 35px;

&:hover {
border-color: transparent;
Expand All @@ -265,17 +265,17 @@
&:active,
&:focus-visible {
background-color: transparent;
outline: rem(2px) solid var(--primary-color-40);
outline-offset: rem(-2px);
outline: 2px solid var(--primary-color-40);
outline-offset: -2px;

svg {
color: var(--grey-color-80);
}
}

&:focus-visible {
outline: rem(2px) solid var(--primary-color-40);
outline-offset: rem(-2px);
outline: 2px solid var(--primary-color-40);
outline-offset: -2px;
}
}

Expand Down Expand Up @@ -315,36 +315,36 @@

.field-label-icon-button {
display: inline-block;
margin-left: rem(4px);
margin-top: rem(1px);
margin-left: 4px;
margin-top: 1px;
vertical-align: top;

.label-icon-button {
border-radius: 100%;
box-sizing: border-box;
border-width: rem(1px);
border-width: 1px;
padding: 0;

&:active,
&:focus-visible {
background-color: transparent;
outline: rem(2px) solid var(--primary-color-40);
outline-offset: rem(-2px);
outline: 2px solid var(--primary-color-40);
outline-offset: -2px;
padding: 0;
}
}
}

.text-area {
background-color: var(--background-color);
border: rem(1px) solid --border-color;
border: 1px solid --border-color;
border-radius: $corner-radius-s;
box-sizing: border-box;
color: var(--grey-color-60);
font-family: 'Source Sans Pro', sans-serif;
font-size: $text-font-size-3;
min-height: rem(64px);
min-width: rem(320px);
min-height: 64px;
min-width: 320px;
padding: $space-xs;

&::-webkit-resizer {
Expand All @@ -356,8 +356,8 @@
}

&:focus-visible {
outline: rem(2px) solid var(--primary-color-40);
outline-offset: rem(-2px);
outline: 2px solid var(--primary-color-40);
outline-offset: -2px;
}

&.input-stretch {
Expand All @@ -367,8 +367,8 @@

.text-area-resize-icon {
position: absolute;
bottom: rem(7px);
right: rem(4px);
bottom: 7px;
right: 4px;
}

&.input-stretch {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Pills/pills.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
align-items: center;

.label {
margin-bottom: rem(1px);
margin-top: rem(-1px);
margin-bottom: 1px;
margin-top: -1px;
}

&.red {
Expand Down
Loading

0 comments on commit ea42723

Please sign in to comment.