@broxus/react-uikit 0.4.7 → 0.5.0

package/dist/esm/components/Subnav/index.scss

@@ -0,0 +1,278 @@
+// Name:            List
+// Description:     Styles for lists
+//
+// Component:       `uk-list`
+//
+// Modifiers:       `uk-list-disc`
+//                  `uk-list-circle`
+//                  `uk-list-square`
+//                  `uk-list-decimal`
+//                  `uk-list-hyphen`
+//                  `uk-list-muted`
+//                  `uk-list-emphasis`
+//                  `uk-list-primary`
+//                  `uk-list-secondary`
+//                  `uk-list-bullet`
+//                  `uk-list-divider`
+//                  `uk-list-striped`
+//                  `uk-list-large`
+//                  `uk-list-collapse`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: List
+ ========================================================================== */
+
+.uk-list {
+    list-style: none;
+    padding: 0;
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-list > * > :last-child {
+    margin-bottom: 0;
+}
+
+/*
+ * Style
+ */
+
+.uk-list > :nth-child(n+2),
+.uk-list > * > ul {
+    margin-top: var(--list-margin-top);
+}
+
+
+/* Marker modifiers
+ * Moving `::marker` inside `::before` to style it differently
+ * To style the `::marker` is currently only supported in Firefox and Safari
+ ========================================================================== */
+
+.uk-list-disc > *,
+.uk-list-circle > *,
+.uk-list-square > *,
+.uk-list-decimal > *,
+.uk-list-hyphen > * {
+    padding-left: var(--list-padding-left);
+}
+
+/*
+ * Type modifiers
+ */
+
+.uk-list-decimal {
+    counter-reset: decimal;
+}
+
+.uk-list-decimal > * {
+    counter-increment: decimal;
+}
+
+[class*='uk-list'] > ::before {
+    content: '';
+    display: list-item;
+    height: var(--list-marker-height);
+    left: calc(var(--list-padding-left) * -1);
+    list-style-position: inside;
+    margin-bottom: calc(var(--list-marker-height) * -1);
+    position: relative;
+    text-align: right;
+    width: var(--list-padding-left);
+}
+
+.uk-list-disc > ::before {
+    list-style-type: disc;
+}
+
+.uk-list-circle > ::before {
+    list-style-type: circle;
+}
+
+.uk-list-square > ::before {
+    list-style-type: square;
+}
+
+.uk-list-decimal > ::before {
+    content: counter(decimal, decimal) '\200A.\00A0';
+}
+
+.uk-list-hyphen > ::before {
+    content: '–\00A0\00A0';
+}
+
+/*
+ * Color modifiers
+ */
+
+.uk-list-muted > ::before {
+    color: var(--list-muted-color) !important;
+}
+
+.uk-list-emphasis > ::before {
+    color: var(--list-emphasis-color) !important;
+}
+
+.uk-list-primary > ::before {
+    color: var(--list-primary-color) !important;
+}
+
+.uk-list-secondary > ::before {
+    color: var(--list-secondary-color) !important;
+}
+
+
+/* Image bullet modifier
+ ========================================================================== */
+
+.uk-list-bullet > * {
+    padding-left: var(--list-padding-left);
+}
+
+.uk-list-bullet > ::before {
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    content: '';
+    height: var(--list-marker-height);
+    left: calc(var(--list-padding-left) * -1);
+    margin-bottom: calc(var(--list-marker-height) * -1);
+    position: relative;
+    width: var(--list-padding-left);
+    @if mixin-exists(svg-fill) {
+        @include svg-fill($list-bullet-icon-image-path, '#000', $list-bullet-icon-color);
+    }
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Divider
+ */
+
+.uk-list-divider > :nth-child(n+2) {
+    border-top: var(--list-divider-border-width) solid var(--list-divider-border);
+    margin-top: var(--list-divider-margin-top);
+    padding-top: var(--list-divider-margin-top);
+    @if mixin-exists(hook-list-divider) {
+        @include hook-list-divider;
+    }
+}
+
+/*
+ * Striped
+ */
+
+.uk-list-striped > * {
+    padding: var(--list-striped-padding-vertical) var(--list-striped-padding-horizontal);
+    @if mixin-exists(hook-list-striped) {
+        @include hook-list-striped;
+    }
+}
+
+.uk-list-striped > :nth-of-type(odd) {
+    background: var(--list-striped-background);
+}
+
+.uk-list-striped > :nth-child(n+2) {
+    margin-top: 0;
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-list-large > :nth-child(n+2),
+.uk-list-large > * > ul {
+    margin-top: var(--list-large-margin-top);
+}
+
+.uk-list-collapse > :nth-child(n+2),
+.uk-list-collapse > * > ul {
+    margin-top: 0;
+}
+
+/*
+ * Divider
+ */
+
+.uk-list-large.uk-list-divider > :nth-child(n+2) {
+    margin-top: var(--list-large-divider-margin-top);
+    padding-top: var(--list-large-divider-margin-top);
+}
+
+.uk-list-collapse.uk-list-divider > :nth-child(n+2) {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+/*
+ * Striped
+ */
+
+.uk-list-large.uk-list-striped > * {
+    padding: var(--list-large-striped-padding-vertical) var(--list-large-striped-padding-horizontal);
+}
+
+.uk-list-collapse.uk-list-striped > * {
+    padding-bottom: 0;
+    padding-top: 0;
+}
+
+.uk-list-large.uk-list-striped > :nth-child(n+2),
+.uk-list-collapse.uk-list-striped > :nth-child(n+2) {
+    margin-top: 0;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-list-misc) {
+    @include hook-list-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --list-margin-top: var(--global-small-margin);
+    --list-padding-left: #{$list-padding-left};
+    --list-marker-height: calc(var(--global-line-height) * 1em);
+    --list-muted-color: var(--global-muted-color);
+    --list-emphasis-color: var(--global-emphasis-color);
+    --list-primary-color: var(--global-primary-background);
+    --list-secondary-color: var(--global-secondary-background);
+    --list-bullet-icon-color: var(--global-color);
+    --list-divider-margin-top: var(--global-small-margin);
+    --list-divider-border-width: var(--global-border-width);
+    --list-divider-border: var(--global-border);
+    --list-striped-padding-vertical: var(--global-small-margin);
+    --list-striped-padding-horizontal: var(--global-small-margin);
+    --list-striped-background: var(--global-muted-background);
+    --list-large-margin-top: var(--global-margin);
+    --list-large-divider-margin-top: var(--global-margin);
+    --list-large-striped-padding-vertical: var(--global-margin);
+    --list-large-striped-padding-horizontal: var(--global-small-margin);
+
+    // Inverse
+    --inverse-list-muted-color: var(--inverse-global-muted-color);
+    --inverse-list-emphasis-color: var(--inverse-global-emphasis-color);
+    --inverse-list-primary-color: var(--inverse-global-primary-background);
+    --inverse-list-secondary-color: var(--inverse-global-primary-background);
+    --inverse-list-divider-border: var(--inverse-global-border);
+    --inverse-list-striped-background: var(--inverse-global-muted-background);
+    --inverse-list-bullet-icon-color: var(--inverse-global-color);
+}

package/dist/esm/index.d.ts

@@ -32,7 +32,6 @@ export * from './components/Dropdown';
 export * from './components/Modal';
 export * from './components/Drawer';
 export * from './components/Component';
-export * from './components/ComponentProvider';
 export * from './components/ConfigProvider';
 export * from './components/Width';
 export * from './components/Text';

package/dist/esm/index.js

@@ -32,7 +32,6 @@ export * from './components/Dropdown';
 export * from './components/Modal';
 export * from './components/Drawer';
 export * from './components/Component';
-export * from './components/ComponentProvider';
 export * from './components/ConfigProvider';
 export * from './components/Width';
 export * from './components/Text';

package/dist/esm/styles/margin.scss

@@ -298,6 +298,7 @@
 
 :root {
     --margin: var(--global-margin);
+    --xsmall-margin: var(--global-xsmall-margin);
     --small-margin: var(--global-small-margin);
     --medium-margin: var(--global-medium-margin);
     --large-margin: var(--global-medium-margin);