@broxus/react-uikit 0.1.0

package/dist/cjs/styles/background.scss

@@ -0,0 +1,261 @@
+// Name:            Background
+// Description:     Utilities for backgrounds
+//
+// Component:       `uk-background-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Background
+ ========================================================================== */
+
+
+/* Color
+ ========================================================================== */
+
+.uk-background-default {
+    background-color: var(--default-background);
+}
+
+.uk-background-muted {
+    background-color: var(--muted-background);
+}
+
+.uk-background-primary {
+    background-color: var(--primary-background);
+}
+
+.uk-background-secondary {
+    background-color: var(--secondary-background);
+}
+
+.uk-background-tertiary {
+    background-color: var(--tertiary-background);
+}
+
+
+/* Size
+ ========================================================================== */
+
+.uk-background-cover,
+.uk-background-contain,
+.uk-background-width-1-1,
+.uk-background-height-1-1 {
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+}
+
+.uk-background-cover {
+    background-size: cover;
+}
+
+.uk-background-contain {
+    background-size: contain;
+}
+
+.uk-background-width-1-1 {
+    background-size: 100%;
+}
+
+.uk-background-height-1-1 {
+    background-size: auto 100%;
+}
+
+
+/* Position
+ ========================================================================== */
+
+.uk-background-top-left {
+    background-position: 0 0;
+}
+
+.uk-background-top-center {
+    background-position: 50% 0;
+}
+
+.uk-background-top-right {
+    background-position: 100% 0;
+}
+
+.uk-background-center-left {
+    background-position: 0 50%;
+}
+
+.uk-background-center-center {
+    background-position: 50% 50%;
+}
+
+.uk-background-center-right {
+    background-position: 100% 50%;
+}
+
+.uk-background-bottom-left {
+    background-position: 0 100%;
+}
+
+.uk-background-bottom-center {
+    background-position: 50% 100%;
+}
+
+.uk-background-bottom-right {
+    background-position: 100% 100%;
+}
+
+
+/* Repeat
+ ========================================================================== */
+
+.uk-background-no-repeat {
+    background-repeat: no-repeat;
+}
+
+
+/* Attachment
+ ========================================================================== */
+
+/*
+ * 1. Fix bug introduced in Chrome 67: the background image is not visible if any element on the page uses `translate3d`
+ */
+
+.uk-background-fixed {
+    /* 1 */
+    backface-visibility: hidden;
+    background-attachment: fixed;
+}
+
+/*
+ * Exclude touch devices because `fixed` doesn't work on iOS and Android
+ */
+
+@media (pointer: coarse) {
+    .uk-background-fixed {
+        background-attachment: scroll;
+    }
+}
+
+
+/* Image
+ ========================================================================== */
+
+/* Phone portrait and smaller */
+@media (max-width: $breakpoint-xsmall-max) {
+    .uk-background-image\@s {
+        background-image: none !important;
+    }
+
+}
+
+/* Phone landscape and smaller */
+@media (max-width: $breakpoint-small-max) {
+    .uk-background-image\@m {
+        background-image: none !important;
+    }
+
+}
+
+/* Tablet landscape and smaller */
+@media (max-width: $breakpoint-medium-max) {
+    .uk-background-image\@l {
+        background-image: none !important;
+    }
+
+}
+
+/* Desktop and smaller */
+@media (max-width: $breakpoint-large-max) {
+    .uk-background-image\@xl {
+        background-image: none !important;
+    }
+
+}
+
+
+/* Blend modes
+ ========================================================================== */
+
+.uk-background-blend-multiply {
+    background-blend-mode: multiply;
+}
+
+.uk-background-blend-screen {
+    background-blend-mode: screen;
+}
+
+.uk-background-blend-overlay {
+    background-blend-mode: overlay;
+}
+
+.uk-background-blend-darken {
+    background-blend-mode: darken;
+}
+
+.uk-background-blend-lighten {
+    background-blend-mode: lighten;
+}
+
+.uk-background-blend-color-dodge {
+    background-blend-mode: color-dodge;
+}
+
+.uk-background-blend-color-burn {
+    background-blend-mode: color-burn;
+}
+
+.uk-background-blend-hard-light {
+    background-blend-mode: hard-light;
+}
+
+.uk-background-blend-soft-light {
+    background-blend-mode: soft-light;
+}
+
+.uk-background-blend-difference {
+    background-blend-mode: difference;
+}
+
+.uk-background-blend-exclusion {
+    background-blend-mode: exclusion;
+}
+
+.uk-background-blend-hue {
+    background-blend-mode: hue;
+}
+
+.uk-background-blend-saturation {
+    background-blend-mode: saturation;
+}
+
+.uk-background-blend-color {
+    background-blend-mode: color;
+}
+
+.uk-background-blend-luminosity {
+    background-blend-mode: luminosity;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-background-misc) {
+    @include hook-background-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --default-background: var(--global-default-background);
+    --muted-background: var(--global-muted-background);
+    --primary-background: var(--global-primary-background);
+    --secondary-background: var(--global-secondary-background);
+    --tertiary-background: var(--global-tertiary-background);
+}

package/dist/cjs/styles/badge.scss

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