@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/search.scss

@@ -1,346 +0,0 @@
-// Name:            Search
-// Description:     Component to create the search
-//
-// Component:       `uk-search`
-//
-// Sub-objects:     `uk-search-input`
-//                  `uk-search-toggle`
-//
-// Adopted:         `uk-search-icon`
-//
-// Modifier:        `uk-search-default`
-//                  `uk-search-navbar`
-//                  `uk-search-large`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Search
- ========================================================================== */
-
-/*
- * 1. Container fits its content
- * 2. Create position context
- * 3. Prevent content overflow
- * 4. Reset `form`
- */
-
-.uk-search {
-    display: inline-block; /* 1 */
-    margin: 0; /* 4 */
-    max-width: 100%; /* 3 */
-    position: relative; /* 2 */
-}
-
-
-/* Input
- ========================================================================== */
-
-/*
- * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
- */
-
-.uk-search-input::-webkit-search-cancel-button,
-.uk-search-input::-webkit-search-decoration {
-    -webkit-appearance: none;
-}
-
-/*
- * Removes placeholder transparency in Firefox.
- */
-
-.uk-search-input::-moz-placeholder {
-    opacity: 1;
-}
-
-/*
- * 1. Define consistent box sizing.
- * 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. Show the overflow in Edge.
- * 6. Remove default style in iOS.
- * 7. Vertical alignment
- * 8. Take the full container width
- * 9. Style
- */
-
-.uk-search-input {
-    -webkit-appearance: none; /* 6 */
-    border: none; /* 9 */
-    border-radius: 0; /* 3 */
-    box-sizing: border-box; /* 1 */
-    color: var(--search-color);
-    font: inherit; /* 4 */
-    margin: 0; /* 2 */
-    overflow: visible; /* 5 */
-    vertical-align: middle; /* 7 */
-    width: 100%; /* 8 */
-    @if meta.mixin-exists('hook-search-input') {
-        @include hook-search-input;
-    }
-}
-
-.uk-search-input:focus {
-    outline: none;
-}
-
-/* Placeholder */
-.uk-search-input:-ms-input-placeholder {
-    color: var(--search-placeholder-color) !important;
-}
-
-.uk-search-input::placeholder {
-    color: var(--search-placeholder-color);
-}
-
-
-/* Icon (Adopts `uk-icon`)
- ========================================================================== */
-
-/*
- * Remove default focus style
- */
-
-.uk-search-icon:focus {
-    outline: none;
-}
-
-/*
- * Position above input
- * 1. Set position
- * 2. Center icon vertically and horizontally
- * 3. Style
- */
-
-.uk-search .uk-search-icon {
-    align-items: center;
-    bottom: 0;
-    color: var(--search-icon-color); /* 3 */
-    display: inline-flex; /* 2 */
-    justify-content: center;
-    left: 0;
-    position: absolute; /* 1 */
-    top: 0;
-}
-
-/*
- * Required for `a`.
- */
-
-.uk-search .uk-search-icon:hover {
-    color: var(--search-icon-color);
-}
-
-/*
- * Make `input` element clickable through icon, e.g. if it's a `span`
- */
-
-.uk-search .uk-search-icon:not(a, button, input) {
-    pointer-events: none;
-}
-
-/*
- * Position modifier
- */
-
-.uk-search .uk-search-icon-flip {
-    left: auto;
-    right: 0;
-}
-
-
-/* Default modifier
- ========================================================================== */
-
-.uk-search-default {
-    width: var(--search-default-width);
-}
-
-/*
- * Input
- */
-
-.uk-search-default .uk-search-input {
-    background: var(--search-default-background);
-    height: var(--search-default-height);
-    padding-left: var(--search-default-padding-horizontal);
-    padding-right: var(--search-default-padding-horizontal);
-    @if meta.mixin-exists('hook-search-default-input') {
-        @include hook-search-default-input;
-    }
-}
-
-/* Focus */
-.uk-search-default .uk-search-input:focus {
-    background-color: var(--search-default-focus-background);
-    @if meta.mixin-exists('hook-search-default-input-focus') {
-        @include hook-search-default-input-focus;
-    }
-}
-
-/*
- * Icon
- */
-
-.uk-search-default .uk-search-icon {
-    width: var(--search-default-icon-width);
-}
-
-.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input {
-    padding-left: var(--search-default-icon-width);
-}
-
-.uk-search-default .uk-search-icon-flip ~ .uk-search-input {
-    padding-right: var(--search-default-icon-width);
-}
-
-
-/* Navbar modifier
- ========================================================================== */
-
-.uk-search-navbar {
-    width: var(--search-navbar-width);
-}
-
-/*
- * Input
- */
-
-.uk-search-navbar .uk-search-input {
-    background: var(--search-navbar-background);
-    font-size: var(--search-navbar-font-size);
-    height: var(--search-navbar-height);
-    @if meta.mixin-exists('hook-search-navbar-input') {
-        @include hook-search-navbar-input;
-    }
-}
-
-/*
- * Icon
- */
-
-.uk-search-navbar .uk-search-icon {
-    width: var(--search-navbar-icon-width);
-}
-
-.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input {
-    padding-left: var(--search-navbar-icon-width);
-}
-
-.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input {
-    padding-right: var(--search-navbar-icon-width);
-}
-
-
-/* Large modifier
- ========================================================================== */
-
-.uk-search-large {
-    width: var(--search-large-width);
-}
-
-/*
- * Input
- */
-
-.uk-search-large .uk-search-input {
-    background: var(--search-large-background);
-    font-size: var(--search-large-font-size);
-    height: var(--search-large-height);
-    @if meta.mixin-exists('hook-search-large-input') {
-        @include hook-search-large-input;
-    }
-}
-
-/*
- * Icon
- */
-
-.uk-search-large .uk-search-icon {
-    width: var(--search-large-icon-width);
-}
-
-.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input {
-    padding-left: var(--search-large-icon-width);
-}
-
-.uk-search-large .uk-search-icon-flip ~ .uk-search-input {
-    padding-right: var(--search-large-icon-width);
-}
-
-
-/* Toggle
- ========================================================================== */
-
-.uk-search-toggle {
-    color: var(--search-toggle-color);
-    @if meta.mixin-exists('hook-search-toggle') {
-        @include hook-search-toggle;
-    }
-}
-
-/* Hover + Focus */
-.uk-search-toggle:hover,
-.uk-search-toggle:focus {
-    color: var(--search-toggle-hover-color);
-    @if meta.mixin-exists('hook-search-toggle-hover') {
-        @include hook-search-toggle-hover;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-search-misc') {
-    @include hook-search-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --search-color: var(--global-color);
-    --search-placeholder-color: var(--global-muted-color);
-    --search-icon-color: var(--global-muted-color);
-    --search-default-width: var(--search-default-width);
-    --search-default-height: var(--global-control-height);
-    --search-default-padding-horizontal: var(--search-default-padding-horizontal);
-    --search-default-background: var(--global-muted-background);
-    --search-default-focus-background: var(--search-default-background);
-    --search-default-icon-width: var(--global-control-height);
-    --search-navbar-width: var(--search-navbar-width);
-    --search-navbar-height: var(--search-navbar-height);
-    --search-navbar-background: var(--search-navbar-background);
-    --search-navbar-font-size: var(--global-large-font-size);
-    --search-navbar-icon-width: var(--search-navbar-icon-width);
-    --search-large-width: var(--search-large-width);
-    --search-large-height: var(--search-large-height);
-    --search-large-background: var(--search-large-background);
-    --search-large-font-size: var(--global-2xlarge-font-size);
-    --search-large-icon-width: var(--search-large-icon-width);
-    --search-toggle-color: var(--global-muted-color);
-    --search-toggle-hover-color: var(--global-color);
-
-    // Inverse
-    --inverse-search-color: var(--inverse-global-color);
-    --inverse-search-placeholder-color: var(--inverse-global-muted-color);
-    --inverse-search-icon-color: var(--inverse-global-muted-color);
-    --inverse-search-default-background: var(--inverse-global-muted-background);
-    --inverse-search-default-focus-background: var(--inverse-search-default-background);
-    --inverse-search-navbar-background: var(--inverse-search-navbar-background);
-    --inverse-search-large-background: var(--inverse-search-large-background);
-    --inverse-search-toggle-color: var(--inverse-global-muted-color);
-    --inverse-search-toggle-hover-color: var(--inverse-global-color);
-}

package/styles/section.scss

@@ -1,285 +0,0 @@
-// Name:            Section
-// Description:     Component to create horizontal layout section
-//
-// Component:       `uk-section`
-//
-// Modifiers:       `uk-section-xsmall`
-//                  `uk-section-small`
-//                  `uk-section-large`
-//                  `uk-section-xlarge`
-//                  `uk-section-default`
-//                  `uk-section-muted`
-//                  `uk-section-primary`
-//                  `uk-section-secondary`
-//                  `uk-section-tertiary`
-//                  `uk-section-overlap`
-//
-// States:          `uk-preserve-color`
-//
-// ========================================================================
-
-@use 'sass:meta';
-
-
-// Variables
-// ========================================================================
-
-@use 'variables' as *;
-
-
-/* ========================================================================
-   Component: Section
- ========================================================================== */
-
-/*
- * 1. Make it work with `100vh` and height in general
- */
-
-.uk-section {
-    box-sizing: border-box; /* 1 */
-    display: flow-root;
-    padding-bottom: var(--section-padding-vertical);
-    padding-top: var(--section-padding-vertical);
-    @if meta.mixin-exists('hook-section') {
-        @include hook-section;
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-section {
-        padding-bottom: var(--section-padding-vertical-m);
-        padding-top: var(--section-padding-vertical-m);
-    }
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-section > :last-child {
-    margin-bottom: 0;
-}
-
-
-/* Size modifiers
- ========================================================================== */
-
-/*
- * XSmall
- */
-
-.uk-section-xsmall {
-    padding-bottom: var(--section-xsmall-padding-vertical);
-    padding-top: var(--section-xsmall-padding-vertical);
-}
-
-/*
- * Small
- */
-
-.uk-section-small {
-    padding-bottom: var(--section-small-padding-vertical);
-    padding-top: var(--section-small-padding-vertical);
-}
-
-/*
- * Large
- */
-
-.uk-section-large {
-    padding-bottom: var(--section-large-padding-vertical);
-    padding-top: var(--section-large-padding-vertical);
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-section-large {
-        padding-bottom: var(--section-large-padding-vertical-m);
-        padding-top: var(--section-large-padding-vertical-m);
-    }
-}
-
-/*
- * XLarge
- */
-
-.uk-section-xlarge {
-    padding-bottom: var(--section-xlarge-padding-vertical);
-    padding-top: var(--section-xlarge-padding-vertical);
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-section-xlarge {
-        padding-bottom: var(--section-xlarge-padding-vertical-m);
-        padding-top: var(--section-xlarge-padding-vertical-m);
-    }
-}
-
-
-/* Style modifiers
- ========================================================================== */
-
-/*
- * Default
- */
-
-.uk-section-default {
-    --uk-inverse: #{$section-default-color-mode};
-    background: var(--section-default-background);
-    @if meta.mixin-exists('hook-section-default') {
-        @include hook-section-default;
-    }
-}
-
-@if $section-default-color-mode == light {
-    .uk-section-default:not(.uk-preserve-color) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $section-default-color-mode == dark {
-    .uk-section-default:not(.uk-preserve-color) {
-        @extend .uk-dark !optional;
-    }
-}
-
-/*
- * Muted
- */
-
-.uk-section-muted {
-    --uk-inverse: #{$section-muted-color-mode};
-    background: var(--section-muted-background);
-    @if meta.mixin-exists('hook-section-muted') {
-        @include hook-section-muted;
-    }
-}
-
-@if $section-muted-color-mode == light {
-    .uk-section-muted:not(.uk-preserve-color) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $section-muted-color-mode == dark {
-    .uk-section-muted:not(.uk-preserve-color) {
-        @extend .uk-dark !optional;
-    }
-}
-
-/*
- * Primary
- */
-
-.uk-section-primary {
-    --uk-inverse: #{$section-primary-color-mode};
-    background: var(--section-primary-background);
-    @if meta.mixin-exists('hook-section-primary') {
-        @include hook-section-primary;
-    }
-}
-
-@if $section-primary-color-mode == light {
-    .uk-section-primary:not(.uk-preserve-color) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $section-primary-color-mode == dark {
-    .uk-section-primary:not(.uk-preserve-color) {
-        @extend .uk-dark !optional;
-    }
-}
-
-/*
- * Secondary
- */
-
-.uk-section-secondary {
-    --uk-inverse: #{$section-secondary-color-mode};
-    background: var(--section-secondary-background);
-    @if meta.mixin-exists('hook-section-secondary') {
-        @include hook-section-secondary;
-    }
-}
-
-@if $section-secondary-color-mode == light {
-    .uk-section-secondary:not(.uk-preserve-color) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $section-secondary-color-mode == dark {
-    .uk-section-secondary:not(.uk-preserve-color) {
-        @extend .uk-dark !optional;
-    }
-}
-
-/*
- * Tertiary
- */
-
-.uk-section-tertiary {
-    --uk-inverse: #{$section-tertiary-color-mode};
-    background: var(--section-tertiary-background);
-    @if meta.mixin-exists('hook-section-tertiary') {
-        @include hook-section-tertiary;
-    }
-}
-
-@if $section-tertiary-color-mode == light {
-    .uk-section-tertiary:not(.uk-preserve-color) {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $section-tertiary-color-mode == dark {
-    .uk-section-tertiary:not(.uk-preserve-color) {
-        @extend .uk-dark !optional;
-    }
-}
-
-
-/* Overlap modifier
- ========================================================================== */
-
-/*
- * Reserved modifier to make a section overlap another section with an border image
- * Implemented by the theme
- */
-
-.uk-section-overlap {
-    @if meta.mixin-exists('hook-section-overlap') {
-        @include hook-section-overlap;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if meta.mixin-exists('hook-section-misc') {
-    @include hook-section-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --section-padding-vertical: var(--global-medium-margin);
-    --section-padding-vertical-m: var(--global-large-margin);
-    --section-xsmall-padding-vertical: var(--global-margin);
-    --section-small-padding-vertical: var(--global-medium-margin);
-    --section-large-padding-vertical: var(--global-large-margin);
-    --section-large-padding-vertical-m: var(--global-xlarge-margin);
-    --section-xlarge-padding-vertical: var(--global-xlarge-margin);
-    --section-xlarge-padding-vertical-m: calc(var(--global-large-margin) + var(--global-xlarge-margin));
-    --section-default-background: var(--global-background);
-    --section-muted-background: var(--global-muted-background);
-    --section-primary-background: var(--global-primary-background);
-    --section-secondary-background: var(--global-secondary-background);
-    --section-tertiary-background: var(--global-tertiary-background);
-}