@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/button.scss

@@ -1,700 +0,0 @@
-// Name:            Button
-// Description:     Styles for buttons
-//
-// Component:       `uk-button`
-//
-// Sub-objects:     `uk-button-group`
-//
-// Modifiers:       `uk-button-default`
-//                  `uk-button-primary`
-//                  `uk-button-secondary`
-//                  `uk-button-tertiary`
-//                  `uk-button-danger`
-//                  `uk-button-text`
-//                  `uk-button-link`
-//                  `uk-button-xsmall`
-//                  `uk-button-small`
-//                  `uk-button-medium`
-//                  `uk-button-large`
-//                  `uk-button-xlarge`
-//                  `uk-button-circle`
-//                  `uk-button-round`
-//                  `uk-button-ghost`
-//
-// States:          `uk-active`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Button
- ========================================================================== */
-
-/*
- * 1. Remove margins in Chrome, Safari and Opera.
- * 2. Remove borders for `button`.
- * 3. Address `overflow` set to `hidden` in IE.
- * 4. Correct `font` properties and `color` not being inherited for `button`.
- * 5. Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 6. Remove default style for `input type="submit"`in iOS.
- * 7. Style
- * 8. `line-height` is used to create a height because it also centers the text vertically for `a` elements.
- *    Better would be to use height and flexbox to center the text vertically but flexbox doesn't work in Firefox on `button` elements.
- * 9. Align text if button has a width
- * 10. Required for `a`.
- */
-
-.uk-button {
-    -webkit-appearance: none; /* 6 */
-    appearance: none; /* 6 */
-    border: none; /* 2 */
-    border-radius: 0;
-    box-sizing: border-box;
-    color: inherit;
-    display: inline-block; /* 7 */
-    font: inherit; /* 4 */
-    font-size: var(--button-font-size); /* 7 */
-    line-height: var(--button-line-height); /* 8 */
-    margin: 0; /* 1 */
-    overflow: visible; /* 3 */
-    padding: 0 var(--button-padding-horizontal); /* 7 */
-    text-align: center; /* 9 */
-    text-decoration: none; /* 10 */
-    text-transform: none; /* 5 */
-    vertical-align: middle; /* 7 */
-    @if meta.mixin-exists('hook-button') {
-        @include hook-button;
-    }
-}
-
-.uk-button:not(:disabled) { cursor: pointer; }
-
-/*
- * Remove the inner border and padding in Firefox.
- */
-
-.uk-button::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-}
-
-/* Hover */
-.uk-button:hover {
-    /* 9 */
-    text-decoration: none;
-    @if meta.mixin-exists('hook-button-hover') {
-        @include hook-button-hover;
-    }
-}
-
-/* OnClick + Active */
-.uk-button:active,
-.uk-button.uk-active {
-    @if meta.mixin-exists('hook-button-active') {
-        @include hook-button-active;
-    }
-}
-
-
-/* Style modifiers
- ========================================================================== */
-
-/*
- * Default
- */
-
-.uk-button-default {
-    background-color: var(--button-default-background);
-    color: var(--button-default-color);
-    @if meta.mixin-exists('hook-button-default') {
-        @include hook-button-default;
-    }
-}
-
-/* Hover */
-.uk-button-default:hover {
-    background-color: var(--button-default-hover-background);
-    color: var(--button-default-hover-color);
-    @if meta.mixin-exists('hook-button-default-hover') {
-        @include hook-button-default-hover;
-    }
-}
-
-/* OnClick + Active */
-.uk-button-default:active,
-.uk-button-default.uk-active {
-    background-color: var(--button-default-active-background);
-    color: var(--button-default-active-color);
-    @if meta.mixin-exists('hook-button-default-active') {
-        @include hook-button-default-active;
-    }
-}
-
-/*
- * Primary
- */
-
-.uk-button-primary {
-    background-color: var(--button-primary-background);
-    color: var(--button-primary-color);
-    @if meta.mixin-exists('hook-button-primary') {
-        @include hook-button-primary;
-    }
-}
-
-/* Hover */
-.uk-button-primary:hover {
-    background-color: var(--button-primary-hover-background);
-    color: var(--button-primary-hover-color);
-    @if meta.mixin-exists('hook-button-primary-hover') {
-        @include hook-button-primary-hover;
-    }
-}
-
-/* OnClick + Active */
-.uk-button-primary:active,
-.uk-button-primary.uk-active {
-    background-color: var(--button-primary-active-background);
-    color: var(--button-primary-active-color);
-    @if meta.mixin-exists('hook-button-primary-active') {
-        @include hook-button-primary-active;
-    }
-}
-
-/*
- * Secondary
- */
-
-.uk-button-secondary {
-    background-color: var(--button-secondary-background);
-    color: var(--button-secondary-color);
-    @if meta.mixin-exists('hook-button-secondary') {
-        @include hook-button-secondary;
-    }
-}
-
-/* Hover */
-.uk-button-secondary:hover {
-    background-color: var(--button-secondary-hover-background);
-    color: var(--button-secondary-hover-color);
-    @if meta.mixin-exists('hook-button-secondary-hover') {
-        @include hook-button-secondary-hover;
-    }
-}
-
-/* OnClick + Active */
-.uk-button-secondary:active,
-.uk-button-secondary.uk-active {
-    background-color: var(--button-secondary-active-background);
-    color: var(--button-secondary-active-color);
-    @if meta.mixin-exists('hook-button-secondary-active') {
-        @include hook-button-secondary-active;
-    }
-}
-
-/*
- * Tertiary
- */
-
-.uk-button-tertiary {
-    background-color: var(--button-tertiary-background);
-    color: var(--button-tertiary-color);
-    @if meta.mixin-exists('hook-button-tertiary') {
-        @include hook-button-tertiary;
-    }
-}
-
-/* Hover */
-.uk-button-tertiary:hover {
-    background-color: var(--button-tertiary-hover-background);
-    color: var(--button-tertiary-hover-color);
-    @if meta.mixin-exists('hook-button-tertiary-hover') {
-        @include hook-button-tertiary-hover;
-    }
-}
-
-/* OnClick + Active */
-.uk-button-tertiary:active,
-.uk-button-tertiary.uk-active {
-    background-color: var(--button-tertiary-active-background);
-    color: var(--button-tertiary-active-color);
-    @if meta.mixin-exists('hook-button-tertiary-active') {
-        @include hook-button-tertiary-active;
-    }
-}
-
-/*
- * Danger
- */
-
-.uk-button-danger {
-    background-color: var(--button-danger-background);
-    color: var(--button-danger-color);
-    @if meta.mixin-exists('hook-button-danger') {
-        @include hook-button-danger;
-    }
-}
-
-/* Hover */
-.uk-button-danger:hover {
-    background-color: var(--button-danger-hover-background);
-    color: var(--button-danger-hover-color);
-    @if meta.mixin-exists('hook-button-danger-hover') {
-        @include hook-button-danger-hover;
-    }
-}
-
-/* OnClick + Active */
-.uk-button-danger:active,
-.uk-button-danger.uk-active {
-    background-color: var(--button-danger-active-background);
-    color: var(--button-danger-active-color);
-    @if meta.mixin-exists('hook-button-danger-active') {
-        @include hook-button-danger-active;
-    }
-}
-
-/*
- * Disabled
- * The same for all style modifiers
- */
-
-@if $button-disabled-mode == same {
-    .uk-button-default:disabled,
-    .uk-button-primary:disabled,
-    .uk-button-secondary:disabled,
-    .uk-button-tertiary:disabled,
-    .uk-button-danger:disabled {
-        background-color: var(--button-disabled-background);
-        color: var(--button-disabled-color);
-        @if meta.mixin-exists('hook-button-disabled') {
-            @include hook-button-disabled;
-        }
-    }
-}
-
-@if $button-disabled-mode == separate {
-    .uk-button-default:disabled {
-        background-color: var(--button-default-disabled-background);
-        color: var(--button-default-disabled-color);
-        @if meta.mixin-exists('hook-button-default-disabled') {
-            @include hook-button-default-disabled;
-        }
-    }
-
-    .uk-button-primary:disabled {
-        background-color: var(--button-primary-disabled-background);
-        color: var(--button-primary-disabled-color);
-        @if meta.mixin-exists('hook-button-primary-disabled') {
-            @include hook-button-primary-disabled;
-        }
-    }
-
-    .uk-button-secondary:disabled {
-        background-color: var(--button-secondary-disabled-background);
-        color: var(--button-secondary-disabled-color);
-        @if meta.mixin-exists('hook-button-secondary-disabled') {
-            @include hook-button-secondary-disabled;
-        }
-    }
-
-    .uk-button-tertiary:disabled {
-        background-color: var(--button-tertiary-disabled-background);
-        color: var(--button-tertiary-disabled-color);
-        @if meta.mixin-exists('hook-button-tertiary-disabled') {
-            @include hook-button-tertiary-disabled;
-        }
-    }
-
-    .uk-button-danger:disabled {
-        background-color: var(--button-danger-disabled-background);
-        color: var(--button-danger-disabled-color);
-        @if meta.mixin-exists('hook-button-danger-disabled') {
-            @include hook-button-danger-disabled;
-        }
-    }
-}
-
-/* Size modifiers
- ========================================================================== */
-
-.uk-button-xsmall {
-    font-size: var(--button-xsmall-font-size);
-    line-height: var(--button-xsmall-line-height);
-    padding: 0 var(--button-xsmall-padding-horizontal);
-    @if meta.mixin-exists('hook-button-xsmall') {
-        @include hook-button-xsmall;
-    }
-}
-
-.uk-button-small {
-    font-size: var(--button-small-font-size);
-    line-height: var(--button-small-line-height);
-    padding: 0 var(--button-small-padding-horizontal);
-    @if meta.mixin-exists('hook-button-small') {
-        @include hook-button-small;
-    }
-}
-
-.uk-button-medium {
-    font-size: var(--button-medium-font-size);
-    line-height: var(--button-medium-line-height);
-    padding: 0 var(--button-medium-padding-horizontal);
-    @if meta.mixin-exists('hook-button-medium') {
-        @include hook-button-medium;
-    }
-}
-
-.uk-button-large {
-    font-size: var(--button-large-font-size);
-    line-height: var(--button-large-line-height);
-    padding: 0 var(--button-large-padding-horizontal);
-    @if meta.mixin-exists('hook-button-large') {
-        @include hook-button-large;
-    }
-}
-
-.uk-button-xlarge {
-    font-size: var(--button-xlarge-font-size);
-    line-height: var(--button-xlarge-line-height);
-    padding: 0 var(--button-xlarge-padding-horizontal);
-    @if meta.mixin-exists('hook-button-xlarge') {
-        @include hook-button-xlarge;
-    }
-}
-
-
-/* Text modifiers
- ========================================================================== */
-
-/*
- * Text
- * 1. Reset
- * 2. Style
- */
-
-.uk-button-text {
-    background: none; /* 1 */
-    color: var(--button-text-color); /* 2 */
-    line-height: var(--button-text-line-height); /* 1 */
-    padding: 0; /* 1 */
-    @if meta.mixin-exists('hook-button-text') {
-        @include hook-button-text;
-    }
-}
-
-/* Hover */
-.uk-button-text:hover {
-    color: var(--button-text-hover-color);
-    @if meta.mixin-exists('hook-button-text-hover') {
-        @include hook-button-text-hover;
-    }
-}
-
-/* Disabled */
-.uk-button-text:disabled {
-    color: var(--button-text-disabled-color);
-    @if meta.mixin-exists('hook-button-text-disabled') {
-        @include hook-button-text-disabled;
-    }
-}
-
-/*
- * Link
- * 1. Reset
- * 2. Style
- */
-
-.uk-button-link {
-    background: none; /* 1 */
-    color: var(--button-link-color); /* 2 */
-    line-height: var(--button-link-line-height); /* 1 */
-    padding: 0; /* 1 */
-    @if meta.mixin-exists('hook-button-link') {
-        @include hook-button-link;
-    }
-}
-
-/* Hover */
-.uk-button-link:hover {
-    color: var(--button-link-hover-color);
-    text-decoration: var(--button-link-hover-text-decoration);
-    @if meta.mixin-exists('hook-button-link-hover') {
-        @include hook-button-link-hover;
-    }
-}
-
-/* Disabled */
-.uk-button-link:disabled {
-    color: var(--button-link-disabled-color);
-    text-decoration: none;
-    @if meta.mixin-exists('hook-button-link-disabled') {
-        @include hook-button-link-disabled;
-    }
-}
-
-
-/* Ghost modifiers
- ========================================================================== */
-
-.uk-button.uk-button-ghost {
-    background-color: transparent;
-    border: var(--button-ghost-border-width) var(--button-ghost-border-style);
-}
-
-.uk-button-default.uk-button-ghost {
-    background-color: transparent;
-    border-color: var(--button-ghost-default-border);
-    color: var(--button-ghost-default-color);
-}
-
-.uk-button-default.uk-button-ghost:hover {
-    background-color: transparent;
-    border-color: var(--button-ghost-default-hover-border);
-}
-
-.uk-button-default.uk-button-ghost:active,
-.uk-button-default.uk-button-ghost.active {
-    background-color: transparent;
-    border-color: var(--button-ghost-default-active-border);
-}
-
-.uk-button-primary.uk-button-ghost {
-    background-color: transparent;
-    border-color: var(--button-ghost-primary-border);
-    color: var(--button-ghost-primary-color);
-}
-
-.uk-button-primary.uk-button-ghost:hover {
-    background-color: transparent;
-    border-color: var(--button-ghost-primary-hover-border);
-}
-
-.uk-button-primary.uk-button-ghost:active,
-.uk-button-primary.uk-button-ghost.active {
-    background-color: transparent;
-    border-color: var(--button-ghost-primary-active-border);
-}
-
-.uk-button-secondary.uk-button-ghost {
-    background-color: transparent;
-    border-color: var(--button-ghost-secondary-border);
-    color: var(--button-ghost-secondary-color);
-}
-
-.uk-button-secondary.uk-button-ghost:hover {
-    background-color: transparent;
-    border-color: var(--button-ghost-secondary-hover-border);
-}
-
-.uk-button-secondary.uk-button-ghost:active,
-.uk-button-secondary.uk-button-ghost.active {
-    background-color: transparent;
-    border-color: var(--button-ghost-secondary-active-border);
-}
-
-.uk-button-tertiary.uk-button-ghost {
-    background-color: transparent;
-    border-color: var(--button-ghost-tertiary-border);
-    color: var(--button-ghost-tertiary-color);
-}
-
-.uk-button-tertiary.uk-button-ghost:hover {
-    background-color: transparent;
-    border-color: var(--button-ghost-tertiary-hover-border);
-}
-
-.uk-button-tertiary.uk-button-ghost:active,
-.uk-button-tertiary.uk-button-ghost.active {
-    background-color: transparent;
-    border-color: var(--button-ghost-tertiary-active-border);
-}
-
-.uk-button-danger.uk-button-ghost {
-    background-color: transparent;
-    border-color: var(--button-ghost-danger-border);
-    color: var(--button-ghost-danger-color);
-}
-
-.uk-button-danger.uk-button-ghost:hover {
-    background-color: transparent;
-    border-color: var(--button-ghost-danger-hover-border);
-}
-
-.uk-button-danger.uk-button-ghost:active,
-.uk-button-danger.uk-button-ghost.active {
-    background-color: transparent;
-    border-color: var(--button-ghost-danger-active-border);
-}
-
-
-/* Shape modifiers
- ========================================================================== */
-
-.uk-button-circle {
-    border-radius: var(--button-circle-border-radius);
-}
-
-.uk-button-round {
-    border-radius: var(--button-round-border-radius);
-}
-
-
-/* Group
- ========================================================================== */
-
-/*
- * 1. Using `flex` instead of `inline-block` to prevent whitespace between child elements
- * 2. Behave like button
- * 3. Create position context
- */
-
-.uk-button-group {
-    display: inline-flex; /* 1 */
-    position: relative; /* 3 */
-    vertical-align: middle; /* 2 */
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-button-misc') {
-    @include hook-button-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --button-line-height: var(--global-control-height);
-    --button-xsmall-line-height: var(--global-control-xsmall-height);
-    --button-small-line-height: var(--global-control-small-height);
-    --button-medium-line-height: var(--global-control-medium-height);
-    --button-large-line-height: var(--global-control-large-height);
-    --button-xlarge-line-height: var(--global-control-xlarge-height);
-    --button-font-size: var(--global-font-size);
-    --button-xsmall-font-size: var(--global-2xsmall-font-size);
-    --button-small-font-size: var(--global-small-font-size);
-    --button-medium-font-size: var(--global-font-size);
-    --button-large-font-size: var(--global-medium-font-size);
-    --button-xlarge-font-size: var(--global-large-font-size);
-    --button-padding-horizontal: var(--global-gutter);
-    --button-xsmall-padding-horizontal: var(--global-xsmall-gutter);
-    --button-small-padding-horizontal: var(--global-small-gutter);
-    --button-medium-padding-horizontal: var(--global-gutter);
-    --button-large-padding-horizontal: var(--global-medium-gutter);
-    --button-xlarge-padding-horizontal: var(--global-large-gutter);
-    --button-default-background: var(--global-muted-background);
-    --button-default-color: var(--global-emphasis-color);
-    --button-default-hover-background: #{$button-default-hover-background};
-    --button-default-hover-color: var(--global-emphasis-color);
-    --button-default-active-background: #{$button-default-active-background};
-    --button-default-active-color: var(--global-emphasis-color);
-    --button-primary-background: var(--global-primary-background);
-    --button-primary-color: var(--global-inverse-color);
-    --button-primary-hover-background: #{$button-primary-hover-background};
-    --button-primary-hover-color: var(--global-inverse-color);
-    --button-primary-active-background: #{$button-primary-active-background};
-    --button-primary-active-color: var(--global-inverse-color);
-    --button-secondary-background: var(--global-secondary-background);
-    --button-secondary-color: var(--global-inverse-color);
-    --button-secondary-hover-background: #{$button-secondary-hover-background};
-    --button-secondary-hover-color: var(--global-inverse-color);
-    --button-secondary-active-background: #{$button-secondary-active-background};
-    --button-secondary-active-color: var(--global-inverse-color);
-    --button-tertiary-background: var(--global-tertiary-background);
-    --button-tertiary-color: var(--global-inverse-color);
-    --button-tertiary-hover-background: #{$button-tertiary-hover-background};
-    --button-tertiary-hover-color: var(--global-inverse-color);
-    --button-tertiary-active-background: #{$button-tertiary-active-background};
-    --button-tertiary-active-color: var(--global-inverse-color);
-    --button-danger-background: var(--global-danger-background);
-    --button-danger-color: var(--global-inverse-color);
-    --button-danger-hover-background: #{$button-danger-hover-background};
-    --button-danger-hover-color: var(--global-inverse-color);
-    --button-danger-active-background: #{$button-danger-active-background};
-    --button-danger-active-color: var(--global-inverse-color);
-    --button-ghost-border-width: var(--global-border-width);
-    --button-ghost-border-style: var(--global-border-style);
-    --button-ghost-default-color: var(--button-default-background);
-    --button-ghost-default-border: var(--button-default-background);
-    --button-ghost-default-hover-border: var(--button-default-hover-background);
-    --button-ghost-default-active-border: var(--button-default-active-background);
-    --button-ghost-primary-color: var(--button-primary-background);
-    --button-ghost-primary-border: var(--button-primary-background);
-    --button-ghost-primary-hover-border: var(--button-primary-hover-background);
-    --button-ghost-primary-active-border: var(--button-primary-active-background);
-    --button-ghost-secondary-color: var(--button-secondary-background);
-    --button-ghost-secondary-border: var(--button-secondary-background);
-    --button-ghost-secondary-hover-border: var(--button-secondary-hover-background);
-    --button-ghost-secondary-active-border: var(--button-secondary-active-background);
-    --button-ghost-tertiary-color: var(--button-tertiary-background);
-    --button-ghost-tertiary-border: var(--button-tertiary-background);
-    --button-ghost-tertiary-hover-border: var(--button-tertiary-hover-background);
-    --button-ghost-tertiary-active-border: var(--button-tertiary-active-background);
-    --button-ghost-danger-color: var(--button-danger-background);
-    --button-ghost-danger-border: var(--button-danger-background);
-    --button-ghost-danger-hover-border: var(--button-danger-hover-background);
-    --button-ghost-danger-active-border: var(--button-danger-active-background);
-    --button-circle-border-radius: #{$button-circle-border-radius};
-    --button-round-border-radius: #{$button-round-border-radius};
-    --button-disabled-background: var(--global-muted-background);
-    --button-disabled-color: var(--global-muted-color);
-    --button-text-line-height: var(--global-line-height);
-    --button-text-color: var(--global-muted-color);
-    --button-text-hover-color: var(--global-color);
-    --button-text-disabled-color: var(--global-muted-color);
-    --button-link-line-height: var(--global-line-height);
-    --button-link-color: var(--global-link-color);
-    --button-link-hover-color: var(--global-link-hover-color);
-    --button-link-hover-text-decoration: #{$button-link-hover-text-decoration};
-    --button-link-disabled-color: var(--global-muted-color);
-
-    // Inverse
-    --inverse-button-color: var(--inverse-global-inverse-color);
-    --inverse-button-default-background: var(--inverse-global-primary-background);
-    --inverse-button-default-color: var(--inverse-global-inverse-color);
-    --inverse-button-default-hover-background: #{$inverse-button-default-hover-background};
-    --inverse-button-default-hover-color: var(--inverse-global-inverse-color);
-    --inverse-button-default-active-background: #{$inverse-button-default-active-background};
-    --inverse-button-default-active-color: var(--inverse-global-inverse-color);
-    --inverse-button-primary-background: var(--inverse-global-primary-background);
-    --inverse-button-primary-color: var(--inverse-global-inverse-color);
-    --inverse-button-primary-hover-background: #{$inverse-button-primary-hover-background};
-    --inverse-button-primary-hover-color: var(--inverse-global-inverse-color);
-    --inverse-button-primary-active-background: #{$inverse-button-primary-active-background};
-    --inverse-button-primary-active-color: var(--inverse-global-inverse-color);
-    --inverse-button-secondary-background: var(--inverse-global-primary-background);
-    --inverse-button-secondary-color: var(--inverse-global-inverse-color);
-    --inverse-button-secondary-hover-background: #{$inverse-button-secondary-hover-background};
-    --inverse-button-secondary-hover-color: var(--inverse-global-inverse-color);
-    --inverse-button-secondary-active-background: #{$inverse-button-secondary-active-background};
-    --inverse-button-secondary-active-color: var(--inverse-global-inverse-color);
-    --inverse-button-tertiary-background: var(--inverse-global-primary-background);
-    --inverse-button-tertiary-color: var(--inverse-global-inverse-color);
-    --inverse-button-tertiary-hover-background: #{$inverse-button-tertiary-hover-background};
-    --inverse-button-tertiary-hover-color: var(--inverse-global-inverse-color);
-    --inverse-button-tertiary-active-background: #{$inverse-button-tertiary-active-background};
-    --inverse-button-tertiary-active-color: var(--inverse-global-inverse-color);
-    --inverse-button-danger-background: var(--button-danger-background);
-    --inverse-button-danger-color: var(--button-danger-color);
-    --inverse-button-danger-hover-background: var(--button-danger-hover-background);
-    --inverse-button-danger-hover-color: var(--button-danger-hover-color);
-    --inverse-button-danger-active-background: var(--button-danger-active-background);
-    --inverse-button-danger-active-color: var(--button-danger-active-color);
-    --inverse-button-text-color: var(--inverse-global-emphasis-color);
-    --inverse-button-text-hover-color: var(--inverse-global-muted-color);
-    --inverse-button-text-disabled-color: var(--inverse-global-muted-color);
-    --inverse-button-link-color: var(--inverse-global-emphasis-color);
-    --inverse-button-link-hover-color: var(--inverse-global-muted-color);
-}