@broxus/react-uikit 0.22.0 → 0.23.0

package/dist/assets/accordion.css

@@ -0,0 +1,135 @@
+/* ========================================================================
+   Component: Accordion
+ ========================================================================== */
+.uk-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--accordion-gutter);
+  list-style: none;
+  padding: 0;
+}
+
+/* Item
+ ========================================================================== */
+/* Header
+ ========================================================================== */
+.uk-accordion-header {
+  align-items: center;
+  color: var(--accordion-header-color);
+  cursor: pointer;
+  display: flex;
+}
+
+/*
+ * Header collapsible area
+ */
+.uk-accordion-collapsible-header {
+  cursor: default;
+}
+
+.uk-accordion-collapsible-header .uk-accordion-title {
+  cursor: pointer;
+}
+
+.uk-accordion-collapsible-header .uk-accordion-expand-icon {
+  pointer-events: none;
+}
+
+/*
+ * Icon collapsible area
+ */
+.uk-accordion-collapsible-icon {
+  cursor: default;
+}
+
+.uk-accordion-collapsible-icon .uk-accordion-expand-icon {
+  cursor: pointer;
+}
+
+/* Title */
+.uk-accordion-title {
+  color: var(--accordion-title-color);
+  font-size: var(--accordion-title-font-size);
+  line-height: var(--accordion-title-line-height);
+}
+
+/* Hover + Focus */
+:not(.uk-accordion-collapsible-disabled, .uk-accordion-collapsible-icon):hover > .uk-accordion-title,
+:not(.uk-accordion-collapsible-disabled, .uk-accordion-collapsible-icon) > .uk-accordion-title:hover {
+  color: var(--accordion-title-hover-color);
+  outline: none;
+  text-decoration: none;
+}
+
+/* Expand Icon */
+.uk-accordion-expand-icon {
+  --icon-size: var(--accordion-icon-size);
+  margin-right: var(--accordion-icon-margin-right);
+}
+
+/* Disabled item
+ ========================================================================== */
+.uk-accordion-collapsible-disabled {
+  color: var(--accordion-item-disabled-color);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+/* Content panel
+ ========================================================================== */
+.uk-accordion-panel {
+  box-sizing: border-box;
+  display: flow-root;
+  overflow: hidden;
+}
+
+/*
+ * Remove margin from the last-child
+ */
+.uk-accordion-panel > :last-child {
+  margin-bottom: 0;
+}
+
+.uk-accordion-body {
+  box-sizing: border-box;
+  margin-top: var(--accordion-gutter);
+}
+
+/* Header extra
+ ========================================================================== */
+.uk-accordion-extra {
+  margin-left: auto;
+  margin-right: var(--accordion-extra-margin-horizontal);
+}
+
+[dir=rtl] .uk-accordion,
+.uk-accordion.uk-accordion-rtl {
+  direction: rtl;
+}
+[dir=rtl] .uk-accordion .uk-accordion-expand-icon,
+.uk-accordion.uk-accordion-rtl .uk-accordion-expand-icon {
+  margin-left: var(--accordion-icon-margin-right);
+  margin-right: unset;
+}
+[dir=rtl] .uk-accordion .uk-accordion-extra,
+.uk-accordion.uk-accordion-rtl .uk-accordion-extra {
+  margin-left: var(--accordion-extra-margin-horizontal);
+  margin-right: auto;
+}
+
+:root {
+  --accordion-gutter: var(--global-margin);
+  --accordion-item-disabled-color: var(--global-muted-color);
+  --accordion-header-color: var(--global-emphasis-color);
+  --accordion-title-font-size: var(--global-medium-font-size);
+  --accordion-title-line-height: 1.4;
+  --accordion-title-color: var(--global-emphasis-color);
+  --accordion-title-hover-color: var(--global-color);
+  --accordion-extra-margin-horizontal: var(--global-small-margin);
+  --accordion-icon-margin-right: var(--global-small-margin);
+  --accordion-icon-color: var(--global-color);
+  --accordion-icon-size: 1.4rem;
+  --inverse-accordion-title-color: var(--inverse-global-emphasis-color);
+  --inverse-accordion-title-hover-color: var(--inverse-global-color);
+  --inverse-accordion-item-disabled-color: var(--inverse-global-emphasis-color);
+}

package/dist/assets/alert.css

@@ -0,0 +1,120 @@
+/* ========================================================================
+   Component: Alert
+ ========================================================================== */
+.uk-alert {
+  background: var(--alert-background);
+  color: var(--alert-color);
+  margin-bottom: var(--alert-margin-vertical);
+  padding: var(--alert-padding);
+  padding-right: var(--alert-padding-right);
+  position: relative;
+}
+
+/* Add margin if adjacent element */
+* + .uk-alert {
+  margin-top: var(--alert-margin-vertical);
+}
+
+/*
+ * Remove margin from the last-child
+ */
+.uk-alert > :last-child {
+  margin-bottom: 0;
+}
+
+/* Close
+ * Adopts `uk-close`
+ ========================================================================== */
+.uk-alert-close {
+  position: absolute;
+  right: var(--alert-close-right);
+  top: var(--alert-close-top);
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+.uk-alert-close:first-child + * {
+  margin-top: 0;
+}
+
+/*
+ * Hover + Focus
+ */
+.uk-alert-close:hover,
+.uk-alert-close:focus {
+  --close-hover-color: initial;
+  opacity: 0.8;
+}
+
+/* Style modifiers
+ ========================================================================== */
+/*
+ * Primary
+ */
+.uk-alert-primary {
+  background: var(--alert-primary-background);
+  color: var(--alert-primary-color);
+}
+
+/*
+ * Success
+ */
+.uk-alert-success {
+  background: var(--alert-success-background);
+  color: var(--alert-success-color);
+}
+
+/*
+ * Warning
+ */
+.uk-alert-warning {
+  background: var(--alert-warning-background);
+  color: var(--alert-warning-color);
+}
+
+/*
+ * Danger
+ */
+.uk-alert-danger {
+  background: var(--alert-danger-background);
+  color: var(--alert-danger-color);
+}
+
+/* Motion
+ ========================================================================== */
+.uk-alert-motion {
+  transition: height var(--transition-duration), opacity var(--transition-duration);
+}
+
+.uk-alert-motion-leave {
+  opacity: 1;
+  overflow: hidden;
+  transition: max-height var(--transition-duration) var(--ease-in-out-circ), opacity var(--transition-duration) var(--ease-in-out-circ), padding-top var(--transition-duration) var(--ease-in-out-circ), padding-bottom var(--transition-duration) var(--ease-in-out-circ), margin-bottom var(--transition-duration) var(--ease-in-out-circ);
+}
+
+.uk-alert-motion-leave-active {
+  margin-bottom: 0 !important;
+  max-height: 0;
+  opacity: 0;
+  padding-bottom: 0;
+  padding-top: 0;
+}
+
+:root {
+  --alert-margin-vertical: var(--global-margin);
+  --alert-padding: var(--global-small-gutter);
+  --alert-padding-right: calc(var(--alert-padding) + 15px);
+  --alert-background: var(--global-muted-background);
+  --alert-color: var(--global-color);
+  --alert-close-top: var(--alert-padding);
+  --alert-close-right: var(--alert-padding);
+  --alert-primary-background: rgb(147, 197.4, 247.8);
+  --alert-primary-color: var(--global-primary-color);
+  --alert-success-background: rgb(152.85, 221.7, 196.05);
+  --alert-success-color: var(--global-success-color);
+  --alert-warning-background: rgb(255, 223.6775, 180.6675);
+  --alert-warning-color: var(--global-warning-color);
+  --alert-danger-background: rgb(250.2, 178.68, 168.6);
+  --alert-danger-color: var(--global-danger-color);
+}

package/dist/assets/align.css

@@ -0,0 +1,105 @@
+/* ========================================================================
+   Component: Align
+ ========================================================================== */
+/*
+ * Default
+ */
+[class*=uk-align] {
+  display: block;
+  margin-bottom: var(--align-margin-vertical);
+}
+
+* + [class*=uk-align] {
+  margin-top: var(--align-margin-vertical);
+}
+
+/*
+ * Center
+ */
+.uk-align-center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/*
+ * Left/Right
+ */
+.uk-align-left {
+  float: left;
+  margin-right: var(--align-margin-horizontal);
+  margin-top: 0;
+}
+
+.uk-align-right {
+  float: right;
+  margin-left: var(--align-margin-horizontal);
+  margin-top: 0;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-align-left\@s {
+    float: left;
+    margin-right: var(--align-margin-horizontal);
+    margin-top: 0;
+  }
+  .uk-align-right\@s {
+    float: right;
+    margin-left: var(--align-margin-horizontal);
+    margin-top: 0;
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-align-left\@m {
+    float: left;
+    margin-right: var(--align-margin-horizontal);
+    margin-top: 0;
+  }
+  .uk-align-right\@m {
+    float: right;
+    margin-left: var(--align-margin-horizontal);
+    margin-top: 0;
+  }
+}
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-align-left\@l {
+    float: left;
+    margin-top: 0;
+  }
+  .uk-align-right\@l {
+    float: right;
+    margin-top: 0;
+  }
+  .uk-align-left,
+  .uk-align-left\@s,
+  .uk-align-left\@m,
+  .uk-align-left\@l {
+    margin-right: var(--align-margin-horizontal-l);
+  }
+  .uk-align-right,
+  .uk-align-right\@s,
+  .uk-align-right\@m,
+  .uk-align-right\@l {
+    margin-left: var(--align-margin-horizontal-l);
+  }
+}
+/* Large screen and bigger */
+@media (min-width: 1600px) {
+  .uk-align-left\@xl {
+    float: left;
+    margin-right: var(--align-margin-horizontal-l);
+    margin-top: 0;
+  }
+  .uk-align-right\@xl {
+    float: right;
+    margin-left: var(--align-margin-horizontal-l);
+    margin-top: 0;
+  }
+}
+:root {
+  --align-margin-horizontal: var(--global-gutter);
+  --align-margin-horizontal-l: var(--global-medium-gutter);
+  --align-margin-vertical: var(--global-gutter);
+}