elements be stylized, same as the :hover state (`true`/`false`).
+// Check the `_contextual_mixins.scss` file to find this module's mixins.
+@import 'contextual_mixins';
// Default styling for mark. Use mixins for alternate styles.
mark {
@if $mark-back-color != $back-color {
@@ -127,12 +128,24 @@ mark {
&.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
top: 75%;
}
- &:hover, &:active, &:focus {
- &:before, &:after {
- opacity: 1;
- clip: auto;
- -webkit-clip-path: inset(0%);
- clip-path: inset(0%);
+ @if $style-link-active-state {
+ &:hover, &:focus, &:active {
+ &:before, &:after {
+ opacity: 1;
+ clip: auto;
+ -webkit-clip-path: inset(0%);
+ clip-path: inset(0%);
+ }
+ }
+ }
+ @else {
+ &:hover, &:focus {
+ &:before, &:after {
+ opacity: 1;
+ clip: auto;
+ -webkit-clip-path: inset(0%);
+ clip-path: inset(0%);
+ }
}
}
&:before { // This is the little tooltip triangle
diff --git a/src/mini/_core.scss b/src/mini/_core.scss
index d502089..18c421a 100644
--- a/src/mini/_core.scss
+++ b/src/mini/_core.scss
@@ -9,6 +9,7 @@ $horizontal-rule-fancy-style: false !default; // Should a fancy styling be ap
$add-pre-element-sidebar: false !default; // Should a fancy sidebar be added to the left side of (`true`/`false`).
$apply-link-underline: true !default; // Should an underline be applied to all elements? (`true`/`false`).
$apply-link-hover-fade: true !default; // Should the :hover and :focus state of elements use fade-out instead of a different color (`true`/`false`).
+$style-link-active-state: false !default; // [Hidden flag] Should the :active state of elements be stylized, same as the :hover state (`true`/`false`).
html {
font-size: $base-root-font-size; // Set root's font sizing.
@@ -401,13 +402,27 @@ a{
color: $link-visited-fore-color;
}
@if $apply-link-hover-fade {
- &:hover, &:focus, &:active {
- opacity: 0.75;
+ @if $style-link-active-state {
+ &:hover, &:focus, &:active {
+ opacity: 0.75;
+ }
+ }
+ @else {
+ &:hover, &:focus {
+ opacity: 0.75;
+ }
}
}
@else {
- &:hover, &:focus, &:active {
- color: $link-hover-fore-color;
+ @if $style-link-active-state {
+ &:hover, &:focus, &:active {
+ color: $link-hover-fore-color;
+ }
+ }
+ @else {
+ &:hover, &:focus {
+ color: $link-hover-fore-color;
+ }
}
}
}
diff --git a/src/mini/_input_control.scss b/src/mini/_input_control.scss
index 145b85b..5c85c69 100644
--- a/src/mini/_input_control.scss
+++ b/src/mini/_input_control.scss
@@ -1,8 +1,6 @@
/*
Definitions for forms and input elements.
*/
-// Check the `_input_control_mixins.scss` file to find this module's mixins.
-@import 'input_control_mixins';
// Different elements are styled based on the same set of rules.
$input-group-name: 'input-group' !default; // Class name for input groups.
$include-fluid-input-group: true !default; // Should fluid input groups be included? (`true`/`false`)
@@ -21,6 +19,9 @@ $back-color: white !default; // [External variable - core] Background
$fore-color: black !default; // [External variable - core] Foreground color for everything.
// Policy for below external flag is `ALWAYS_TRUE`. This is done due to links being underlined by default.
$apply-link-underline: true !default; // [External flag - core] Should underlining be applied to elements? (`true`/`false`)
+$style-link-active-state: false !default; // [External flag - core] Should the :active state of elements be stylized, same as the :hover state (`true`/`false`).
+// Check the `_input_control_mixins.scss` file to find this module's mixins.
+@import 'input_control_mixins';
// Base form styling.
form {
@if $form-back-color != $back-color {
@@ -254,7 +255,7 @@ a[role="button"], label[role="button"], [role="button"] {
}
transition: background 0.3s;
cursor: pointer;
- &:hover, &:active, &:focus {
+ &:hover, &:focus {
background: rgba($button-back-color, $button-hover-back-opacity);
@if $apply-link-hover-fade { // Override for links if hover-fade is enabled.
opacity: 1;
@@ -265,6 +266,14 @@ a[role="button"], label[role="button"], [role="button"] {
opacity: $button-disabled-opacity;
}
}
+@if $style-link-active-state {
+ a.#{$button-class-name}:active, a[role="button"]:active {
+ background: rgba($button-back-color, $button-hover-back-opacity);
+ @if $apply-link-hover-fade { // Override for links if hover-fade is enabled.
+ opacity: 1;
+ }
+ }
+}
// Styling for file inputs
@if $hide-file-inputs {
input[type="file"] { // Hide, use labels instead. Hidden inputs like this are still accessible.
@@ -389,8 +398,8 @@ a[role="button"], label[role="button"], [role="button"] {
color: $checkbox-fore-color;
margin-left: -($checkbox-size + ($checkbox-size * 0.25));
}
- // Hover, focus, active styling.
- &:hover, &:active, &:focus {
+ // Hover, focus styling.
+ &:hover, &:focus {
&:before {
border-color: $checkbox-focus-border-color;
}
diff --git a/src/mini/_input_control_mixins.scss b/src/mini/_input_control_mixins.scss
index 8fdc2dd..42a3cee 100644
--- a/src/mini/_input_control_mixins.scss
+++ b/src/mini/_input_control_mixins.scss
@@ -19,7 +19,12 @@
@if $button-alt-fore-color != $button-fore-color {
color: $button-alt-fore-color;
}
- &:hover, &:active, &:focus {
+ &:hover, &:focus {
+ background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
+ }
+ }
+ @if $style-link-active-state {
+ a.#{$button-class-name}.#{$button-alt-name}:active, a[role="button"].#{$button-alt-name}:active {
background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
}
}
diff --git a/src/mini/_navigation.scss b/src/mini/_navigation.scss
index a9f5946..8046130 100644
--- a/src/mini/_navigation.scss
+++ b/src/mini/_navigation.scss
@@ -19,6 +19,7 @@ $back-color: white !default; // [External variable - core] Background
$fore-color: black !default; // [External variable - core] Foreground color for everything.
// Policy for below external flag is `ALWAYS_TRUE`. This is done due to links being underlined by default and as a safeguard from ugly branding.
$apply-link-underline: true !default; // [External flag - core] Should underlining be applied to elements? (`true`/`false`)
+$style-link-active-state: false !default; // [External flag - core] Should the :active state of elements be stylized, same as the :hover state (`true`/`false`).
$button-class-name: 'button' !default; // [External variable - input_control] Name of the button-like element styling class.
$button-box-shadow:0 1px 3px rgba(0,0,0, 0.1) !default;// [External variable - input_control] Value of button's box-shadow.
$button-border-style: 1px solid transparent !default; // [External variable - input_control] Value of button's border-style.
@@ -79,8 +80,15 @@ header {
@if $header-link-margin != 0 {
margin: $header-link-margin;
}
- &:hover, &:active, &:focus {
- background: $header-link-hover-color;
+ @if $style-link-active-state {
+ &:hover, &:focus, &:active {
+ background: $header-link-hover-color;
+ }
+ }
+ @else {
+ &:hover, &:focus {
+ background: $header-link-hover-color;
+ }
}
@if $button-box-shadow != none { // Override for buttons when shadow is enabled.
box-shadow: none;
diff --git a/src/mini/_progress.scss b/src/mini/_progress.scss
index aa7f39e..9f037eb 100644
--- a/src/mini/_progress.scss
+++ b/src/mini/_progress.scss
@@ -1,13 +1,13 @@
/*
Definitions for progress elements and spinners.
*/
-// Check the `_progress_mixins.scss` file to find this module's mixins.
-@import 'progress_mixins';
// Progress elements use the progress element as their base.
$progress-max-value: 100 !default; // Arithmetic max value of