@broxus/react-uikit 0.1.0

package/dist/cjs/styles/margin.scss

@@ -0,0 +1,307 @@
+// Name:            Margin
+// Description:     Utilities for margins
+//
+// Component:       `uk-margin-*`
+//                  `uk-margin-small-*`
+//                  `uk-margin-medium-*`
+//                  `uk-margin-large-*`
+//                  `uk-margin-xlarge-*`
+//                  `uk-margin-remove-*`
+//                  `uk-margin-auto-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Margin
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+.uk-margin { margin-bottom: var(--margin); }
+
+* + .uk-margin { margin-top: var(--margin) !important; }
+
+.uk-margin-top { margin-top: var(--margin) !important; }
+
+.uk-margin-bottom { margin-bottom: var(--margin) !important; }
+
+.uk-margin-left { margin-left: var(--margin) !important; }
+
+.uk-margin-right { margin-right: var(--margin) !important; }
+
+
+// Xsmall
+// ========================================================================
+
+.uk-margin-xsmall { margin-bottom: var(--xsmall-margin); }
+
+* + .uk-margin-xsmall { margin-top: var(--xsmall-margin) !important; }
+
+.uk-margin-xsmall-top { margin-top: var(--xsmall-margin) !important; }
+
+.uk-margin-xsmall-bottom { margin-bottom: var(--xsmall-margin) !important; }
+
+.uk-margin-xsmall-left { margin-left: var(--xsmall-margin) !important; }
+
+.uk-margin-xsmall-right { margin-right: var(--xsmall-margin) !important; }
+
+
+/* Small
+ ========================================================================== */
+
+.uk-margin-small { margin-bottom: var(--small-margin); }
+
+* + .uk-margin-small { margin-top: var(--small-margin) !important; }
+
+.uk-margin-small-top { margin-top: var(--small-margin) !important; }
+
+.uk-margin-small-bottom { margin-bottom: var(--small-margin) !important; }
+
+.uk-margin-small-left { margin-left: var(--small-margin) !important; }
+
+.uk-margin-small-right { margin-right: var(--small-margin) !important; }
+
+
+/* Medium
+ ========================================================================== */
+
+.uk-margin-medium { margin-bottom: var(--medium-margin); }
+
+* + .uk-margin-medium { margin-top: var(--medium-margin) !important; }
+
+.uk-margin-medium-top { margin-top: var(--medium-margin) !important; }
+
+.uk-margin-medium-bottom { margin-bottom: var(--medium-margin) !important; }
+
+.uk-margin-medium-left { margin-left: var(--medium-margin) !important; }
+
+.uk-margin-medium-right { margin-right: var(--medium-margin) !important; }
+
+
+/* Large
+ ========================================================================== */
+
+.uk-margin-large { margin-bottom: var(--large-margin); }
+
+* + .uk-margin-large { margin-top: var(--large-margin) !important; }
+
+.uk-margin-large-top { margin-top: var(--large-margin) !important; }
+
+.uk-margin-large-bottom { margin-bottom: var(--large-margin) !important; }
+
+.uk-margin-large-left { margin-left: var(--large-margin) !important; }
+
+.uk-margin-large-right { margin-right: var(--large-margin) !important; }
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+    .uk-margin-large { margin-bottom: var(--large-margin-l); }
+
+    * + .uk-margin-large { margin-top: var(--large-margin-l) !important; }
+
+    .uk-margin-large-top { margin-top: var(--large-margin-l) !important; }
+
+    .uk-margin-large-bottom { margin-bottom: var(--large-margin-l) !important; }
+
+    .uk-margin-large-left { margin-left: var(--large-margin-l) !important; }
+
+    .uk-margin-large-right { margin-right: var(--large-margin-l) !important; }
+}
+
+
+/* XLarge
+ ========================================================================== */
+
+.uk-margin-xlarge { margin-bottom: var(--xlarge-margin); }
+
+* + .uk-margin-xlarge { margin-top: var(--xlarge-margin) !important; }
+
+.uk-margin-xlarge-top { margin-top: var(--xlarge-margin) !important; }
+
+.uk-margin-xlarge-bottom { margin-bottom: var(--xlarge-margin) !important; }
+
+.uk-margin-xlarge-left { margin-left: var(--xlarge-margin) !important; }
+
+.uk-margin-xlarge-right { margin-right: var(--xlarge-margin) !important; }
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+    .uk-margin-xlarge { margin-bottom: var(--xlarge-margin-l); }
+
+    * + .uk-margin-xlarge { margin-top: var(--xlarge-margin-l) !important; }
+
+    .uk-margin-xlarge-top { margin-top: var(--xlarge-margin-l) !important; }
+
+    .uk-margin-xlarge-bottom { margin-bottom: var(--xlarge-margin-l) !important; }
+
+    .uk-margin-xlarge-left { margin-left: var(--xlarge-margin-l) !important; }
+
+    .uk-margin-xlarge-right { margin-right: var(--xlarge-margin-l) !important; }
+}
+
+
+/* Auto
+ ========================================================================== */
+
+.uk-margin-auto {
+    margin-left: auto !important;
+    margin-right: auto !important;
+}
+
+.uk-margin-auto-top { margin-top: auto !important; }
+
+.uk-margin-auto-bottom { margin-bottom: auto !important; }
+
+.uk-margin-auto-left { margin-left: auto !important; }
+
+.uk-margin-auto-right { margin-right: auto !important; }
+
+.uk-margin-auto-vertical {
+    margin-bottom: auto !important;
+    margin-top: auto !important;
+}
+
+/* Phone landscape and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-small) {
+    .uk-margin-auto\@s {
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+
+    .uk-margin-auto-left\@s { margin-left: auto !important; }
+
+    .uk-margin-auto-right\@s { margin-right: auto !important; }
+}
+
+/* Tablet landscape and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-medium) {
+    .uk-margin-auto\@m {
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+
+    .uk-margin-auto-left\@m { margin-left: auto !important; }
+
+    .uk-margin-auto-right\@m { margin-right: auto !important; }
+}
+
+/* Desktop and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-large) {
+    .uk-margin-auto\@l {
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+
+    .uk-margin-auto-left\@l { margin-left: auto !important; }
+
+    .uk-margin-auto-right\@l { margin-right: auto !important; }
+}
+
+/* Large screen and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-xlarge) {
+    .uk-margin-auto\@xl {
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+
+    .uk-margin-auto-left\@xl { margin-left: auto !important; }
+
+    .uk-margin-auto-right\@xl { margin-right: auto !important; }
+}
+
+
+/* Remove
+ ========================================================================== */
+
+.uk-margin-remove { margin: 0 !important; }
+
+.uk-margin-remove-top { margin-top: 0 !important; }
+
+.uk-margin-remove-bottom { margin-bottom: 0 !important; }
+
+.uk-margin-remove-left { margin-left: 0 !important; }
+
+.uk-margin-remove-right { margin-right: 0 !important; }
+
+.uk-margin-remove-vertical {
+    margin-bottom: 0 !important;
+    margin-top: 0 !important;
+}
+
+.uk-margin-remove-adjacent + *,
+.uk-margin-remove-first-child > :first-child { margin-top: 0 !important; }
+
+.uk-margin-remove-last-child > :last-child { margin-bottom: 0 !important; }
+
+/* Phone landscape and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-small) {
+
+    .uk-margin-remove-left\@s { margin-left: 0 !important; }
+
+    .uk-margin-remove-right\@s { margin-right: 0 !important; }
+}
+
+/* Tablet landscape and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-medium) {
+
+    .uk-margin-remove-left\@m { margin-left: 0 !important; }
+
+    .uk-margin-remove-right\@m { margin-right: 0 !important; }
+}
+
+/* Desktop and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-large) {
+
+    .uk-margin-remove-left\@l { margin-left: 0 !important; }
+
+    .uk-margin-remove-right\@l { margin-right: 0 !important; }
+}
+
+/* Large screen and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-margin-remove-left\@xl { margin-left: 0 !important; }
+
+    .uk-margin-remove-right\@xl { margin-right: 0 !important; }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-margin-misc) {
+    @include hook-margin-misc;
+}
+
+// @mixin hook-margin-misc() {}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --margin: var(--global-margin);
+    --small-margin: var(--global-small-margin);
+    --medium-margin: var(--global-medium-margin);
+    --large-margin: var(--global-medium-margin);
+    --large-margin-l: var(--global-large-margin);
+    --xlarge-margin: var(--global-large-margin);
+    --xlarge-margin-l: var(--global-xlarge-margin);
+}

package/dist/cjs/styles/marker.scss

@@ -0,0 +1,92 @@
+// Name:            Marker
+// Description:     Component to create a marker icon
+//
+// Component:       `uk-marker`
+//
+// ========================================================================
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Marker
+ ========================================================================== */
+
+/*
+ * Addopts `uk-icon`
+ */
+
+.uk-marker {
+    background: var(--marker-background);
+    color: var(--marker-color);
+    padding: var(--marker-padding);
+    @if mixin-exists(hook-marker) {
+        @include hook-marker;
+    }
+}
+
+/* Hover + Focus */
+.uk-marker:hover,
+.uk-marker:focus {
+    color: var(--marker-hover-color);
+    outline: none;
+    @if mixin-exists(hook-marker-hover) {
+        @include hook-marker-hover;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-marker-misc) {
+    @include hook-marker-misc;
+}
+
+// @mixin hook-marker() {}
+// @mixin hook-marker-hover() {}
+// @mixin hook-marker-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@mixin hook-inverse() {
+    .uk-marker {
+        background: var(--inverse-marker-background);
+        color: var(--inverse-marker-color);
+        @if mixin-exists(hook-inverse-marker) {
+            @include hook-inverse-marker;
+        }
+    }
+
+    .uk-marker:hover,
+    .uk-marker:focus {
+        color: var(--inverse-marker-hover-color);
+        @if mixin-exists(hook-inverse-marker-hover) {
+            @include hook-inverse-marker-hover;
+        }
+    }
+}
+
+// @mixin hook-inverse-marker() {}
+// @mixin hook-inverse-marker-hover() {}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --marker-padding: $marker-padding;
+    --marker-background: var(--global-secondary-background);
+    --marker-color: var(--global-inverse-color);
+    --marker-hover-color: var(--global-inverse-color);
+
+    // Inverse
+    --inverse-marker-background: var(--global-muted-background);
+    --inverse-marker-color: var(--global-color);
+    --inverse-marker-hover-color: var(--global-color);
+}

package/dist/cjs/styles/mixin.scss

@@ -0,0 +1,33 @@
+//
+// Component:       Mixin
+// Description:     Defines mixins which are used across all components
+//
+// ========================================================================
+
+
+// SVG
+// ========================================================================
+
+/// Replace `$search` with `$replace` in `$string`
+/// @author Hugo Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+    $index: str-index($string, $search);
+
+    @if $index {
+        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    }
+
+    @return $string;
+}
+
+// noinspection Stylelint
+@mixin svg-fill($src, $color-default, $color-new) {
+    $replace-src: str-replace($src, $color-default, $color-new) !default;
+    $replace-src: str-replace($replace-src, "#", "%23");
+
+    background-image: url(quote($replace-src));
+}