@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/form/_form.scss

@@ -0,0 +1,665 @@
+// Name:            Form
+// Description:     Styles for forms
+//
+// Component:       `uk-form-*`
+//                  `uk-input`
+//                  `uk-textarea`
+//                  `uk-legend`
+//                  `uk-fieldset`
+//
+// Sub-objects:     `uk-form-custom`
+//                  `uk-form-stacked`
+//                  `uk-form-horizontal`
+//                  `uk-form-label`
+//                  `uk-form-controls`
+//                  `uk-form-icon`
+//
+// Modifiers:       `uk-form-small`
+//                  `uk-form-medium`
+//                  `uk-form-large`
+//                  `uk-form-danger`
+//                  `uk-form-warning`
+//                  `uk-form-success`
+//                  `uk-form-blank`
+//                  `uk-form-width-xsmall`
+//                  `uk-form-width-small`
+//                  `uk-form-width-medium`
+//                  `uk-form-width-large`
+//                  `uk-form-controls-text`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+@use '../utils' as *;
+
+
+@mixin form-styles {
+    /* ========================================================================
+       Component: Form
+     ========================================================================== */
+
+    /*
+     * 1. Define consistent box sizing.
+     *    Default is `content-box` with following exceptions set to `border-box`
+     *    `input[type="search"]` in Chrome, Safari and Opera
+     *    `input[type="color"]` in Firefox
+     * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
+     * 3. Remove `border-radius` in iOS.
+     * 4. Change font properties to `inherit` in all browsers.
+     * 5. Prevent content overflow if a fixed width is used
+     * 6. Remove default style in iOS.
+     * 7. Take the full width
+     * 8. Reset default
+     * 9. Style
+     */
+
+    .#{$prefix}-input,
+    .#{$prefix}-textarea {
+        -webkit-appearance: none; /* 6 */
+        background: var(--form-background); /* 9 */
+        border: 0 none; /* 9 */
+        border-radius: 0; /* 3 */
+        box-sizing: border-box; /* 1 */
+        color: var(--form-color); /* 9 */
+        font: inherit; /* 4 */
+        margin: 0; /* 2 */
+        max-width: 100%; /* 5 */
+        padding: 0 var(--form-padding-horizontal); /* 8 */
+        width: 100%; /* 7 */
+        @if map.has-key($mixins, 'hook-form') {
+            @include meta.apply(map.get($mixins, 'hook-form'));
+        }
+    }
+
+    /*
+     * Single-line
+     * 1. Show the overflow in Edge.
+     * 2. Allow any element to look like an `input` or `select` element
+     * 3. Make sure line-height is not larger than height
+     *    Also needed to center the text vertically
+     */
+
+    .#{$prefix}-input {
+        /* 2 */
+        display: inline-block;
+        height: var(--form-height);
+
+        /* 1 */
+        overflow: visible;
+        vertical-align: middle;
+        @if map.has-key($mixins, 'hook-form-single-line') {
+            @include meta.apply(map.get($mixins, 'hook-form-single-line'));
+        }
+    }
+
+    /* 2 */
+    .#{$prefix}-input:not(input) {
+        line-height: var(--form-line-height);
+    }
+
+    /*
+     * Multi-line
+     * 1. Remove the default vertical scrollbar in IE 10+.
+     */
+
+    .#{$prefix}-textarea {
+        /* 1 */
+        overflow: auto;
+        padding-bottom: var(--form-padding-vertical);
+        padding-top: var(--form-padding-vertical);
+        vertical-align: top;
+        @if map.has-key($mixins, 'hook-form-multi-line') {
+            @include meta.apply(map.get($mixins, 'hook-form-multi-line'));
+        }
+    }
+
+    /*
+     * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
+     */
+
+    .#{$prefix}-input[type='search']::-webkit-search-cancel-button,
+    .#{$prefix}-input[type='search']::-webkit-search-decoration {
+        -webkit-appearance: none;
+    }
+
+    /*
+     * Correct the cursor style of increment and decrement buttons in Chrome.
+     */
+
+    .#{$prefix}-input[type='number']::-webkit-inner-spin-button,
+    .#{$prefix}-input[type='number']::-webkit-outer-spin-button {
+        height: auto;
+    }
+
+
+    /*
+     * Define consistent border, margin, and padding.
+     */
+
+    .#{$prefix}-fieldset {
+        border: none;
+        margin: 0;
+        padding: 0;
+    }
+
+
+    /*
+     * Placeholder
+     */
+
+    .#{$prefix}-input::-ms-input-placeholder {
+        color: var(--form-placeholder-color) !important;
+    }
+
+    .#{$prefix}-input::placeholder {
+        color: var(--form-placeholder-color);
+    }
+
+    .#{$prefix}-textarea::-ms-input-placeholder {
+        color: var(--form-placeholder-color) !important;
+    }
+
+    .#{$prefix}-textarea::placeholder {
+        color: var(--form-placeholder-color);
+    }
+
+    /*
+     * Removes placeholder transparency in Firefox.
+     */
+
+    .#{$prefix}-input::-moz-placeholder,
+    .#{$prefix}-textarea::-moz-placeholder {
+        opacity: 1;
+    }
+
+    /* Focus */
+    .#{$prefix}-input:focus,
+    .#{$prefix}-textarea:focus {
+        background-color: var(--form-focus-background);
+        color: var(--form-focus-color);
+        outline: none;
+        @if map.has-key($mixins, 'hook-form-focus') {
+            @include meta.apply(map.get($mixins, 'hook-form-focus'));
+        }
+    }
+
+    /* Disabled */
+    .#{$prefix}-input:disabled,
+    .#{$prefix}-textarea:disabled {
+        background-color: var(--form-disabled-background);
+        color: var(--form-disabled-color);
+        @if map.has-key($mixins, 'hook-form-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-form-disabled'));
+        }
+    }
+
+
+    /* Size modifier (`uk-input` and `uk-textarea`)
+     ========================================================================== */
+
+    /*
+     * Small
+     */
+
+    .#{$prefix}-form-small {
+        font-size: var(--form-small-font-size);
+    }
+
+    /* Multi-line */
+    textarea.#{$prefix}-form-small,
+    [multiple].#{$prefix}-form-small,
+    [size].#{$prefix}-form-small {
+        padding: var(--form-small-padding-vertical) var(--form-small-padding-horizontal);
+    }
+
+    .#{$prefix}-form-small:not(input, textarea) {
+        line-height: var(--form-small-line-height);
+    }
+
+    /* Single-line */
+    .#{$prefix}-form-small:not(textarea, [multiple], [size]) {
+        height: var(--form-small-height);
+        padding-left: var(--form-small-padding-horizontal);
+        padding-right: var(--form-small-padding-horizontal);
+    }
+
+    /*
+     * Medium
+     */
+
+    .#{$prefix}-form-medium {
+        font-size: var(--form-medium-font-size);
+    }
+
+    /* Multi-line */
+    textarea.#{$prefix}-form-medium,
+    [multiple].#{$prefix}-form-medium,
+    [size].#{$prefix}-form-medium {
+        padding: var(--form-medium-padding-vertical) var(--form-medium-padding-horizontal);
+    }
+
+    .#{$prefix}-form-medium:not(input, textarea) {
+        line-height: var(--form-medium-line-height);
+    }
+
+    /* Single-line */
+    .#{$prefix}-form-medium:not(textarea, [multiple], [size]) {
+        height: var(--form-medium-height);
+        padding-left: var(--form-medium-padding-horizontal);
+        padding-right: var(--form-medium-padding-horizontal);
+    }
+
+    /*
+     * Large
+     */
+
+    .#{$prefix}-form-large {
+        font-size: var(--form-large-font-size);
+    }
+
+    /* Multi-line */
+    textarea.#{$prefix}-form-large,
+    [multiple].#{$prefix}-form-large,
+    [size].#{$prefix}-form-large {
+        padding: var(--form-large-padding-vertical) var(--form-large-padding-horizontal);
+    }
+
+    .#{$prefix}-form-large:not(input, textarea) {
+        line-height: var(--form-large-line-height);
+    }
+
+    /* Single-line */
+    .#{$prefix}-form-large:not(textarea, [multiple], [size]) {
+        height: var(--form-large-height);
+        padding-left: var(--form-large-padding-horizontal);
+        padding-right: var(--form-large-padding-horizontal);
+    }
+
+
+    /* Style modifier (`uk-input` and `uk-textarea`)
+     ========================================================================== */
+
+    /*
+     * Error
+     */
+
+    .#{$prefix}-form-danger,
+    .#{$prefix}-form-danger:focus {
+        color: var(--form-danger-color);
+        @if map.has-key($mixins, 'hook-form-danger') {
+            @include meta.apply(map.get($mixins, 'hook-form-danger'));
+        }
+    }
+
+    /*
+     * Warning
+     */
+
+    .#{$prefix}-form-warning,
+    .#{$prefix}-form-warning:focus {
+        color: var(--form-warning-color);
+        @if map.has-key($mixins, 'hook-form-warning') {
+            @include meta.apply(map.get($mixins, 'hook-form-warning'));
+        }
+    }
+
+    /*
+     * Success
+     */
+
+    .#{$prefix}-form-success,
+    .#{$prefix}-form-success:focus {
+        color: var(--form-success-color);
+        @if map.has-key($mixins, 'hook-form-success') {
+            @include meta.apply(map.get($mixins, 'hook-form-success'));
+        }
+    }
+
+    /*
+     * Blank
+     */
+
+    .#{$prefix}-form-blank {
+        background: none;
+        @if map.has-key($mixins, 'hook-form-blank') {
+            @include meta.apply(map.get($mixins, 'hook-form-blank'));
+        }
+    }
+
+    .#{$prefix}-form-blank:focus {
+        @if map.has-key($mixins, 'hook-form-blank-focus') {
+            @include meta.apply(map.get($mixins, 'hook-form-blank-focus'));
+        }
+    }
+
+
+    /* Width modifiers (`uk-input` and `uk-textarea`)
+     ========================================================================== */
+
+    /*
+     * Fixed widths
+     * Different widths for mini sized `input` and `select` elements
+     */
+
+    input.#{$prefix}-form-width-xsmall {
+        width: var(--form-width-xsmall);
+    }
+
+    .#{$prefix}-form-width-xsmall {
+        width: var(--form-width-xsmall);
+    }
+
+    .#{$prefix}-form-width-small {
+        width: var(--form-width-small);
+    }
+
+    .#{$prefix}-form-width-medium {
+        width: var(--form-width-medium);
+    }
+
+    .#{$prefix}-form-width-large {
+        width: var(--form-width-large);
+    }
+
+
+    /* Datalist
+     ========================================================================== */
+
+    /*
+     * 1. Remove default style in Chrome
+     */
+
+    .#{$prefix}-input[list] {
+        background-position: 100% 50%;
+        background-repeat: no-repeat;
+        padding-right: var(--form-datalist-padding-right);
+    }
+
+    /* 1 */
+    .#{$prefix}-input[list]::-webkit-calendar-picker-indicator {
+        display: none;
+    }
+
+    .#{$prefix}-input[list]:hover,
+    .#{$prefix}-input[list]:focus {
+        @if map.has-key($mixins, 'svg-fill') {
+            @include meta.apply(map.get($mixins, 'svg-fill'), $form-icon-datalist-image-path, '#000', $form-datalist-icon-color);
+        }
+    }
+
+
+    /* Legend
+     ========================================================================== */
+
+    /*
+     * Legend
+     * 1. Behave like block element
+     * 2. Correct the color inheritance from `fieldset` elements in IE.
+     * 3. Remove padding so people aren't caught out if they zero out fieldsets.
+     * 4. Style
+     */
+
+    .#{$prefix}-legend {
+        /* 2 */
+        color: inherit;
+
+        /* 4 */
+        font-size: var(--form-legend-font-size);
+        line-height: var(--form-legend-line-height);
+
+        /* 3 */
+        padding: 0;
+
+        /* 1 */
+        width: 100%;
+        @if map.has-key($mixins, 'hook-form-legend') {
+            @include meta.apply(map.get($mixins, 'hook-form-legend'));
+        }
+    }
+
+
+    /* Custom controls
+     ========================================================================== */
+
+    /*
+     * 1. Container fits its content
+     * 2. Create position context
+     * 3. Prevent content overflow
+     * 4. Behave like most inline-block elements
+     */
+
+    .#{$prefix}-form-custom {
+        /* 1 */
+        display: inline-block;
+
+        /* 3 */
+        max-width: 100%;
+
+        /* 2 */
+        position: relative;
+
+        /* 4 */
+        vertical-align: middle;
+    }
+
+    /*
+     * 1. Position and resize the form control to always cover its container
+     * 2. Required for Firefox for positioning to the left
+     * 3. Required for Webkit to make `height` work
+     * 4. Hide control and show cursor
+     * 5. Needed for the cursor
+     * 6. Clip height caused by 5. Needed for Webkit only
+     */
+
+    .#{$prefix}-form-custom select,
+    .#{$prefix}-form-custom input[type='file'] {
+        /* 3 */
+        -webkit-appearance: none;
+        cursor: pointer;
+        height: 100%;
+
+        /* 2 */
+        left: 0;
+
+        /* 4 */
+        opacity: 0;
+
+        /* 1 */
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: 1;
+    }
+
+    .#{$prefix}-form-custom input[type='file'] {
+        /* 5 */
+        font-size: 500px;
+
+        /* 6 */
+        overflow: hidden;
+    }
+
+
+    /* Label
+     ========================================================================== */
+
+    .#{$prefix}-form-label {
+        @if map.has-key($mixins, 'hook-form-label') {
+            @include meta.apply(map.get($mixins, 'hook-form-label'));
+        }
+    }
+
+
+    /* Layout
+     ========================================================================== */
+
+    /*
+     * Stacked
+     */
+
+    .#{$prefix}-form-stacked .#{$prefix}-form-label {
+        display: block;
+        margin-bottom: var(--form-stacked-margin-bottom);
+        @if map.has-key($mixins, 'hook-form-stacked-label') {
+            @include meta.apply(map.get($mixins, 'hook-form-stacked-label'));
+        }
+    }
+
+    /*
+     * Horizontal
+     */
+
+    /* Tablet portrait and smaller */
+    @media (--media-breakpoint-small-max) {
+        /* Behave like `uk-form-stacked` */
+        .#{$prefix}-form-horizontal .#{$prefix}-form-label {
+            display: block;
+            margin-bottom: var(--form-stacked-margin-bottom);
+            @if map.has-key($mixins, 'hook-form-stacked-label') {
+                @include meta.apply(map.get($mixins, 'hook-form-stacked-label'));
+            }
+        }
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-form-horizontal .#{$prefix}-form-label {
+            float: left;
+            margin-top: var(--form-horizontal-label-margin-top);
+            width: var(--form-horizontal-label-width);
+            @if map.has-key($mixins, 'hook-form-horizontal-label') {
+                @include meta.apply(map.get($mixins, 'hook-form-horizontal-label'));
+            }
+        }
+
+        .#{$prefix}-form-horizontal .#{$prefix}-form-controls {
+            margin-left: var(--form-horizontal-controls-margin-left);
+        }
+
+        /* Better vertical alignment if controls are checkboxes and radio buttons with text */
+        .#{$prefix}-form-horizontal .#{$prefix}-form-controls-text {
+            padding-top: var(--form-horizontal-controls-text-padding-top);
+        }
+    }
+
+
+    /* Icons
+     ========================================================================== */
+
+    /*
+     * 1. Set width
+     * 2. Center icon vertically and horizontally
+     * 3. Style
+     */
+
+    .#{$prefix}-form-icon {
+        align-items: center;
+
+        /* 3 */
+        color: var(--form-icon-color);
+
+        /* 2 */
+        display: inline-flex;
+        justify-content: center;
+
+        /* 1 */
+        width: var(--form-icon-width);
+    }
+
+    /*
+     * Make `input` element clickable through icon, e.g. if it's a `span`
+     */
+
+    .#{$prefix}-form-icon:not(a, button, input) {
+        pointer-events: none;
+    }
+
+    /*
+     * Required for `a`.
+     */
+
+    .#{$prefix}-form-icon:hover {
+        color: var(--form-icon-hover-color);
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-form-misc') {
+        @include meta.apply(map.get($mixins, 'hook-form-misc'));
+    }
+
+    @content;
+}
+
+@mixin form-tokens {
+    --form-height: var(--global-control-height);
+    --form-line-height: var(--form-height);
+    --form-padding-horizontal: #{$form-padding-horizontal};
+    --form-padding-vertical: #{$form-padding-vertical};
+    --form-background: #{$form-background};
+    --form-color: var(--global-color);
+    --form-focus-background: #{$form-focus-background};
+    --form-focus-color: var(--global-color);
+    --form-disabled-background: #{$form-disabled-background};
+    --form-disabled-color: var(--global-color);
+    --form-placeholder-color: var(--global-muted-color);
+    --form-small-height: var(--global-control-small-height);
+    --form-small-padding-horizontal: #{$form-small-padding-horizontal};
+    --form-small-padding-vertical: #{$form-small-padding-vertical};
+    --form-small-line-height: var(--form-small-height);
+    --form-small-font-size: var(--global-small-font-size);
+    --form-medium-height: var(--global-control-medium-height);
+    --form-medium-padding-horizontal: #{$form-medium-padding-horizontal};
+    --form-medium-padding-vertical: #{$form-medium-padding-vertical};
+    --form-medium-line-height: var(--form-medium-height);
+    --form-medium-font-size: var(--global-font-size);
+    --form-large-height: var(--global-control-large-height);
+    --form-large-padding-horizontal: #{$form-large-padding-horizontal};
+    --form-large-padding-vertical: #{$form-large-padding-vertical};
+    --form-large-line-height: var(--form-large-height);
+    --form-large-font-size: var(--global-medium-font-size);
+    --form-danger-color: var(--global-danger-background);
+    --form-warning-color: var(--global-warning-background);
+    --form-success-color: var(--global-success-background);
+    --form-width-xsmall: #{$form-width-xsmall};
+    --form-width-small: #{$form-width-small};
+    --form-width-medium: #{$form-width-medium};
+    --form-width-large: #{$form-width-large};
+    --form-datalist-padding-right: #{$form-datalist-padding-right};
+    --form-datalist-icon-color: var(--global-color);
+    --form-legend-font-size: var(--global-large-font-size);
+    --form-legend-line-height: #{$form-legend-line-height};
+    --form-stacked-margin-bottom: var(--global-small-margin);
+    --form-horizontal-label-width: #{$form-horizontal-label-width};
+    --form-horizontal-label-margin-top: #{$form-horizontal-label-margin-top};
+    --form-horizontal-controls-margin-left: #{$form-horizontal-controls-margin-left};
+    --form-horizontal-controls-text-padding-top: #{$form-horizontal-controls-text-padding-top};
+    --form-icon-width: var(--form-height);
+    --form-icon-color: var(--global-muted-color);
+    --form-icon-hover-color: var(--global-color);
+
+    @content;
+}
+
+@mixin form-inverse-tokens {
+    --inverse-form-background: var(--inverse-global-muted-background);
+    --inverse-form-color: var(--inverse-global-color);
+    --inverse-form-focus-background: var(--inverse-global-muted-background);
+    --inverse-form-focus-color: var(--inverse-global-color);
+    --inverse-form-placeholder-color: var(--inverse-global-muted-color);
+    --inverse-form-datalist-icon-color: var(--inverse-global-color);
+    --inverse-form-icon-color: var(--inverse-global-muted-color);
+    --inverse-form-icon-hover-color: var(--inverse-global-color);
+
+    @content;
+}

package/styles/form/_index.scss

@@ -0,0 +1,11 @@
+@use 'form' as *;
+
+$generate-tokens: true !default;
+
+@include form-styles;
+
+@if $generate-tokens {
+    :root {
+        @include form-tokens;
+    }
+}