@broxus/react-uikit 0.22.0 → 0.23.0

package/dist/assets/dropdown.css

@@ -0,0 +1,118 @@
+/* ========================================================================
+   Component: Dropdown
+ ========================================================================== */
+/*
+ * 1. Set position
+ * 2. Set a default width
+ * 3. Style
+ */
+.uk-dropdown {
+  --uk-inverse: light;
+  background: var(--dropdown-background); /* 3 */
+  box-sizing: border-box; /* 2 */
+  color: var(--dropdown-color); /* 3 */
+  min-width: var(--dropdown-min-width); /* 2 */
+  padding: var(--dropdown-padding); /* 3 */
+  position: absolute; /* 1 */
+  z-index: var(--dropdown-z-index); /* 1 */
+}
+
+/* Hide */
+.uk-dropdown-hidden {
+  display: none;
+}
+
+/* Position Animation
+ ========================================================================== */
+[class*=uk-dropdown-placement-bottom].uk-slide-up-enter.uk-slide-up-enter-active, [class*=uk-dropdown-placement-bottom].uk-slide-up-appear.uk-slide-up-appear-active {
+  animation-name: uk-slide-up-in;
+}
+[class*=uk-dropdown-placement-bottom].uk-slide-up-leave.uk-slide-up-leave-active {
+  animation-name: uk-slide-up-out;
+}
+
+[class*=uk-dropdown-placement-top].uk-slide-up-enter.uk-slide-up-enter-active, [class*=uk-dropdown-placement-top].uk-slide-up-appear.uk-slide-up-appear-active {
+  animation-name: uk-slide-down-in;
+}
+[class*=uk-dropdown-placement-top].uk-slide-up-leave.uk-slide-up-leave-active {
+  animation-name: uk-slide-down-out;
+}
+
+/* Nav
+ * Adopts `uk-nav`
+ ========================================================================== */
+.uk-dropdown-nav {
+  white-space: nowrap;
+}
+
+/*
+ * Items
+ */
+.uk-dropdown-nav > li > a {
+  color: var(--dropdown-nav-item-color);
+}
+
+/* Hover + Focus + Active */
+.uk-dropdown-nav > li > a:hover,
+.uk-dropdown-nav > li > a:focus,
+.uk-dropdown-nav > li.uk-active > a {
+  color: var(--dropdown-nav-item-hover-color);
+}
+
+/*
+ * Header
+ */
+.uk-dropdown-nav .uk-nav-header {
+  color: var(--dropdown-nav-header-color);
+}
+
+/*
+ * Divider
+ */
+.uk-dropdown-nav .uk-nav-divider {
+  border-top: var(--dropdown-nav-divider-border-width) solid var(--dropdown-nav-divider-border);
+}
+
+/*
+ * Sublists
+ */
+.uk-dropdown-nav .uk-nav-sub a {
+  color: var(--dropdown-nav-sublist-item-color);
+}
+
+.uk-dropdown-nav .uk-nav-sub a:hover,
+.uk-dropdown-nav .uk-nav-sub a:focus,
+.uk-dropdown-nav .uk-nav-sub li.uk-active > a {
+  color: var(--dropdown-nav-sublist-item-hover-color);
+}
+
+/* Grid modifiers
+ ========================================================================== */
+.uk-dropdown-stack .uk-dropdown-grid > * {
+  width: 100% !important;
+}
+
+:root {
+  --dropdown-z-index: 1020;
+  --dropdown-min-width: 200px;
+  --dropdown-padding: 15px;
+  --dropdown-background: var(--global-muted-background);
+  --dropdown-border-radius: var(--global-border-radius);
+  --dropdown-color: var(--global-color);
+  --dropdown-margin: var(--global-small-margin);
+  --dropdown-nav-item-color: var(--global-muted-color);
+  --dropdown-nav-item-hover-color: var(--global-color);
+  --dropdown-nav-header-color: var(--global-emphasis-color);
+  --dropdown-nav-divider-border-width: var(--global-border-width);
+  --dropdown-nav-divider-border: var(--global-border);
+  --dropdown-nav-sublist-item-color: var(--global-muted-color);
+  --dropdown-nav-sublist-item-hover-color: var(--global-color);
+  --inverse-dropdown-background: var(--inverse-global-muted-background);
+  --inverse-dropdown-color: var(--inverse-global-color);
+  --inverse-dropdown-nav-item-color: var(--inverse-global-muted-color);
+  --inverse-dropdown-nav-item-hover-color: var(--inverse-global-color);
+  --inverse-dropdown-nav-header-color: var(--inverse-global-emphasis-color);
+  --inverse-dropdown-nav-divider-border: var(--inverse-global-border);
+  --inverse-dropdown-nav-sublist-item-color: var(--inverse-global-muted-color);
+  --inverse-dropdown-nav-sublist-item-hover-color: var(--inverse-global-color);
+}

