Skip to content

Commit

Permalink
Merge pull request #77 from minedelve/outline-css-bug
Browse files Browse the repository at this point in the history 
update all css class outlined to outline and type for all components
  • Loading branch information
@Nycolaide
Nycolaide authored Feb 6, 2025
2 parents d24c3a2 + 44391ae commit 70f2fa2
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 42 deletions.
18 changes: 9 additions & 9 deletions src/styles/alert.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
z-index: -1;
}

.myt-alert.myt-alert--outlined {
.myt-alert.myt-alert--outline {
border: thin solid currentColor;
}

Expand Down Expand Up @@ -86,47 +86,47 @@
width: 100%;
}

.myt-alert.myt-alert--info:not(.myt-alert--outlined) {
.myt-alert.myt-alert--info:not(.myt-alert--outline) {
--c: var(--color-on-info);
--bg: var(--color-info);
}
.myt-alert.myt-alert--info.myt-alert--outlined {
.myt-alert.myt-alert--info.myt-alert--outline {
--c: var(--color-info);
}
.myt-alert.myt-alert--info.myt-alert--variant-tonal {
--bg: var(--color-info-container);
--c: var(--color-on-info-container);
}

.myt-alert.myt-alert--success:not(.myt-alert--outlined) {
.myt-alert.myt-alert--success:not(.myt-alert--outline) {
--c: var(--color-on-success);
--bg: var(--color-success);
}
.myt-alert.myt-alert--success.myt-alert--outlined {
.myt-alert.myt-alert--success.myt-alert--outline {
--c: var(--color-success);
}
.myt-alert.myt-alert--success.myt-alert--variant-tonal {
--bg: var(--color-success-container);
--c: var(--color-on-success-container);
}

.myt-alert.myt-alert--warning:not(.myt-alert--outlined) {
.myt-alert.myt-alert--warning:not(.myt-alert--outline) {
--c: var(--color-on-warning);
--bg: var(--color-warning);
}
.myt-alert.myt-alert--warning.myt-alert--outlined {
.myt-alert.myt-alert--warning.myt-alert--outline {
--c: var(--color-warning);
}
.myt-alert.myt-alert--warning.myt-alert--variant-tonal {
--bg: var(--color-warning-container);
--c: var(--color-on-warning-container);
}

.myt-alert.myt-alert--error:not(.myt-alert--outlined) {
.myt-alert.myt-alert--error:not(.myt-alert--outline) {
--c: var(--color-on-error);
--bg: var(--color-error);
}
.myt-alert.myt-alert--error.myt-alert--outlined {
.myt-alert.myt-alert--error.myt-alert--outline {
--c: var(--color-error);
}
.myt-alert.myt-alert--error.myt-alert--variant-tonal {
Expand Down
36 changes: 18 additions & 18 deletions src/styles/btn.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@
border-radius: var(--myt-btn-br);
}

.myt-btn.myt-btn--outlined {
.myt-btn.myt-btn--outline {
border: thin solid currentColor;
}
.myt-btn.myt-btn--text,
.myt-btn.myt-btn--outlined {
.myt-btn.myt-btn--outline {
background-color: transparent;
}

Expand Down Expand Up @@ -128,18 +128,18 @@
transform: scale(0.97);
}

.myt-btn.myt-btn--active:not(.myt-btn--outlined):not(.myt-btn--text):not(.myt-btn--link) {
.myt-btn.myt-btn--active:not(.myt-btn--outline):not(.myt-btn--text):not(.myt-btn--link) {
background-color: color-mix(in oklab, var(--bg) 85%, black);
}
.myt-btn:hover:not(.myt-btn--outlined):not(.myt-btn--text):not(.myt-btn--link) {
.myt-btn:hover:not(.myt-btn--outline):not(.myt-btn--text):not(.myt-btn--link) {
background-color: color-mix(in oklab, var(--bg) 90%, black);
}

.myt-btn.myt-btn--outlined.myt-btn--active,
.myt-btn.myt-btn--outline.myt-btn--active,
.myt-btn.myt-btn--text.myt-btn--active {
background-color: color-mix(in oklab, var(--c) 15%, transparent);
}
.myt-btn.myt-btn--outlined:hover,
.myt-btn.myt-btn--outline:hover,
.myt-btn.myt-btn--text:hover {
background-color: color-mix(in oklab, var(--c) 20%, transparent);
}
Expand All @@ -156,13 +156,13 @@
color: color-mix(in oklab, var(--c) 40%, transparent) !important;
background-color: color-mix(in oklab, var(--bg) 70%, transparent) !important;
}
.myt-btn.myt-btn--disabled.myt-btn--outlined,
.myt-btn[disabled].myt-btn--outlined {
.myt-btn.myt-btn--disabled.myt-btn--outline,
.myt-btn[disabled].myt-btn--outline {
border-color: color-mix(in oklab, var(--c) 40%, transparent) !important;
}

.myt-btn.myt-btn--disabled.myt-btn--outlined,
.myt-btn[disabled].myt-btn--outlined,
.myt-btn.myt-btn--disabled.myt-btn--outline,
.myt-btn[disabled].myt-btn--outline,
.myt-btn.myt-btn--disabled.myt-btn--text,
.myt-btn[disabled].myt-btn--text,
.myt-btn.myt-btn--disabled.myt-btn--link,
Expand All @@ -188,41 +188,41 @@
--bg: var(--myt-btn-bg);
}

.myt-btn.myt-btn--info:not(.myt-btn--outlined):not(.myt-btn--text):not(.myt-btn--link) {
.myt-btn.myt-btn--info:not(.myt-btn--outline):not(.myt-btn--text):not(.myt-btn--link) {
--c: var(--mcolor-on-info);
--bg: var(--color-info);
}
.myt-btn.myt-btn--info.myt-btn--outlined,
.myt-btn.myt-btn--info.myt-btn--outline,
.myt-btn.myt-btn--info.myt-btn--text,
.myt-btn.myt-btn--info.myt-btn--link {
--c: var(--color-info);
}

.myt-btn.myt-btn--success:not(.myt-btn--outlined):not(.myt-btn--text):not(.myt-btn--link) {
.myt-btn.myt-btn--success:not(.myt-btn--outline):not(.myt-btn--text):not(.myt-btn--link) {
--c: var(--color-on-success);
--bg: var(--color-success);
}
.myt-btn.myt-btn--success.myt-btn--outlined,
.myt-btn.myt-btn--success.myt-btn--outline,
.myt-btn.myt-btn--success.myt-btn--text,
.myt-btn.myt-btn--success.myt-btn--link {
--c: var(--mcolor-success);
}

.myt-btn.myt-btn--warning:not(.myt-btn--outlined):not(.myt-btn--text):not(.myt-btn--link) {
.myt-btn.myt-btn--warning:not(.myt-btn--outline):not(.myt-btn--text):not(.myt-btn--link) {
--c: var(--color-on-warning);
--bg: var(--color-warning);
}
.myt-btn.myt-btn--warning.myt-btn--outlined,
.myt-btn.myt-btn--warning.myt-btn--outline,
.myt-btn.myt-btn--warning.myt-btn--text,
.myt-btn.myt-btn--warning.myt-btn--link {
--c: var(--color-warning);
}

.myt-btn.myt-btn--error:not(.myt-btn--outlined):not(.myt-btn--text):not(.myt-btn--link) {
.myt-btn.myt-btn--error:not(.myt-btn--outline):not(.myt-btn--text):not(.myt-btn--link) {
--c: var(--color-on-error);
--bg: var(--color-error);
}
.myt-btn.myt-btn--error.myt-btn--outlined,
.myt-btn.myt-btn--error.myt-btn--outline,
.myt-btn.myt-btn--error.myt-btn--text,
.myt-btn.myt-btn--error.myt-btn--link {
--c: var(--color-error);
Expand Down
20 changes: 10 additions & 10 deletions src/styles/chip.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@
border-radius: var(--radius-md);
}

.myt-chip.myt-chip--outlined {
.myt-chip.myt-chip--outline {
border: thin solid currentColor;
}
.myt-chip.myt-chip--text,
.myt-chip.myt-chip--outlined {
.myt-chip.myt-chip--outline {
background-color: transparent;
}

Expand Down Expand Up @@ -81,17 +81,17 @@
user-select: none;
}

.myt-chip.myt-chip--active:not(.myt-chip--outlined) {
.myt-chip.myt-chip--active:not(.myt-chip--outline) {
background-color: color-mix(in oklab, var(--bg) 85%, black);
}
.myt-chip:hover:not(.myt-chip--outlined):not(.myt-chip--closable) {
.myt-chip:hover:not(.myt-chip--outline):not(.myt-chip--closable) {
background-color: color-mix(in oklab, var(--bg) 90%, black);
}

.myt-chip.myt-chip--outlined.myt-chip--active {
.myt-chip.myt-chip--outline.myt-chip--active {
background-color: color-mix(in oklab, var(--c) 15%, transparent);
}
.myt-chip.myt-chip--outlined:hover:not(.myt-chip--closable) {
.myt-chip.myt-chip--outline:hover:not(.myt-chip--closable) {
background-color: color-mix(in oklab, var(--c) 20%, transparent);
}

Expand All @@ -102,13 +102,13 @@
color: color-mix(in oklab, var(--c) 40%, transparent) !important;
background-color: color-mix(in oklab, var(--bg) 70%, transparent) !important;
}
.myt-chip.myt-chip--disabled.myt-chip--outlined,
.myt-chip[disabled].myt-chip--outlined {
.myt-chip.myt-chip--disabled.myt-chip--outline,
.myt-chip[disabled].myt-chip--outline {
border-color: color-mix(in oklab, var(--c) 40%, transparent) !important;
}

.myt-chip.myt-chip--disabled.myt-chip--outlined,
.myt-chip[disabled].myt-chip--outlined,
.myt-chip.myt-chip--disabled.myt-chip--outline,
.myt-chip[disabled].myt-chip--outline,
.myt-chip.myt-chip--disabled.myt-chip--text,
.myt-chip[disabled].myt-chip--text,
.myt-chip.myt-chip--disabled.myt-chip--link,
Expand Down
10 changes: 5 additions & 5 deletions src/types/component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export interface ToolbarProps extends ComponentBase {
is?: 'div' | 'header' | 'nav';
classContent?: string;
floating?: boolean;
variant?: 'outlined' | 'text';
variant?: 'outline' | 'text';
absolute?: boolean;
rounded?: string;
height?: string;
Expand Down Expand Up @@ -324,7 +324,7 @@ export interface ChipProps extends ComponentBase {
is?: 'a' | 'button' | 'span' | 'div';
dark?: boolean;
light?: boolean;
variant?: 'outlined' | 'label';
variant?: 'outline' | 'label';
active?: boolean;
density?: 'compact' | 'comfortable' | 'default';
disabled?: boolean;
Expand All @@ -348,7 +348,7 @@ export interface CardProps extends ComponentBase {
is?: 'a' | 'button' | 'div';
dark?: boolean;
light?: boolean;
variant?: 'outlined' | 'text';
variant?: 'outline' | 'text';
active?: boolean;
disabled?: boolean;
rounded?: string;
Expand Down Expand Up @@ -388,7 +388,7 @@ export interface BtnProps extends ComponentBase {
is?: 'a' | 'button' | 'input';
dark?: boolean;
light?: boolean;
variant?: 'outlined' | 'text';
variant?: 'outline' | 'text';
active?: boolean;
density?: 'compact' | 'comfortable' | 'default';
block?: boolean;
Expand Down Expand Up @@ -467,7 +467,7 @@ export interface AlertProps extends ComponentBase {
is?: 'div';
dark?: boolean;
light?: boolean;
variant?: 'outlined' | 'tonal';
variant?: 'outline' | 'tonal';
density?: 'compact' | 'comfortable' | 'default';
rounded?: string;
closable?: boolean;
Expand Down

0 comments on commit 70f2fa2

Please sign in to comment.