@broxus/react-uikit 0.1.0

package/dist/cjs/styles/progress.scss

@@ -0,0 +1,129 @@
+// Name:            Progress
+// Description:     Component to create progress bars
+//
+// Component:       `uk-progress`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Progress
+ ========================================================================== */
+
+/*
+ * 1. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ * 2. Remove default style
+ * 3. Behave like a block element
+ * 4. Remove borders in Firefox and Edge
+ * 5. Set background color for progress container in Firefox, IE11 and Edge
+ * 6. Style
+ */
+
+.uk-progress {
+    /* 2 */
+    appearance: none;
+
+    /* 5 */
+    background-color: var(--progress-background);
+
+    /* 4 */
+    border: 0;
+
+    /* 3 */
+    display: block;
+    height: var(--progress-height);
+
+    /* 6 */
+    margin-bottom: var(--progress-margin-vertical);
+
+    /* 1 */
+    vertical-align: baseline;
+    width: 100%;
+    @if mixin-exists(hook-progress) {
+        @include hook-progress;
+    }
+}
+
+/* Add margin if adjacent element */
+* + .uk-progress { margin-top: var(--progress-margin-vertical); }
+
+/*
+ * Remove animated circles for indeterminate state in IE11 and Edge
+ */
+
+.uk-progress:indeterminate { color: transparent; }
+
+/*
+ * Progress container
+ * 2. Remove progress bar for indeterminate state in Firefox
+ */
+
+.uk-progress::-webkit-progress-bar {
+    background-color: var(--progress-background);
+    @if mixin-exists(hook-progress) {
+        @include hook-progress;
+    }
+}
+
+/* 2 */
+.uk-progress:indeterminate::-moz-progress-bar { width: 0; }
+
+/*
+ * Progress bar
+ * 1. Remove right border in IE11 and Edge
+ */
+
+.uk-progress::-webkit-progress-value {
+    background-color: var(--progress-bar-background);
+    transition: width 0.6s ease;
+    @if mixin-exists(hook-progress-bar) {
+        @include hook-progress-bar;
+    }
+}
+
+.uk-progress::-moz-progress-bar {
+    background-color: var(--progress-bar-background);
+    @if mixin-exists(hook-progress-bar) {
+        @include hook-progress-bar;
+    }
+}
+
+.uk-progress::-ms-fill {
+    background-color: var(--progress-bar-background);
+
+    /* 1 */
+    border: 0;
+    transition: width 0.6s ease;
+    @if mixin-exists(hook-progress-bar) {
+        @include hook-progress-bar;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-progress-misc) {
+    @include hook-progress-misc;
+}
+
+// @mixin hook-progress() {}
+// @mixin hook-progress-bar() {}
+// @mixin hook-progress-misc() {}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --progress-height: #{$progress-height};
+    --progress-margin-vertical: var(--global-margin);
+    --progress-background: var(--global-muted-background);
+    --progress-bar-background: var(--global-primary-background);
+}

package/dist/cjs/styles/search.scss

@@ -0,0 +1,476 @@
+// 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`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Search
+ ========================================================================== */
+
+/*
+ * 1. Container fits its content
+ * 2. Create position context
+ * 3. Prevent content overflow
+ * 4. Reset `form`
+ */
+
+.uk-search {
+    /* 1 */
+    display: inline-block;
+
+    /* 4 */
+    margin: 0;
+
+    /* 3 */
+    max-width: 100%;
+
+    /* 2 */
+    position: relative;
+}
+
+
+/* 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 {
+    /* 6 */
+    -webkit-appearance: none;
+
+    /* 9 */
+    border: none;
+
+    /* 3 */
+    border-radius: 0;
+
+    /* 1 */
+    box-sizing: border-box;
+    color: var(--search-color);
+
+    /* 4 */
+    font: inherit;
+
+    /* 2 */
+    margin: 0;
+
+    /* 5 */
+    overflow: visible;
+
+    /* 7 */
+    vertical-align: middle;
+
+    /* 8 */
+    width: 100%;
+    @if 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;
+
+    /* 3 */
+    color: var(--search-icon-color);
+
+    /* 2 */
+    display: inline-flex;
+    justify-content: center;
+    left: 0;
+
+    /* 1 */
+    position: absolute;
+    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):not(button):not(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 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 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 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 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 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 mixin-exists(hook-search-toggle-hover) {
+        @include hook-search-toggle-hover;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-search-misc) {
+    @include hook-search-misc;
+}
+
+// @mixin hook-search-input() {}
+// @mixin hook-search-default-input() {}
+// @mixin hook-search-default-input-focus() {}
+// @mixin hook-search-navbar-input() {}
+// @mixin hook-search-large-input() {}
+// @mixin hook-search-toggle() {}
+// @mixin hook-search-toggle-hover() {}
+// @mixin hook-search-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@mixin hook-inverse() {
+    //
+    // Input
+    //
+
+    .uk-search-input {
+        color: var(--inverse-search-color);
+    }
+
+    .uk-search-input:-ms-input-placeholder {
+        color: var(--inverse-search-placeholder-color) !important;
+    }
+
+    .uk-search-input::placeholder {
+        color: var(--inverse-search-placeholder-color);
+    }
+
+
+    //
+    // Icon
+    //
+
+    .uk-search .uk-search-icon {
+        color: var(--inverse-search-icon-color);
+    }
+
+    .uk-search .uk-search-icon:hover {
+        color: var(--inverse-search-icon-color);
+    }
+
+    //
+    // Style modifier
+    //
+
+    .uk-search-default .uk-search-input {
+        background-color: var(--inverse-search-default-background);
+        @if mixin-exists(hook-inverse-search-default-input) {
+            @include hook-inverse-search-default-input;
+        }
+    }
+
+    .uk-search-default .uk-search-input:focus {
+        background-color: var(--inverse-search-default-focus-background);
+        @if mixin-exists(hook-inverse-search-default-input-focus) {
+            @include hook-inverse-search-default-input-focus;
+        }
+    }
+
+    .uk-search-navbar .uk-search-input {
+        background-color: var(--inverse-search-navbar-background);
+        @if mixin-exists(hook-inverse-search-navbar-input) {
+            @include hook-inverse-search-navbar-input;
+        }
+    }
+
+    .uk-search-large .uk-search-input {
+        background-color: var(--inverse-search-large-background);
+        @if mixin-exists(hook-inverse-search-large-input) {
+            @include hook-inverse-search-large-input;
+        }
+    }
+
+    //
+    // Toggle
+    //
+
+    .uk-search-toggle {
+        color: var(--inverse-search-toggle-color);
+        @if mixin-exists(hook-inverse-search-toggle) {
+            @include hook-inverse-search-toggle;
+        }
+    }
+
+    .uk-search-toggle:hover,
+    .uk-search-toggle:focus {
+        color: var(--inverse-search-toggle-hover-color);
+        @if mixin-exists(hook-inverse-search-toggle-hover) {
+            @include hook-inverse-search-toggle-hover;
+        }
+    }
+}
+
+// @mixin hook-inverse-search-default-input() {}
+// @mixin hook-inverse-search-default-input-focus() {}
+// @mixin hook-inverse-search-navbar-input() {}
+// @mixin hook-inverse-search-large-input() {}
+// @mixin hook-inverse-search-toggle() {}
+// @mixin hook-inverse-search-toggle-hover() {}
+
+
+// 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/dist/cjs/styles/section.scss

@@ -0,0 +1 @@
+@import '../components/Section/index.scss';