@broxus/react-uikit 0.23.3 → 0.24.0

package/styles/form.scss

@@ -1,658 +0,0 @@
-// 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:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-@use 'mixin' as *;
-
-
-/* ========================================================================
-   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
- */
-
-.uk-input,
-.uk-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 meta.mixin-exists('hook-form') {
-        @include 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
- */
-
-.uk-input {
-    /* 2 */
-    display: inline-block;
-    height: var(--form-height);
-
-    /* 1 */
-    overflow: visible;
-    vertical-align: middle;
-    @if meta.mixin-exists('hook-form-single-line') {
-        @include hook-form-single-line;
-    }
-}
-
-/* 2 */
-.uk-input:not(input) {
-    line-height: var(--form-line-height);
-}
-
-/*
- * Multi-line
- * 1. Remove the default vertical scrollbar in IE 10+.
- */
-
-.uk-textarea {
-    /* 1 */
-    overflow: auto;
-    padding-bottom: var(--form-padding-vertical);
-    padding-top: var(--form-padding-vertical);
-    vertical-align: top;
-    @if meta.mixin-exists('hook-form-multi-line') {
-        @include hook-form-multi-line;
-    }
-}
-
-/*
- * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
- */
-
-.uk-input[type='search']::-webkit-search-cancel-button,
-.uk-input[type='search']::-webkit-search-decoration {
-    -webkit-appearance: none;
-}
-
-/*
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-.uk-input[type='number']::-webkit-inner-spin-button,
-.uk-input[type='number']::-webkit-outer-spin-button {
-    height: auto;
-}
-
-
-/*
- * Define consistent border, margin, and padding.
- */
-
-.uk-fieldset {
-    border: none;
-    margin: 0;
-    padding: 0;
-}
-
-
-/*
- * Placeholder
- */
-
-.uk-input::-ms-input-placeholder {
-    color: var(--form-placeholder-color) !important;
-}
-
-.uk-input::placeholder {
-    color: var(--form-placeholder-color);
-}
-
-.uk-textarea::-ms-input-placeholder {
-    color: var(--form-placeholder-color) !important;
-}
-
-.uk-textarea::placeholder {
-    color: var(--form-placeholder-color);
-}
-
-/*
- * Removes placeholder transparency in Firefox.
- */
-
-.uk-input::-moz-placeholder,
-.uk-textarea::-moz-placeholder {
-    opacity: 1;
-}
-
-/* Focus */
-.uk-input:focus,
-.uk-textarea:focus {
-    background-color: var(--form-focus-background);
-    color: var(--form-focus-color);
-    outline: none;
-    @if meta.mixin-exists('hook-form-focus') {
-        @include hook-form-focus;
-    }
-}
-
-/* Disabled */
-.uk-input:disabled,
-.uk-textarea:disabled {
-    background-color: var(--form-disabled-background);
-    color: var(--form-disabled-color);
-    @if meta.mixin-exists('hook-form-disabled') {
-        @include hook-form-disabled;
-    }
-}
-
-
-/* Size modifier (`uk-input` and `uk-textarea`)
- ========================================================================== */
-
-/*
- * Small
- */
-
-.uk-form-small {
-    font-size: var(--form-small-font-size);
-}
-
-/* Multi-line */
-textarea.uk-form-small,
-[multiple].uk-form-small,
-[size].uk-form-small {
-    padding: var(--form-small-padding-vertical) var(--form-small-padding-horizontal);
-}
-
-.uk-form-small:not(input, textarea) {
-    line-height: var(--form-small-line-height);
-}
-
-/* Single-line */
-.uk-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
- */
-
-.uk-form-medium {
-    font-size: var(--form-medium-font-size);
-}
-
-/* Multi-line */
-textarea.uk-form-medium,
-[multiple].uk-form-medium,
-[size].uk-form-medium {
-    padding: var(--form-medium-padding-vertical) var(--form-medium-padding-horizontal);
-}
-
-.uk-form-medium:not(input, textarea) {
-    line-height: var(--form-medium-line-height);
-}
-
-/* Single-line */
-.uk-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
- */
-
-.uk-form-large {
-    font-size: var(--form-large-font-size);
-}
-
-/* Multi-line */
-textarea.uk-form-large,
-[multiple].uk-form-large,
-[size].uk-form-large {
-    padding: var(--form-large-padding-vertical) var(--form-large-padding-horizontal);
-}
-
-.uk-form-large:not(input, textarea) {
-    line-height: var(--form-large-line-height);
-}
-
-/* Single-line */
-.uk-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
- */
-
-.uk-form-danger,
-.uk-form-danger:focus {
-    color: var(--form-danger-color);
-    @if meta.mixin-exists('hook-form-danger') {
-        @include hook-form-danger;
-    }
-}
-
-/*
- * Warning
- */
-
-.uk-form-warning,
-.uk-form-warning:focus {
-    color: var(--form-warning-color);
-    @if meta.mixin-exists('hook-form-warning') {
-        @include hook-form-warning;
-    }
-}
-
-/*
- * Success
- */
-
-.uk-form-success,
-.uk-form-success:focus {
-    color: var(--form-success-color);
-    @if meta.mixin-exists('hook-form-success') {
-        @include hook-form-success;
-    }
-}
-
-/*
- * Blank
- */
-
-.uk-form-blank {
-    background: none;
-    @if meta.mixin-exists('hook-form-blank') {
-        @include hook-form-blank;
-    }
-}
-
-.uk-form-blank:focus {
-    @if meta.mixin-exists('hook-form-blank-focus') {
-        @include hook-form-blank-focus;
-    }
-}
-
-
-/* Width modifiers (`uk-input` and `uk-textarea`)
- ========================================================================== */
-
-/*
- * Fixed widths
- * Different widths for mini sized `input` and `select` elements
- */
-
-input.uk-form-width-xsmall {
-    width: var(--form-width-xsmall);
-}
-
-.uk-form-width-xsmall {
-    width: var(--form-width-xsmall);
-}
-
-.uk-form-width-small {
-    width: var(--form-width-small);
-}
-
-.uk-form-width-medium {
-    width: var(--form-width-medium);
-}
-
-.uk-form-width-large {
-    width: var(--form-width-large);
-}
-
-
-/* Datalist
- ========================================================================== */
-
-/*
- * 1. Remove default style in Chrome
- */
-
-.uk-input[list] {
-    background-position: 100% 50%;
-    background-repeat: no-repeat;
-    padding-right: var(--form-datalist-padding-right);
-}
-
-/* 1 */
-.uk-input[list]::-webkit-calendar-picker-indicator {
-    display: none;
-}
-
-.uk-input[list]:hover,
-.uk-input[list]:focus {
-    @if meta.mixin-exists('svg-fill') {
-        @include 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
- */
-
-.uk-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 meta.mixin-exists('hook-form-legend') {
-        @include 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
- */
-
-.uk-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
- */
-
-.uk-form-custom select,
-.uk-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;
-}
-
-.uk-form-custom input[type='file'] {
-    /* 5 */
-    font-size: 500px;
-
-    /* 6 */
-    overflow: hidden;
-}
-
-
-/* Label
- ========================================================================== */
-
-.uk-form-label {
-    @if meta.mixin-exists('hook-form-label') {
-        @include hook-form-label;
-    }
-}
-
-
-/* Layout
- ========================================================================== */
-
-/*
- * Stacked
- */
-
-.uk-form-stacked .uk-form-label {
-    display: block;
-    margin-bottom: var(--form-stacked-margin-bottom);
-    @if meta.mixin-exists('hook-form-stacked-label') {
-        @include hook-form-stacked-label;
-    }
-}
-
-/*
- * Horizontal
- */
-
-/* Tablet portrait and smaller */
-@media (max-width: $breakpoint-small-max) {
-    /* Behave like `uk-form-stacked` */
-    .uk-form-horizontal .uk-form-label {
-        display: block;
-        margin-bottom: var(--form-stacked-margin-bottom);
-        @if meta.mixin-exists('hook-form-stacked-label') {
-            @include hook-form-stacked-label;
-        }
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-form-horizontal .uk-form-label {
-        float: left;
-        margin-top: var(--form-horizontal-label-margin-top);
-        width: var(--form-horizontal-label-width);
-        @if meta.mixin-exists('hook-form-horizontal-label') {
-            @include hook-form-horizontal-label;
-        }
-    }
-
-    .uk-form-horizontal .uk-form-controls {
-        margin-left: var(--form-horizontal-controls-margin-left);
-    }
-
-    /* Better vertical alignment if controls are checkboxes and radio buttons with text */
-    .uk-form-horizontal .uk-form-controls-text {
-        padding-top: var(--form-horizontal-controls-text-padding-top);
-    }
-}
-
-
-/* Icons
- ========================================================================== */
-
-/*
- * 1. Set width
- * 2. Center icon vertically and horizontally
- * 3. Style
- */
-
-.uk-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`
- */
-
-.uk-form-icon:not(a, button, input) {
-    pointer-events: none;
-}
-
-/*
- * Required for `a`.
- */
-
-.uk-form-icon:hover {
-    color: var(--form-icon-hover-color);
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-form-misc') {
-    @include hook-form-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --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);
-
-    // Inverse
-    --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);
-}