Skip to content

Commit

Permalink
fix(@clayui/css): Mixins clay-nav-variant convert to use new (easie…
Browse files Browse the repository at this point in the history 
…r to remember) Sass map keys. The old keys will still work and win over new keys.

- Adds option `enabled` to prevent styles from being output
- Adds option `nav-item` to style `.nav-item` class in the mixin
- Adds option `nav-link` to style `.nav-link` class in the mixin, replaces `link-*-*` option

fixes #4071
  • Loading branch information
@pat270
pat270 committed May 14, 2021
1 parent ac5789f commit 3fa114a
Showing 1 changed file with 129 additions and 43 deletions.
172 changes: 129 additions & 43 deletions packages/clay-css/src/scss/mixins/_nav.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,78 +29,164 @@
/// A mixin to create a `.nav` color variant.
/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
/// @example
/// // `bg` is deprecated use `background-color` instead
/// bg: {Color | String | Null},
/// // `link-bg` is deprecated use Sass map `nav-link` instead
/// link-bg: {Color | String | Null},
/// // `link-border-radius` is deprecated use Sass map `nav-link` instead
/// link-border-radius: {Number | String | List | Null},
/// // `link-color` is deprecated use Sass map `nav-link` instead
/// link-color: {Color | String | Null},
/// // `link-font-weight` is deprecated use Sass map `nav-link` instead
/// link-font-weight: {Number | String | Null},
/// // `link-hover-bg` is deprecated use Sass map `nav-link: ( hover: () )` instead
/// link-hover-bg: {Color | String | Null},
/// // `link-hover-color` is deprecated use Sass map `nav-link: ( hover: () )` instead
/// link-hover-color: {Color | String | Null},
/// // `link-focus-bg` is deprecated use Sass map `nav-link: ( focus: () )` instead
/// link-focus-bg: {Color | String | Null},
/// // `link-focus-color` is deprecated use Sass map `nav-link: ( focus: () )` instead
/// link-focus-color: {Color | String | Null},
/// // `link-disabled-bg` is deprecated use Sass map `nav-link: ( disabled: () )` instead
/// link-disabled-bg: {Color | String}, // Default: transparent
/// // `link-disabled-color` is deprecated use Sass map `nav-link: ( disabled: () )` instead
/// link-disabled-color: {Color | String}, // Default: $nav-link-disabled-color
/// // `link-disabled-opacity` is deprecated use Sass map `nav-link: ( disabled: () )` instead
/// link-disabled-opacity: {Number | String | Null},
/// // `link-active-bg` is deprecated use Sass map `nav-link: ( active-class: () )` instead
/// link-active-bg: {Color | String | Null},
/// // `link-active-color` is deprecated use Sass map `nav-link: ( active-class: () )` instead
/// link-active-color: {Color | String | Null},
/// // `link-active-font-weight` is deprecated use Sass map `nav-link: ( active-class: () )` instead
/// link-active-font-weight: {Number | String | Null},
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin clay-nav-variant($map) {
$bg: map-get($map, bg);
$link-bg: map-get($map, link-bg);
$link-border-radius: map-get($map, link-border-radius);
$link-color: map-get($map, link-color);
$link-font-weight: map-get($map, link-font-weight);
$link-hover-bg: map-get($map, link-hover-bg);
$link-hover-color: map-get($map, link-hover-color);
$link-focus-bg: map-get($map, link-focus-bg);
$link-focus-color: map-get($map, link-focus-color);
$link-disabled-bg: setter(map-get($map, link-disabled-bg), transparent);
$link-disabled-color: setter(
map-get($map, link-disabled-color),
$nav-link-disabled-color
$enabled: setter(map-get($map, enabled), true);

$base: setter($map, ());
$base: map-merge(
$base,
(
background-color:
setter(map-get($map, bg), map-get($base, background-color)),
)
);
$link-disabled-opacity: map-get($map, link-disabled-opacity);
$link-active-bg: map-get($map, link-active-bg);
$link-active-color: map-get($map, link-active-color);
$link-active-font-weight: map-get($map, link-active-font-weight);

background-color: $bg;
$nav-link: setter(map-get($map, nav-link), ());

.nav-btn.btn-unstyled,
.nav-link {
background-color: $link-bg;
$nav-link-hover: setter(map-get($nav-link, hover), ());
$nav-link-hover: map-merge(
$nav-link-hover,
(
background-color:
setter(
map-get($map, link-hover-bg),
map-get($nav-link-hover, background-color)
),
color:
setter(
map-get($map, link-hover-color),
map-get($nav-link-hover, color)
),
)
);

@include border-radius($link-border-radius);
$nav-link-focus: setter(map-get($nav-link, focus), ());
$nav-link-focus: map-merge(
$nav-link-focus,
(
background-color:
setter(
map-get($map, link-focus-bg),
map-get($nav-link-focus, background-color)
),
color:
setter(
map-get($map, link-focus-color),
map-get($nav-link-focus, color)
),
)
);

color: $link-color;
font-weight: $link-font-weight;
$nav-link-active-class: setter(map-get($nav-link, active-class), ());
$nav-link-active-class: map-merge(
$nav-link-active-class,
(
background-color:
setter(
map-get($map, link-active-bg),
map-get($nav-link-active-class, background-color)
),
color:
setter(
map-get($map, link-active-color),
map-get($nav-link-active-class, color)
),
font-weight:
setter(
map-get($map, link-active-font-weight),
map-get($nav-link-active-class, font-weight)
),
)
);

&:hover {
background-color: $link-hover-bg;
color: $link-hover-color;
}
$nav-link-disabled: setter(map-get($nav-link, disabled), ());
$nav-link-disabled: map-merge(
$nav-link-disabled,
(
background-color:
setter(
map-get($map, link-disabled-bg),
map-get($nav-link-disabled, background-color)
),
color:
setter(
map-get($map, link-disabled-color),
map-get($nav-link-disabled, color)
),
opacity:
setter(
map-get($map, link-disabled-opacity),
map-get($nav-link-disabled, opacity)
),
)
);

&:focus,
&.focus {
background-color: $link-focus-bg;
color: $link-focus-color;
}
$nav-link: map-deep-merge(
$nav-link,
(
background-color:
setter(
map-get($map, link-bg),
map-get($nav-link, background-color)
),
border-radius:
setter(
map-get($map, link-border-radius),
map-get($nav-link, border-radius)
),
color: setter(map-get($map, link-color), map-get($nav-link, color)),
font-weight:
setter(
map-get($map, link-font-weight),
map-get($nav-link, font-weight)
),
hover: $nav-link-hover,
focus: $nav-link-focus,
active-class: $nav-link-active-class,
disabled: $nav-link-disabled,
)
);

&:disabled,
&.disabled {
background-color: $link-disabled-bg;
color: $link-disabled-color;
opacity: $link-disabled-opacity;
}
@if ($enabled) {
@include clay-css($base);

&.active {
background-color: $link-active-bg;
color: $link-active-color;
font-weight: $link-active-font-weight;
.nav-btn.btn-unstyled,
.nav-link {
@include clay-link($nav-link);
}
}
}

0 comments on commit 3fa114a

Please sign in to comment.