@broxus/react-uikit 0.22.0 → 0.23.0

package/dist/assets/divider.css

@@ -0,0 +1,98 @@
+/* ========================================================================
+   Component: Divider
+ ========================================================================== */
+/*
+ * 1. Reset default `hr`
+ * 2. Set margin if a `div` is used for semantical reason
+ */
+[class*=uk-divider] {
+  /* 1 */
+  border: none;
+  /* 2 */
+  margin-bottom: var(--divider-margin-vertical);
+}
+
+/* Add margin if adjacent element */
+* + [class*=uk-divider] {
+  margin-top: var(--divider-margin-vertical);
+}
+
+/* Icon
+ ========================================================================== */
+.uk-divider-icon {
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  height: var(--divider-icon-height);
+  position: relative;
+}
+
+.uk-divider-icon::before,
+.uk-divider-icon::after {
+  border-bottom: var(--divider-icon-line-border-width) solid var(--divider-icon-line-border);
+  content: "";
+  max-width: calc(50% - var(--divider-icon-width) / 2);
+  position: absolute;
+  top: var(--divider-icon-line-top);
+}
+
+.uk-divider-icon::before {
+  right: calc(50% + var(--divider-icon-width) / 2);
+  width: var(--divider-icon-line-width);
+}
+
+.uk-divider-icon::after {
+  left: calc(50% + var(--divider-icon-width) / 2);
+  width: var(--divider-icon-line-width);
+}
+
+/* Small
+ ========================================================================== */
+/*
+ * 1. Fix height because of `inline-block`
+ * 2. Using ::after and inline-block to make `text-align` work
+ */
+/* 1 */
+.uk-divider-small {
+  line-height: 0;
+}
+
+/* 2 */
+.uk-divider-small::after {
+  border-top: var(--divider-small-border-width) solid var(--divider-small-border);
+  content: "";
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: top;
+  width: var(--divider-small-width);
+}
+
+/* Vertical
+ ========================================================================== */
+.uk-divider-vertical {
+  border-left: var(--divider-vertical-border-width) solid var(--divider-vertical-border);
+  height: var(--divider-vertical-height);
+  margin-left: auto;
+  margin-right: auto;
+  width: 1px;
+}
+
+:root {
+  --divider-margin-vertical: var(--global-margin);
+  --divider-icon-width: 50px;
+  --divider-icon-height: 20px;
+  --divider-icon-color: var(--global-border);
+  --divider-icon-line-top: 50%;
+  --divider-icon-line-width: 100%;
+  --divider-icon-line-border-width: var(--global-border-width);
+  --divider-icon-line-border: var(--global-border);
+  --divider-small-width: 100px;
+  --divider-small-border-width: var(--global-border-width);
+  --divider-small-border: var(--global-border);
+  --divider-vertical-height: 100px;
+  --divider-vertical-border-width: var(--global-border-width);
+  --divider-vertical-border: var(--global-border);
+  --inverse-divider-icon-color: var(--inverse-global-border);
+  --inverse-divider-icon-line-border: var(--inverse-global-border);
+  --inverse-divider-small-border: var(--inverse-global-border);
+  --inverse-divider-vertical-border: var(--inverse-global-border);
+}

package/dist/assets/dotnav.css

@@ -0,0 +1,100 @@
+/* ========================================================================
+   Component: Dotnav
+ ========================================================================== */
+/*
+ * 1. Allow items to wrap into the next line
+ * 2. Reset list
+ * 3. Gutter
+ */
+.uk-dotnav {
+  display: flex;
+  /* 1 */
+  flex-wrap: wrap;
+  list-style: none;
+  /* 2 */
+  margin: 0 0 0 calc(var(--dotnav-margin-horizontal) * -1);
+  padding: 0;
+}
+
+/*
+ * 1. Space is allocated solely based on content dimensions: 0 0 auto
+ * 2. Gutter
+ */
+.uk-dotnav > * {
+  /* 1 */
+  flex: none;
+  /* 2 */
+  padding-left: var(--dotnav-margin-horizontal);
+}
+
+/* Items
+ ========================================================================== */
+/*
+ * Items
+ * 1. Hide text if present
+ */
+.uk-dotnav > * > * {
+  background: var(--dotnav-item-background);
+  border-radius: var(--dotnav-item-border-radius);
+  box-sizing: border-box;
+  display: block;
+  height: var(--dotnav-item-height);
+  overflow: hidden;
+  /* 1 */
+  text-indent: 100%;
+  white-space: nowrap;
+  width: var(--dotnav-item-width);
+}
+
+/* Hover + Focus */
+.uk-dotnav > * > :hover,
+.uk-dotnav > * > :focus {
+  background-color: var(--dotnav-item-hover-background);
+  outline: none;
+}
+
+/* OnClick */
+.uk-dotnav > * > :active {
+  background-color: var(--dotnav-item-onclick-background);
+}
+
+/* Active */
+.uk-dotnav > .uk-active > * {
+  background-color: var(--dotnav-item-active-background);
+}
+
+/* Modifier: 'uk-dotnav-vertical'
+ ========================================================================== */
+/*
+ * 1. Change direction
+ * 2. Gutter
+ */
+.uk-dotnav-vertical {
+  /* 1 */
+  flex-direction: column;
+  /* 2 */
+  margin-left: 0;
+  margin-top: calc(var(--dotnav-margin-vertical) * -1);
+}
+
+/* 2 */
+.uk-dotnav-vertical > * {
+  padding-left: 0;
+  padding-top: var(--dotnav-margin-vertical);
+}
+
+:root {
+  --dotnav-margin-horizontal: 12px;
+  --dotnav-margin-vertical: var(--dotnav-margin-horizontal);
+  --dotnav-item-width: 10px;
+  --dotnav-item-height: 10px;
+  --dotnav-item-border-radius: 50%;
+  --dotnav-item-background: rgba(102, 102, 102, 0.2);
+  --dotnav-item-hover-background: rgba(102, 102, 102, 0.6);
+  --dotnav-item-onclick-background: rgba(102, 102, 102, 0.2);
+  --dotnav-item-active-background: rgba(102, 102, 102, 0.6);
+  --inverse-dotnav-item-background: rgba(255, 255, 255, 0.5);
+  --inverse-dotnav-item-hover-background: rgba(255, 255, 255, 0.9);
+  --inverse-dotnav-item-onclick-background: rgba(255, 255, 255, 0.5);
+  --inverse-dotnav-item-active-background: rgba(255, 255, 255, 0.9);
+}