Skip to content

Commit

Permalink
fix: generate missing hover/focus classes (#522)
Browse files Browse the repository at this point in the history
  • Loading branch information
@braddialpad
braddialpad authored Dec 17, 2021
1 parent c02569d commit 0cc761b
Show file tree
Hide file tree
Showing 5 changed files with 96 additions and 17 deletions.
32 changes: 32 additions & 0 deletions docs/utilities/effects/box-shadow.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,3 +96,35 @@
</footer>
</aside>
</section>
<section class="d-stack16">
<header class="d-stack2">
{% header "h2", "Hover" %}
{% paragraph %}Use {% code %}h:d-bs-{n}{% endcode %} to change an element's {% code %}:hover{% endcode %} state box shadow.{% endparagraph %}
</header>
<aside class="d-bar8 d-of-hidden">
<header class="d-fl-center d-p24 d-bgc-purple-100 d-bgo50 d-w100p d-hmn102">
<div class="d-fl-center d-p16 d-bar8 d-bgc-white d-fs18 d-fw-bold d-bs-none h:d-bs-lg">Hover over me</div>
</header>
<footer class="d-p8 d-bgc-black-700 d-bbr8 d-fs12">
{% highlight html linenos %}
<div class="d-bs-none h:d-bs-lg">Hover over me</div>
{% endhighlight %}
</footer>
</aside>
</section>
<section class="d-stack16">
<header class="d-stack2">
{% header "h2", "Focus" %}
{% paragraph %}Use {% code %}f:d-bs-{n}{% endcode %} to change an element's {% code %}:focus{% endcode %} and {% code %}:focus-within{% endcode %} state box shadow.{% endparagraph %}
</header>
<aside class="d-bar8 d-of-hidden">
<header class="d-fl-center d-p24 d-bgc-pink-100 d-bgo50 d-w100p d-hmn102">
<div tabindex="0" class="d-fl-center d-p16 d-bar8 d-bgc-white d-fs18 d-fw-bold d-bs-none f:d-bs-lg">Click on me</div>
</header>
<footer class="d-p8 d-bgc-black-700 d-bbr8 d-fs12">
{% highlight html linenos %}
<div tabindex="0" class="d-bs-none f:d-bs-lg">Click on me</div>
{% endhighlight %}
</footer>
</aside>
</section>
2 changes: 2 additions & 0 deletions lib/build/less/utilities/backgrounds.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,9 @@
.d-bgg-radial { background-image: radial-gradient(var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
.d-bgg-conic { background-image: conic-gradient(var(--bgg-from) 0%, var(--bgg-to) 100%) !important; }
.d-bgg-none { background-image: none !important; }
#d-internals #generate-hover-focus(d-bgg-none, {.d-bgg-none();});
.d-bgg-unset { background-image: unset !important; }
#d-internals #generate-hover-focus(d-bgg-unset, {.d-bgg-unset();});


// ============================================================================
Expand Down
49 changes: 32 additions & 17 deletions lib/build/less/utilities/colors.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,70 +38,85 @@
#d-internals #color-classes(green-700);
#d-internals #color-classes(red-700);

// -- We can't use the mixin for this one class :(
.d-fc-primary,
.h\:d-fc-primary:hover,
.f\:d-fc-primary:focus {
.d-fc-primary {
color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l) ~' / ' var(--fco)) !important;
}

.f\:d-fc-primary:focus-within {
color: hsla(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l) ~' / ' var(--fco)) !important;
}
#d-internals #generate-hover-focus(d-fc-primary, {.d-fc-primary();});

// $$ TEXT COLORS
// ----------------------------------------------------------------------------
.d-fc-dark { &:extend(.d-fc-black-900); }
.h\:d-fc-dark:hover { &:extend(.h\:d-fc-black-900:hover); }
.f\:d-fc-dark:focus { &:extend(.f\:d-fc-black-900:focus); }
.f\:d-fc-dark:focus-within { &:extend(.f\:d-fc-black-900:focus-within); }
#d-internals #generate-hover-focus(d-fc-dark, {.d-fc-dark();});

.d-fc-medium { &:extend(.d-fc-black-800); }
.h\:d-fc-medium:hover { &:extend(.h\:d-fc-black-800:hover); }
.f\:d-fc-medium:focus { &:extend(.f\:d-fc-black-800:focus); }
.f\:d-fc-medium:focus-within { &:extend(.f\:d-fc-black-800:focus-within); }
#d-internals #generate-hover-focus(d-fc-medium, {.d-fc-medium();});

.d-fc-light { &:extend(.d-fc-black-700); }
.h\:d-fc-light:hover { &:extend(.h\:d-fc-black-700:hover); }
.f\:d-fc-light:focus { &:extend(.f\:d-fc-black-700:focus); }
.f\:d-fc-light:focus-within { &:extend(.f\:d-fc-black-700:focus-within); }
#d-internals #generate-hover-focus(d-fc-light, {.d-fc-light();});

.d-fc-lighter { &:extend(.d-fc-black-600); }
#d-internals #generate-hover-focus(d-fc-lighter, {.d-fc-lighter();});

.d-fc-purple { &:extend(.d-fc-purple-500); }
#d-internals #generate-hover-focus(d-fc-purple, {.d-fc-purple();});

.d-fc-orange { &:extend(.d-fc-orange-600); }
#d-internals #generate-hover-focus(d-fc-orange, {.d-fc-orange();});

.d-fc-pink { &:extend(.d-fc-pink-600); }
#d-internals #generate-hover-focus(d-fc-pink, {.d-fc-pink();});

.d-fc-green,
.d-fc-success { &:extend(.d-fc-green-600); }
#d-internals #generate-hover-focus(d-fc-green, {.d-fc-green();});
#d-internals #generate-hover-focus(d-fc-success, {.d-fc-success();});

.d-fc-yellow,
.d-fc-warning { &:extend(.d-fc-yellow-600); }
#d-internals #generate-hover-focus(d-fc-yellow, {.d-fc-yellow();});
#d-internals #generate-hover-focus(d-fc-warning, {.d-fc-warning();});

.d-fc-red,
.d-fc-error,
.d-fc-danger { &:extend(.d-fc-red-600); }
#d-internals #generate-hover-focus(d-fc-red, {.d-fc-red();});
#d-internals #generate-hover-focus(d-fc-error, {.d-fc-error();});
#d-internals #generate-hover-focus(d-fc-danger, {.d-fc-danger();});

.d-fc-current { color: currentColor !important; }
#d-internals #generate-hover-focus(d-fc-current, {.d-fc-current();});
.d-fc-transparent { color: transparent !important; }
#d-internals #generate-hover-focus(d-fc-transparent, {.d-fc-transparent();});
.d-fc-unset { color: unset !important; }
#d-internals #generate-hover-focus(d-fc-unset, {.d-fc-unset();});


// $$ BACKGROUND COLORS
// ----------------------------------------------------------------------------
.d-bgc-success { &:extend(.d-bgc-green-500); }
#d-internals #generate-hover-focus(d-bgc-success, {.d-bgc-success();});
.d-bgc-warning { &:extend(.d-bgc-yellow-500); }
#d-internals #generate-hover-focus(d-bgc-warning, {.d-bgc-warning();});

.d-bgc-error,
.d-bgc-danger { &:extend(.d-bgc-red-500); }
#d-internals #generate-hover-focus(d-bgc-error, {.d-bgc-error();});
#d-internals #generate-hover-focus(d-bgc-danger, {.d-bgc-danger();});

.d-bgc-transparent { background-color: transparent !important; background-image: none !important; }
#d-internals #generate-hover-focus(d-bgc-transparent, {.d-bgc-transparent();});
.d-bgc-unset { background-color: unset !important; background-image: unset !important; }
#d-internals #generate-hover-focus(d-bgc-unset, {.d-bgc-unset();});


// $$ BORDER COLORS
// ----------------------------------------------------------------------------
.d-bc-transparent { border-color: transparent !important; }
#d-internals #generate-hover-focus(d-bc-transparent, {.d-bc-transparent();});
.d-bc-current { border-color: currentColor !important; }
#d-internals #generate-hover-focus(d-bc-current , {.d-bc-current();});
.d-bc-unset { border-color: unset !important; }
#d-internals #generate-hover-focus(d-bc-unset, {.d-bc-unset();});


// $ OPACITY CLASSES
Expand Down
7 changes: 7 additions & 0 deletions lib/build/less/utilities/effects.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,12 +142,19 @@
// $ BOX SHADOW
// ----------------------------------------------------------------------------
.d-bs-sm { box-shadow: var(--bs-sm) !important; }
#d-internals #generate-hover-focus(d-bs-sm, {.d-bs-sm();});
.d-bs-md { box-shadow: var(--bs-md) !important; }
#d-internals #generate-hover-focus(d-bs-md, {.d-bs-md ();});
.d-bs-lg { box-shadow: var(--bs-lg) !important; }
#d-internals #generate-hover-focus(d-bs-lg, {.d-bs-lg();});
.d-bs-xl { box-shadow: var(--bs-xl) !important; }
#d-internals #generate-hover-focus(d-bs-xl, {.d-bs-xl();});
.d-bs-card { box-shadow: var(--bs-card) !important; }
#d-internals #generate-hover-focus(d-bs-card, {.d-bs-card();});
.d-bs-none { box-shadow: none !important; }
#d-internals #generate-hover-focus(d-bs-none, {.d-bs-none();});
.d-bs-unset { box-shadow: unset !important; }
#d-internals #generate-hover-focus(d-bs-unset, {.d-bs-unset();});


// ============================================================================
Expand Down
23 changes: 23 additions & 0 deletions lib/build/less/utilities/internals.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,29 @@
#d-internals #color-classes(~'@{color}-100');
}

// ========================================================================
// $ HOVER / FOCUS GENERATOR
// Pass a class name and mixin with the properties to copy into this function
// to generate hover / focus copies of it prefixed with h: and f:.
// Many of the class generators in this file will already do this,
// so this mixin is meant more for one off exceptions.
//
// USAGE:
// #d-internals #generate-hover-focus(d-bgc-transparent, {.d-bgc-transparent();});
//
// ------------------------------------------------------------------------
#generate-hover-focus(@className, @mixin) {
.h\:@{className}:hover {
@mixin();
}
.f\:@{className}:focus {
@mixin();
}
.f\:@{className}:focus-within {
@mixin();
}
}

// ========================================================================
// $ OPACITY CLASS GENERATOR
// Creates opacity classes for font, background, and border colors.
Expand Down

0 comments on commit 0cc761b

Please sign in to comment.