package/dist/assets/flex.css

@@ -0,0 +1,392 @@
+/* ========================================================================
+   Component: Flex
+ ========================================================================== */
+.uk-flex {
+  display: flex;
+}
+
+.uk-flex-inline {
+  display: inline-flex;
+}
+
+/*
+ * Remove pseudo elements created by micro clearfix as precaution
+ */
+.uk-flex::before,
+.uk-flex::after,
+.uk-flex-inline::before,
+.uk-flex-inline::after {
+  display: none;
+}
+
+/* Alignment
+ ========================================================================== */
+/*
+ * Align items along the main axis of the current line of the flex container
+ * Row: Horizontal
+ */
+.uk-flex-left {
+  justify-content: flex-start;
+}
+
+.uk-flex-center {
+  justify-content: center;
+}
+
+.uk-flex-right {
+  justify-content: flex-end;
+}
+
+.uk-flex-between {
+  justify-content: space-between;
+}
+
+.uk-flex-around {
+  justify-content: space-around;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-flex-left\@s {
+    justify-content: flex-start;
+  }
+  .uk-flex-center\@s {
+    justify-content: center;
+  }
+  .uk-flex-right\@s {
+    justify-content: flex-end;
+  }
+  .uk-flex-between\@s {
+    justify-content: space-between;
+  }
+  .uk-flex-around\@s {
+    justify-content: space-around;
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-flex-left\@m {
+    justify-content: flex-start;
+  }
+  .uk-flex-center\@m {
+    justify-content: center;
+  }
+  .uk-flex-right\@m {
+    justify-content: flex-end;
+  }
+  .uk-flex-between\@m {
+    justify-content: space-between;
+  }
+  .uk-flex-around\@m {
+    justify-content: space-around;
+  }
+}
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-flex-left\@l {
+    justify-content: flex-start;
+  }
+  .uk-flex-center\@l {
+    justify-content: center;
+  }
+  .uk-flex-right\@l {
+    justify-content: flex-end;
+  }
+  .uk-flex-between\@l {
+    justify-content: space-between;
+  }
+  .uk-flex-around\@l {
+    justify-content: space-around;
+  }
+}
+/* Large screen and bigger */
+@media (min-width: 1600px) {
+  .uk-flex-left\@xl {
+    justify-content: flex-start;
+  }
+  .uk-flex-center\@xl {
+    justify-content: center;
+  }
+  .uk-flex-right\@xl {
+    justify-content: flex-end;
+  }
+  .uk-flex-between\@xl {
+    justify-content: space-between;
+  }
+  .uk-flex-around\@xl {
+    justify-content: space-around;
+  }
+}
+/*
+ * Align items in the cross axis of the current line of the flex container
+ * Row: Vertical
+ */
+.uk-flex-stretch {
+  align-items: stretch;
+}
+
+.uk-flex-top {
+  align-items: flex-start;
+}
+
+.uk-flex-middle {
+  align-items: center;
+}
+
+.uk-flex-bottom {
+  align-items: flex-end;
+}
+
+/* Direction
+ ========================================================================== */
+.uk-flex-row {
+  flex-direction: row;
+}
+
+.uk-flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.uk-flex-column {
+  flex-direction: column;
+}
+
+.uk-flex-column-reverse {
+  flex-direction: column-reverse;
+}
+
+/* Wrap
+ ========================================================================== */
+.uk-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.uk-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.uk-flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+/*
+ * Aligns items within the flex container when there is extra space in the cross-axis
+ * Only works if there is more than one line of flex items
+ */
+.uk-flex-wrap-stretch {
+  align-content: stretch;
+}
+
+.uk-flex-wrap-top {
+  align-content: flex-start;
+}
+
+.uk-flex-wrap-middle {
+  align-content: center;
+}
+
+.uk-flex-wrap-bottom {
+  align-content: flex-end;
+}
+
+.uk-flex-wrap-between {
+  align-content: space-between;
+}
+
+.uk-flex-wrap-around {
+  align-content: space-around;
+}
+
+/* Item ordering
+ ========================================================================== */
+/*
+ * Default is 0
+ */
+.uk-flex-first {
+  order: -1;
+}
+
+.uk-flex-last {
+  order: 99;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-flex-first\@s {
+    order: -1;
+  }
+  .uk-flex-last\@s {
+    order: 99;
+  }
+  .uk-flex-nowrap\@s {
+    flex-wrap: nowrap;
+  }
+  .uk-flex-wrap\@s {
+    flex-wrap: wrap;
+  }
+  .uk-flex-wrap-reverse\@s {
+    flex-wrap: wrap-reverse;
+  }
+  .uk-flex-wrap-stretch\@s {
+    align-content: stretch;
+  }
+  .uk-flex-wrap-top\@s {
+    align-content: flex-start;
+  }
+  .uk-flex-wrap-middle\@s {
+    align-content: center;
+  }
+  .uk-flex-wrap-bottom\@s {
+    align-content: flex-end;
+  }
+  .uk-flex-wrap-between\@s {
+    align-content: space-between;
+  }
+  .uk-flex-wrap-around\@s {
+    align-content: space-around;
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-flex-first\@m {
+    order: -1;
+  }
+  .uk-flex-last\@m {
+    order: 99;
+  }
+  .uk-flex-nowrap\@m {
+    flex-wrap: nowrap;
+  }
+  .uk-flex-wrap\@m {
+    flex-wrap: wrap;
+  }
+  .uk-flex-wrap-reverse\@m {
+    flex-wrap: wrap-reverse;
+  }
+  .uk-flex-wrap-stretch\@m {
+    align-content: stretch;
+  }
+  .uk-flex-wrap-top\@m {
+    align-content: flex-start;
+  }
+  .uk-flex-wrap-middle\@m {
+    align-content: center;
+  }
+  .uk-flex-wrap-bottom\@m {
+    align-content: flex-end;
+  }
+  .uk-flex-wrap-between\@m {
+    align-content: space-between;
+  }
+  .uk-flex-wrap-around\@m {
+    align-content: space-around;
+  }
+}
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-flex-first\@l {
+    order: -1;
+  }
+  .uk-flex-last\@l {
+    order: 99;
+  }
+  .uk-flex-nowrap\@l {
+    flex-wrap: nowrap;
+  }
+  .uk-flex-wrap\@l {
+    flex-wrap: wrap;
+  }
+  .uk-flex-wrap-reverse\@l {
+    flex-wrap: wrap-reverse;
+  }
+  .uk-flex-wrap-stretch\@l {
+    align-content: stretch;
+  }
+  .uk-flex-wrap-top\@l {
+    align-content: flex-start;
+  }
+  .uk-flex-wrap-middle\@l {
+    align-content: center;
+  }
+  .uk-flex-wrap-bottom\@l {
+    align-content: flex-end;
+  }
+  .uk-flex-wrap-between\@l {
+    align-content: space-between;
+  }
+  .uk-flex-wrap-around\@l {
+    align-content: space-around;
+  }
+}
+/* Large screen and bigger */
+@media (min-width: 1600px) {
+  .uk-flex-first\@xl {
+    order: -1;
+  }
+  .uk-flex-last\@xl {
+    order: 99;
+  }
+  .uk-flex-nowrap\@xl {
+    flex-wrap: nowrap;
+  }
+  .uk-flex-wrap\@xl {
+    flex-wrap: wrap;
+  }
+  .uk-flex-wrap-reverse\@xl {
+    flex-wrap: wrap-reverse;
+  }
+  .uk-flex-wrap-stretch\@xl {
+    align-content: stretch;
+  }
+  .uk-flex-wrap-top\@xl {
+    align-content: flex-start;
+  }
+  .uk-flex-wrap-middle\@xl {
+    align-content: center;
+  }
+  .uk-flex-wrap-bottom\@xl {
+    align-content: flex-end;
+  }
+  .uk-flex-wrap-between\@xl {
+    align-content: space-between;
+  }
+  .uk-flex-wrap-around\@xl {
+    align-content: space-around;
+  }
+}
+/* Item dimensions
+ ========================================================================== */
+/*
+ * Initial: 0 1 auto
+ * Content dimensions, but shrinks
+ */
+/*
+ * No Flex: 0 0 auto
+ * Content dimensions
+ */
+.uk-flex-none {
+  flex: none;
+}
+
+/*
+ * Relative Flex: 1 1 auto
+ * Space is allocated considering content
+ */
+.uk-flex-auto {
+  flex: auto;
+}
+
+/*
+ * Absolute Flex: 1 1 0%
+ * Space is allocated solely based on flex
+ */
+.uk-flex-1 {
+  flex: 1;
+}
+
+/*
+ * Fill Flex: 1 0 auto
+ */
+.uk-flex-fill {
+  flex: 1 0 auto;
+}