Skip to content

Commit

Permalink
feat(@clayui/css): Cadmin Dropdowns convert .dropdown-toggle, `.dro…
Browse files Browse the repository at this point in the history 
…pdown-subheader`, `.dropdown-caption`, `.dropdown-item-text`, `.dropdown-section`, `.dropdown-divider`, `.dropdown-action`, and dropdown-menu positional utilities to use Sass maps instead of variables
  • Loading branch information
@pat270
pat270 committed Nov 1, 2021
1 parent 0cb1ce7 commit 1f11eba
Show file tree
Hide file tree
Showing 2 changed files with 466 additions and 232 deletions.
226 changes: 65 additions & 161 deletions packages/clay-css/src/scss/cadmin/components/_dropdowns.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,58 +3,37 @@
}

.dropdown-toggle {
white-space: nowrap;
@include clay-button-variant($cadmin-dropdown-toggle);
}

.dropdown-header {
color: $cadmin-dropdown-header-color;
display: block;
font-size: $cadmin-dropdown-header-font-size;
margin-bottom: $cadmin-dropdown-header-margin-bottom;
margin-top: $cadmin-dropdown-header-margin-top;
padding-bottom: $cadmin-dropdown-header-padding-y;
padding-left: $cadmin-dropdown-header-padding-x;
padding-right: $cadmin-dropdown-header-padding-x;
padding-top: $cadmin-dropdown-header-padding-y;
position: relative;
text-transform: $cadmin-dropdown-header-text-transform;
word-wrap: break-word;
@include clay-css($cadmin-dropdown-header);

@include clay-scale-component {
font-size: $cadmin-dropdown-header-font-size-mobile;
@include media-breakpoint-down(
map-get($cadmin-dropdown-header, breakpoint-down)
) {
@include clay-css(setter(map-get($cadmin-dropdown-header, mobile), ()));
}

&:first-child {
margin-top: 0;
@include clay-css(
setter(map-get($cadmin-dropdown-header, first-child), ())
);
}
}

.dropdown-subheader {
color: $cadmin-dropdown-subheader-color;
font-size: $cadmin-dropdown-subheader-font-size;
font-weight: $cadmin-dropdown-subheader-font-weight;
margin-bottom: $cadmin-dropdown-subheader-margin-bottom;
margin-top: $cadmin-dropdown-subheader-margin-top;
padding-bottom: $cadmin-dropdown-subheader-padding-y;
padding-left: $cadmin-dropdown-subheader-padding-x;
padding-right: $cadmin-dropdown-subheader-padding-x;
padding-top: $cadmin-dropdown-subheader-padding-y;
text-transform: $cadmin-dropdown-subheader-text-transform;
white-space: normal;
word-wrap: break-word;
@include clay-css($cadmin-dropdown-subheader);

&:first-child {
margin-top: 0;
@include clay-css(
setter(map-get($cadmin-dropdown-subheader, first-child), ())
);
}
}

.dropdown-caption {
color: $cadmin-dropdown-caption-color;
font-size: $cadmin-dropdown-caption-font-size;
font-weight: $cadmin-dropdown-caption-font-weight;
padding: $cadmin-dropdown-item-padding-y $cadmin-dropdown-item-padding-x;
white-space: normal;
word-wrap: break-word;
@include clay-css($cadmin-dropdown-caption);
}

.dropdown-item {
Expand All @@ -74,39 +53,57 @@
// Dropdown Item Text

.dropdown-item-text {
color: map-get($cadmin-dropdown-item-base, color);
display: map-get($cadmin-dropdown-item-base, display);
font-weight: map-get($cadmin-dropdown-item-base, font-weight);
padding: map-get($cadmin-dropdown-item-base, padding);
padding-bottom: map-get($cadmin-dropdown-item-base, padding-bottom);
padding-left: map-get($cadmin-dropdown-item-base, padding-left);
padding-right: map-get($cadmin-dropdown-item-base, padding-right);
padding-top: map-get($cadmin-dropdown-item-base, padding-top);
@include clay-css($cadmin-dropdown-item-text);
}

.dropdown-section {
padding: $cadmin-dropdown-item-padding-y $cadmin-dropdown-item-padding-x;
@include clay-css($cadmin-dropdown-section);

.form-group + .form-group {
margin-top: $cadmin-dropdown-item-padding-y * 2;
@include clay-css(
setter(
map-deep-get($cadmin-dropdown-section, form-group, form-group),
()
)
);
}

.custom-control {
@include clay-css($cadmin-dropdown-section-custom-control);
@include clay-css(
setter(map-get($cadmin-dropdown-section, custom-control), ())
);
}

.custom-control-label {
@include clay-css($cadmin-dropdown-section-custom-control-label);
@include clay-css(
setter(map-get($cadmin-dropdown-section, custom-control-label), ())
);
}

.custom-control-label-text {
@include clay-css($cadmin-dropdown-section-custom-control-label-text);
@include clay-css(
setter(
map-get($cadmin-dropdown-section, custom-control-label-text),
()
)
);
}

&.active {
@include clay-css(
setter(map-get($cadmin-dropdown-section, active), ())
);

.custom-control-label {
@include clay-css(
$cadmin-dropdown-section-active-custom-control-label
setter(
map-deep-get(
$cadmin-dropdown-section,
active,
custom-control-label
),
()
)
);
}
}
Expand Down Expand Up @@ -214,47 +211,18 @@
// Dropdown Divider

.dropdown-divider {
border-top: 1px solid $cadmin-dropdown-divider-bg;
height: 0;
margin: $cadmin-dropdown-divider-margin-y 0;
overflow: hidden;
@include clay-css($cadmin-dropdown-divider);
}

// Dropdown Action

.dropdown-action {
display: inline-block;
font-size: $cadmin-dropdown-action-toggle-font-size;
vertical-align: middle;
@include clay-css($cadmin-dropdown-action);

> .dropdown-toggle {
align-items: center;

@include border-radius($cadmin-dropdown-action-toggle-border-radius);

cursor: $cadmin-btn-cursor;
display: flex;

@include clay-monospace($cadmin-dropdown-action-toggle-size);

font-size: inherit;
font-weight: inherit;
justify-content: center;
line-height: inherit;
padding: 0;
text-transform: inherit;
vertical-align: baseline;

&:disabled,
&.disabled {
cursor: $cadmin-dropdown-action-toggle-disabled-cursor;
opacity: $cadmin-dropdown-action-toggle-disabled-opacity;
}

.inline-item .lexicon-icon,
.lexicon-icon {
margin-top: 0;
}
@include clay-button-variant(
setter(map-get($cadmin-dropdown-action, dropdown-toggle), ())
);
}
}

Expand Down Expand Up @@ -351,120 +319,56 @@

.dropdown-menu-top,
&.dropdown-menu-top {
bottom: 100% !important;
left: 0 !important;
margin-top: 0;
margin-bottom: $cadmin-dropdown-spacer;
right: auto !important;
top: auto !important;
transform: none !important;
will-change: auto !important;
@include clay-dropdown-menu-variant($cadmin-dropdown-menu-top);
}

.dropdown-menu-top-right,
&.dropdown-menu-top-right {
bottom: 100% !important;
left: auto !important;
margin-top: 0;
margin-bottom: $cadmin-dropdown-spacer;
right: 0 !important;
top: auto !important;
transform: none !important;
will-change: auto !important;
@include clay-dropdown-menu-variant($cadmin-dropdown-menu-top-right);
}

.dropdown-menu-top-center,
&.dropdown-menu-top-center {
bottom: 100% !important;
left: 50% !important;
margin-top: 0;
margin-bottom: $cadmin-dropdown-spacer;
right: auto !important;
top: auto !important;
transform: translateX(-50%) !important;
will-change: auto !important;
@include clay-dropdown-menu-variant($cadmin-dropdown-menu-top-center);
}

.dropdown-menu-center,
&.dropdown-menu-center {
bottom: auto !important;
left: 50% !important;
right: auto !important;
top: 100% !important;
transform: translateX(-50%) !important;
will-change: auto !important;
@include clay-dropdown-menu-variant($cadmin-dropdown-menu-center);
}

.dropdown-menu-left-side,
&.dropdown-menu-left-side {
bottom: auto !important;
left: auto !important;
margin-right: $cadmin-dropdown-spacer;
margin-top: 0;
right: 100% !important;
top: 0 !important;
transform: none !important;
will-change: auto !important;
@include clay-dropdown-menu-variant($cadmin-dropdown-menu-left-side);
}

.dropdown-menu-left-side-bottom,
&.dropdown-menu-left-side-bottom {
bottom: 0 !important;
left: auto !important;
margin-right: $cadmin-dropdown-spacer;
margin-top: 0;
right: 100% !important;
top: auto !important;
transform: none !important;
will-change: auto !important;
@include clay-dropdown-menu-variant($cadmin-dropdown-menu-left-side-bottom);
}

.dropdown-menu-left-side-middle,
&.dropdown-menu-left-side-middle {
bottom: auto !important;
left: auto !important;
margin-right: $cadmin-dropdown-spacer;
margin-top: 0;
right: 100% !important;
top: 50% !important;
transform: translate(0, -50%) !important;
will-change: auto !important;
@include clay-dropdown-menu-variant($cadmin-dropdown-menu-left-side-middle);
}

.dropdown-menu-right-side,
&.dropdown-menu-right-side {
bottom: auto !important;
left: 100% !important;
margin-left: $cadmin-dropdown-spacer;
margin-top: 0;
right: auto !important;
top: 0 !important;
transform: none !important;
will-change: auto !important;
@include clay-dropdown-menu-variant($cadmin-dropdown-menu-right-side);
}

.dropdown-menu-right-side-bottom,
&.dropdown-menu-right-side-bottom {
bottom: 0 !important;
left: 100% !important;
margin-left: $cadmin-dropdown-spacer;
margin-top: 0;
right: auto !important;
top: auto !important;
transform: none !important;
will-change: auto !important;
@include clay-dropdown-menu-variant(
$cadmin-dropdown-menu-right-side-bottom
);
}

.dropdown-menu-right-side-middle,
&.dropdown-menu-right-side-middle {
bottom: auto !important;
left: 100% !important;
margin-left: $cadmin-dropdown-spacer;
margin-top: 0;
right: auto !important;
top: 50% !important;
transform: translate(0, -50%) !important;
will-change: auto !important;
@include clay-dropdown-menu-variant(
$cadmin-dropdown-menu-right-side-middle
);
}

// Dropdown wide / full
Expand Down
Loading

0 comments on commit 1f11eba

Please sign in to comment.