Skip to content

Commit

Permalink
feat(@clayui/css): Adds translucent buttons and badges
Browse files Browse the repository at this point in the history
  • Loading branch information
@pat270
pat270 committed Nov 9, 2023
1 parent b1cf8c4 commit f5792d0
Show file tree
Hide file tree
Showing 5 changed files with 555 additions and 17 deletions.
7 changes: 1 addition & 6 deletions packages/clay-css/src/scss/cadmin/components/_badges.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,7 @@
$selector: if(
index($deprecated-keys, '#{$color}') != null,
str-insert($color, '.badge-', 1),
if
(
starts-with($color, 'badge'),
str-insert($color, '.', 1),
$color
)
if(starts-with($color, 'badge'), str-insert($color, '.', 1), $color)
);

@if (starts-with($color, '%') or map-get($value, extend)) {
Expand Down
81 changes: 78 additions & 3 deletions packages/clay-css/src/scss/cadmin/variables/_badges.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -466,10 +466,85 @@ $cadmin-badge-palette: map-deep-merge(
danger: $cadmin-badge-danger,
light: $cadmin-badge-light,
dark: $cadmin-badge-dark,
badge-beta: (
background-color: $cadmin-light-l1,
'.badge-translucent.badge-primary': (
background-color: rgba($cadmin-primary-d1, 0.04),
border-color: transparent,
color: $cadmin-primary-d1,
),
'.badge-translucent.badge-info, .badge-beta': (
background-color: rgba($cadmin-info-d1, 0.04),
border-color: transparent,
color: $cadmin-info-d1,
text-transform: uppercase,
),
'.badge-translucent.badge-success': (
background-color: rgba($cadmin-success-d1, 0.04),
border-color: transparent,
color: $cadmin-success-d1,
),
'.badge-translucent.badge-warning': (
background-color: rgba($cadmin-warning-d1, 0.04),
border-color: transparent,
color: $cadmin-warning-d1,
),
'.badge-translucent.badge-danger': (
background-color: rgba($cadmin-danger-d1, 0.04),
border-color: transparent,
color: $cadmin-danger-d1,
),
'%clay-dark-badge-translucent-primary': (
background-color: rgba($cadmin-primary-l2, 0.04),
border-color: transparent,
color: $cadmin-primary-l1,
),
'.clay-dark .badge-translucent.badge-primary': (
extend: '%clay-dark-badge-translucent-primary',
),
'.clay-dark.badge-translucent.badge-primary': (
extend: '%clay-dark-badge-translucent-primary',
),
'%clay-dark-badge-translucent-info': (
background-color: rgba($cadmin-info-l2, 0.04),
border-color: transparent,
color: $cadmin-info-l1,
),
'.clay-dark .badge-translucent.badge-info, .badge-beta-dark': (
extend: '%clay-dark-badge-translucent-info',
),
'.clay-dark.badge-translucent.badge-info': (
extend: '%clay-dark-badge-translucent-info',
),
'%clay-dark-badge-translucent-success': (
background-color: rgba($cadmin-success-l2, 0.04),
border-color: transparent,
color: $cadmin-success-l1,
),
'.clay-dark .badge-translucent.badge-success': (
extend: '%clay-dark-badge-translucent-success',
),
'.clay-dark.badge-translucent.badge-success': (
extend: '%clay-dark-badge-translucent-success',
),
'%clay-dark-badge-translucent-warning': (
background-color: rgba($cadmin-warning-l2, 0.04),
border-color: transparent,
color: $cadmin-warning-l1,
),
'.clay-dark .badge-translucent.badge-warning': (
extend: '%clay-dark-badge-translucent-warning',
),
'.clay-dark.badge-translucent.badge-warning': (
extend: '%clay-dark-badge-translucent-warning',
),
'%clay-dark-badge-translucent-danger': (
background-color: rgba($cadmin-danger-l2, 0.04),
border-color: transparent,
color: $cadmin-danger-l1,
),
'.clay-dark .badge-translucent.badge-danger': (
extend: '%clay-dark-badge-translucent-danger',
),
'.clay-dark.badge-translucent.badge-danger': (
extend: '%clay-dark-badge-translucent-danger',
),
),
$cadmin-badge-palette
Expand Down
204 changes: 204 additions & 0 deletions packages/clay-css/src/scss/cadmin/variables/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -721,6 +721,210 @@ $cadmin-btn-palette: map-deep-merge(
color: $cadmin-info-d1,
),
),
'.btn-translucent': (
extend: '%clay-btn-xs',
border-radius: clay-enable-rounded($cadmin-rounded-pill),
),
'.btn-translucent.btn-primary': (
background-color: rgba($cadmin-primary-d1, 0.04),
border-color: transparent,
color: $cadmin-primary-d1,
hover: (
background-color: rgba($cadmin-primary-d1, 0.06),
color: $cadmin-primary-d1,
),
focus: (
background-color: rgba($cadmin-primary-d1, 0.06),
color: $cadmin-primary-d1,
),
active: (
background-color: rgba($cadmin-primary-d1, 0.08),
color: $cadmin-primary-d1,
),
),
'.btn-translucent.btn-info, .btn-beta': (
background-color: rgba($cadmin-info-d1, 0.04),
border-color: transparent,
color: $cadmin-info-d1,
hover: (
background-color: rgba($cadmin-info-d1, 0.06),
color: $cadmin-info-d1,
),
focus: (
background-color: rgba($cadmin-info-d1, 0.06),
color: $cadmin-info-d1,
),
active: (
background-color: rgba($cadmin-info-d1, 0.08),
color: $cadmin-info-d1,
),
),
'.btn-translucent.btn-success': (
background-color: rgba($cadmin-success-d1, 0.04),
border-color: transparent,
color: $cadmin-success-d1,
hover: (
background-color: rgba($cadmin-success-d1, 0.06),
color: $cadmin-success-d1,
),
focus: (
background-color: rgba($cadmin-success-d1, 0.06),
color: $cadmin-success-d1,
),
active: (
background-color: rgba($cadmin-success-d1, 0.08),
color: $cadmin-success-d1,
),
),
'.btn-translucent.btn-warning': (
background-color: rgba($cadmin-warning-d1, 0.04),
border-color: transparent,
color: $cadmin-warning-d1,
hover: (
background-color: rgba($cadmin-warning-d1, 0.06),
color: $cadmin-warning-d1,
),
focus: (
background-color: rgba($cadmin-warning-d1, 0.06),
color: $cadmin-warning-d1,
),
active: (
background-color: rgba($cadmin-warning-d1, 0.08),
color: $cadmin-warning-d1,
),
),
'.btn-translucent.btn-danger': (
background-color: rgba($cadmin-danger-d1, 0.04),
border-color: transparent,
color: $cadmin-danger-d1,
hover: (
background-color: rgba($cadmin-danger-d1, 0.06),
color: $cadmin-danger-d1,
),
focus: (
background-color: rgba($cadmin-danger-d1, 0.06),
color: $cadmin-danger-d1,
),
active: (
background-color: rgba($cadmin-danger-d1, 0.08),
color: $cadmin-danger-d1,
),
),
'%clay-dark-btn-translucent-primary': (
background-color: rgba($cadmin-primary-l2, 0.04),
border-color: transparent,
color: $cadmin-primary-l1,
hover: (
background-color: rgba($cadmin-primary-l2, 0.06),
color: $cadmin-primary-l1,
),
focus: (
background-color: rgba($cadmin-primary-l2, 0.06),
color: $cadmin-primary-l1,
),
active: (
background-color: rgba($cadmin-primary-l2, 0.08),
color: $cadmin-primary-l1,
),
),
'.clay-dark .btn-translucent.btn-primary': (
extend: '%clay-dark-btn-translucent-primary',
),
'.clay-dark.btn-translucent.btn-primary': (
extend: '%clay-dark-btn-translucent-primary',
),
'%clay-dark-btn-translucent-info': (
background-color: rgba($cadmin-info-l2, 0.04),
border-color: transparent,
color: $cadmin-info-l1,
hover: (
background-color: rgba($cadmin-info-l2, 0.06),
color: $cadmin-info-l1,
),
focus: (
background-color: rgba($cadmin-info-l2, 0.06),
color: $cadmin-info-l1,
),
active: (
background-color: rgba($cadmin-info-l2, 0.08),
color: $cadmin-info-l1,
),
),
'.clay-dark .btn-translucent.btn-info, .btn-beta-dark': (
extend: '%clay-dark-btn-translucent-info',
),
'.clay-dark.btn-translucent.btn-info': (
extend: '%clay-dark-btn-translucent-info',
),
'%clay-dark-btn-translucent-success': (
background-color: rgba($cadmin-success-l2, 0.04),
border-color: transparent,
color: $cadmin-success-l1,
hover: (
background-color: rgba($cadmin-success-l2, 0.06),
color: $cadmin-success-l1,
),
focus: (
background-color: rgba($cadmin-success-l2, 0.06),
color: $cadmin-success-l1,
),
active: (
background-color: rgba($cadmin-success-l2, 0.08),
color: $cadmin-success-l1,
),
),
'.clay-dark .btn-translucent.btn-success': (
extend: '%clay-dark-btn-translucent-success',
),
'.clay-dark.btn-translucent.btn-success': (
extend: '%clay-dark-btn-translucent-success',
),
'%clay-dark-btn-translucent-warning': (
background-color: rgba($cadmin-warning-l2, 0.04),
border-color: transparent,
color: $cadmin-warning-l1,
hover: (
background-color: rgba($cadmin-warning-l2, 0.06),
color: $cadmin-warning-l1,
),
focus: (
background-color: rgba($cadmin-warning-l2, 0.06),
color: $cadmin-warning-l1,
),
active: (
background-color: rgba($cadmin-warning-l2, 0.08),
color: $cadmin-warning-l1,
),
),
'.clay-dark .btn-translucent.btn-warning': (
extend: '%clay-dark-btn-translucent-warning',
),
'.clay-dark.btn-translucent.btn-warning': (
extend: '%clay-dark-btn-translucent-warning',
),
'%clay-dark-btn-translucent-danger': (
background-color: rgba($cadmin-danger-l2, 0.04),
border-color: transparent,
color: $cadmin-danger-l1,
hover: (
background-color: rgba($cadmin-danger-l2, 0.06),
color: $cadmin-danger-l1,
),
focus: (
background-color: rgba($cadmin-danger-l2, 0.06),
color: $cadmin-danger-l1,
),
active: (
background-color: rgba($cadmin-danger-l2, 0.08),
color: $cadmin-danger-l1,
),
),
'.clay-dark .btn-translucent.btn-danger': (
extend: '%clay-dark-btn-translucent-danger',
),
'.clay-dark.btn-translucent.btn-danger': (
extend: '%clay-dark-btn-translucent-danger',
),
),
$cadmin-btn-palette
);
Expand Down
Loading

0 comments on commit f5792d0

Please sign in to comment.