@broxus/react-uikit 0.22.0 → 0.23.0

package/dist/assets/search.css

@@ -0,0 +1,258 @@
+/* ========================================================================
+   Component: Search
+ ========================================================================== */
+/*
+ * 1. Container fits its content
+ * 2. Create position context
+ * 3. Prevent content overflow
+ * 4. Reset `form`
+ */
+.uk-search {
+  display: inline-block; /* 1 */
+  margin: 0; /* 4 */
+  max-width: 100%; /* 3 */
+  position: relative; /* 2 */
+}
+
+/* Input
+ ========================================================================== */
+/*
+ * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
+ */
+.uk-search-input::-webkit-search-cancel-button,
+.uk-search-input::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+ * Removes placeholder transparency in Firefox.
+ */
+.uk-search-input::-moz-placeholder {
+  opacity: 1;
+}
+
+/*
+ * 1. Define consistent box sizing.
+ * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
+ * 3. Remove `border-radius` in iOS.
+ * 4. Change font properties to `inherit` in all browsers
+ * 5. Show the overflow in Edge.
+ * 6. Remove default style in iOS.
+ * 7. Vertical alignment
+ * 8. Take the full container width
+ * 9. Style
+ */
+.uk-search-input {
+  -webkit-appearance: none; /* 6 */
+  border: none; /* 9 */
+  border-radius: 0; /* 3 */
+  box-sizing: border-box; /* 1 */
+  color: var(--search-color);
+  font: inherit; /* 4 */
+  margin: 0; /* 2 */
+  overflow: visible; /* 5 */
+  vertical-align: middle; /* 7 */
+  width: 100%; /* 8 */
+}
+
+.uk-search-input:focus {
+  outline: none;
+}
+
+/* Placeholder */
+.uk-search-input:-ms-input-placeholder {
+  color: var(--search-placeholder-color) !important;
+}
+
+.uk-search-input::placeholder {
+  color: var(--search-placeholder-color);
+}
+
+/* Icon (Adopts `uk-icon`)
+ ========================================================================== */
+/*
+ * Remove default focus style
+ */
+.uk-search-icon:focus {
+  outline: none;
+}
+
+/*
+ * Position above input
+ * 1. Set position
+ * 2. Center icon vertically and horizontally
+ * 3. Style
+ */
+.uk-search .uk-search-icon {
+  align-items: center;
+  bottom: 0;
+  color: var(--search-icon-color); /* 3 */
+  display: inline-flex; /* 2 */
+  justify-content: center;
+  left: 0;
+  position: absolute; /* 1 */
+  top: 0;
+}
+
+/*
+ * Required for `a`.
+ */
+.uk-search .uk-search-icon:hover {
+  color: var(--search-icon-color);
+}
+
+/*
+ * Make `input` element clickable through icon, e.g. if it's a `span`
+ */
+.uk-search .uk-search-icon:not(a, button, input) {
+  pointer-events: none;
+}
+
+/*
+ * Position modifier
+ */
+.uk-search .uk-search-icon-flip {
+  left: auto;
+  right: 0;
+}
+
+/* Default modifier
+ ========================================================================== */
+.uk-search-default {
+  width: var(--search-default-width);
+}
+
+/*
+ * Input
+ */
+.uk-search-default .uk-search-input {
+  background: var(--search-default-background);
+  height: var(--search-default-height);
+  padding-left: var(--search-default-padding-horizontal);
+  padding-right: var(--search-default-padding-horizontal);
+}
+
+/* Focus */
+.uk-search-default .uk-search-input:focus {
+  background-color: var(--search-default-focus-background);
+}
+
+/*
+ * Icon
+ */
+.uk-search-default .uk-search-icon {
+  width: var(--search-default-icon-width);
+}
+
+.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input {
+  padding-left: var(--search-default-icon-width);
+}
+
+.uk-search-default .uk-search-icon-flip ~ .uk-search-input {
+  padding-right: var(--search-default-icon-width);
+}
+
+/* Navbar modifier
+ ========================================================================== */
+.uk-search-navbar {
+  width: var(--search-navbar-width);
+}
+
+/*
+ * Input
+ */
+.uk-search-navbar .uk-search-input {
+  background: var(--search-navbar-background);
+  font-size: var(--search-navbar-font-size);
+  height: var(--search-navbar-height);
+}
+
+/*
+ * Icon
+ */
+.uk-search-navbar .uk-search-icon {
+  width: var(--search-navbar-icon-width);
+}
+
+.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input {
+  padding-left: var(--search-navbar-icon-width);
+}
+
+.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input {
+  padding-right: var(--search-navbar-icon-width);
+}
+
+/* Large modifier
+ ========================================================================== */
+.uk-search-large {
+  width: var(--search-large-width);
+}
+
+/*
+ * Input
+ */
+.uk-search-large .uk-search-input {
+  background: var(--search-large-background);
+  font-size: var(--search-large-font-size);
+  height: var(--search-large-height);
+}
+
+/*
+ * Icon
+ */
+.uk-search-large .uk-search-icon {
+  width: var(--search-large-icon-width);
+}
+
+.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input {
+  padding-left: var(--search-large-icon-width);
+}
+
+.uk-search-large .uk-search-icon-flip ~ .uk-search-input {
+  padding-right: var(--search-large-icon-width);
+}
+
+/* Toggle
+ ========================================================================== */
+.uk-search-toggle {
+  color: var(--search-toggle-color);
+}
+
+/* Hover + Focus */
+.uk-search-toggle:hover,
+.uk-search-toggle:focus {
+  color: var(--search-toggle-hover-color);
+}
+
+:root {
+  --search-color: var(--global-color);
+  --search-placeholder-color: var(--global-muted-color);
+  --search-icon-color: var(--global-muted-color);
+  --search-default-width: var(--search-default-width);
+  --search-default-height: var(--global-control-height);
+  --search-default-padding-horizontal: var(--search-default-padding-horizontal);
+  --search-default-background: var(--global-muted-background);
+  --search-default-focus-background: var(--search-default-background);
+  --search-default-icon-width: var(--global-control-height);
+  --search-navbar-width: var(--search-navbar-width);
+  --search-navbar-height: var(--search-navbar-height);
+  --search-navbar-background: var(--search-navbar-background);
+  --search-navbar-font-size: var(--global-large-font-size);
+  --search-navbar-icon-width: var(--search-navbar-icon-width);
+  --search-large-width: var(--search-large-width);
+  --search-large-height: var(--search-large-height);
+  --search-large-background: var(--search-large-background);
+  --search-large-font-size: var(--global-2xlarge-font-size);
+  --search-large-icon-width: var(--search-large-icon-width);
+  --search-toggle-color: var(--global-muted-color);
+  --search-toggle-hover-color: var(--global-color);
+  --inverse-search-color: var(--inverse-global-color);
+  --inverse-search-placeholder-color: var(--inverse-global-muted-color);
+  --inverse-search-icon-color: var(--inverse-global-muted-color);
+  --inverse-search-default-background: var(--inverse-global-muted-background);
+  --inverse-search-default-focus-background: var(--inverse-search-default-background);
+  --inverse-search-navbar-background: var(--inverse-search-navbar-background);
+  --inverse-search-large-background: var(--inverse-search-large-background);
+  --inverse-search-toggle-color: var(--inverse-global-muted-color);
+  --inverse-search-toggle-hover-color: var(--inverse-global-color);
+}

package/dist/assets/section.css

@@ -0,0 +1,138 @@
+/* ========================================================================
+   Component: Section
+ ========================================================================== */
+/*
+ * 1. Make it work with `100vh` and height in general
+ */
+.uk-section {
+  box-sizing: border-box; /* 1 */
+  display: flow-root;
+  padding-bottom: var(--section-padding-vertical);
+  padding-top: var(--section-padding-vertical);
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-section {
+    padding-bottom: var(--section-padding-vertical-m);
+    padding-top: var(--section-padding-vertical-m);
+  }
+}
+/*
+ * Remove margin from the last-child
+ */
+.uk-section > :last-child {
+  margin-bottom: 0;
+}
+
+/* Size modifiers
+ ========================================================================== */
+/*
+ * XSmall
+ */
+.uk-section-xsmall {
+  padding-bottom: var(--section-xsmall-padding-vertical);
+  padding-top: var(--section-xsmall-padding-vertical);
+}
+
+/*
+ * Small
+ */
+.uk-section-small {
+  padding-bottom: var(--section-small-padding-vertical);
+  padding-top: var(--section-small-padding-vertical);
+}
+
+/*
+ * Large
+ */
+.uk-section-large {
+  padding-bottom: var(--section-large-padding-vertical);
+  padding-top: var(--section-large-padding-vertical);
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-section-large {
+    padding-bottom: var(--section-large-padding-vertical-m);
+    padding-top: var(--section-large-padding-vertical-m);
+  }
+}
+/*
+ * XLarge
+ */
+.uk-section-xlarge {
+  padding-bottom: var(--section-xlarge-padding-vertical);
+  padding-top: var(--section-xlarge-padding-vertical);
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-section-xlarge {
+    padding-bottom: var(--section-xlarge-padding-vertical-m);
+    padding-top: var(--section-xlarge-padding-vertical-m);
+  }
+}
+/* Style modifiers
+ ========================================================================== */
+/*
+ * Default
+ */
+.uk-section-default {
+  --uk-inverse: dark;
+  background: var(--section-default-background);
+}
+
+/*
+ * Muted
+ */
+.uk-section-muted {
+  --uk-inverse: dark;
+  background: var(--section-muted-background);
+}
+
+/*
+ * Primary
+ */
+.uk-section-primary {
+  --uk-inverse: light;
+  background: var(--section-primary-background);
+}
+
+/*
+ * Secondary
+ */
+.uk-section-secondary {
+  --uk-inverse: light;
+  background: var(--section-secondary-background);
+}
+
+/*
+ * Tertiary
+ */
+.uk-section-tertiary {
+  --uk-inverse: light;
+  background: var(--section-tertiary-background);
+}
+
+/* Overlap modifier
+ ========================================================================== */
+/*
+ * Reserved modifier to make a section overlap another section with an border image
+ * Implemented by the theme
+ */
+:root {
+  --section-padding-vertical: var(--global-medium-margin);
+  --section-padding-vertical-m: var(--global-large-margin);
+  --section-xsmall-padding-vertical: var(--global-margin);
+  --section-small-padding-vertical: var(--global-medium-margin);
+  --section-large-padding-vertical: var(--global-large-margin);
+  --section-large-padding-vertical-m: var(--global-xlarge-margin);
+  --section-xlarge-padding-vertical: var(--global-xlarge-margin);
+  --section-xlarge-padding-vertical-m: calc(var(--global-large-margin) + var(--global-xlarge-margin));
+  --section-default-background: var(--global-background);
+  --section-muted-background: var(--global-muted-background);
+  --section-primary-background: var(--global-primary-background);
+  --section-secondary-background: var(--global-secondary-background);
+  --section-tertiary-background: var(--global-tertiary-background);
+}

package/dist/assets/segmented.css

@@ -0,0 +1,193 @@
+/* ========================================================================
+   Component: Segmented
+ ========================================================================== */
+.uk-segmented {
+  background-color: var(--segmented-background);
+  border-radius: var(--segmented-border-radius);
+  box-sizing: border-box;
+  display: inline-block;
+  padding: var(--segmented-padding-vertical) var(--segmented-padding-horizontal);
+}
+
+.uk-segmented-group {
+  align-items: stretch;
+  border-radius: inherit;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  gap: var(--segmented-group-gutter);
+  justify-content: flex-start;
+  position: relative;
+  width: 100%;
+}
+
+/* Items
+ ========================================================================== */
+.uk-segmented-item {
+  border-radius: calc(var(--segmented-border-radius) * 0.677);
+  box-sizing: border-box;
+  color: var(--segmented-item-color);
+  cursor: pointer;
+  line-height: calc(var(--segmented-item-height) - var(--segmented-padding-vertical) * 2);
+  min-height: calc(var(--segmented-item-height) - var(--segmented-padding-vertical) * 2);
+  position: relative;
+  text-align: center;
+  transform: translateZ(0);
+  transition: color var(--transition-medium-fast-duration) var(--ease-in-out);
+}
+
+.uk-segmented-item::after {
+  border-radius: inherit;
+  content: "";
+  height: 100%;
+  inset-inline-start: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  transition: opacity var(--transition-medium-fast-duration);
+  width: 100%;
+  z-index: -1;
+}
+
+/* Hover state */
+.uk-segmented-item:not(.uk-segmented-item-selected, .uk-segmented-item-disabled):hover {
+  color: var(--segmented-item-hover-color);
+}
+.uk-segmented-item:not(.uk-segmented-item-selected, .uk-segmented-item-disabled):hover::after {
+  background-color: var(--segmented-item-hover-background);
+  opacity: 1;
+}
+
+/* Active (onclick) state */
+.uk-segmented-item:not(.uk-segmented-item-selected, .uk-segmented-item-disabled):active {
+  color: var(--segmented-item-onclick-color);
+}
+.uk-segmented-item:not(.uk-segmented-item-selected, .uk-segmented-item-disabled):active::after {
+  background-color: var(--segmented-item-onclick-background);
+  opacity: 1;
+}
+
+/* Selected state (non-disabled) */
+.uk-segmented-item-selected:not(.uk-segmented-item-disabled) {
+  background-color: var(--segmented-item-selected-background);
+  color: var(--segmented-item-selected-color);
+}
+
+/* Selected state (non-disabled) */
+.uk-segmented-item:not(.uk-segmented-item-disabled) [aria-checked=true] {
+  color: var(--segmented-item-selected-color);
+  transition: color var(--transition-fast-duration) var(--ease-out) var(--transition-medium-fast-duration);
+}
+
+/* Selected state (disabled) */
+.uk-segmented-item-selected:where(.uk-segmented-item-disabled) {
+  background-color: var(--segmented-item-disabled-background);
+}
+
+/* Disabled state */
+.uk-segmented-item-disabled,
+.uk-segmented-item-disabled:hover,
+.uk-segmented-item-disabled:focus {
+  color: var(--segmented-item-disabled-color);
+  cursor: not-allowed;
+}
+
+.uk-segmented-item-label {
+  box-sizing: border-box;
+  line-height: inherit;
+  min-height: inherit;
+  overflow: hidden;
+  padding: 0 var(--segmented-item-padding-horizontal);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.uk-segmented-item-input {
+  height: 0;
+  inset: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  width: 0;
+}
+
+/* Thumb
+ ========================================================================== */
+.uk-segmented-thumb {
+  background-color: var(--segmented-item-selected-background);
+  border-radius: calc(var(--segmented-border-radius) * 0.677);
+  box-sizing: border-box;
+  height: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  position: absolute;
+  transition: transform var(--transition-duration) var(--ease-in-out), width var(--transition-duration) var(--ease-in-out);
+  width: 0;
+}
+
+.uk-segmented-thumb ~ .uk-segmented-item:not(.uk-segmented-item-selected, .uk-segmented-item-disabled)::after {
+  background-color: transparent;
+}
+
+.uk-segmented-thumb-motion-appear-active,
+.uk-segmented-thumb-motion-enter-active {
+  transition: transform var(--transition-duration) var(--ease-in-out), width var(--transition-duration) var(--ease-in-out);
+  will-change: transform, width;
+}
+
+/* Size modifier
+ ========================================================================== */
+.uk-segmented-small .uk-segmented-item {
+  line-height: calc(var(--segmented-item-small-height) - var(--segmented-padding-vertical) * 2);
+  min-height: calc(var(--segmented-item-small-height) - var(--segmented-padding-vertical) * 2);
+}
+
+.uk-segmented-medium .uk-segmented-item {
+  line-height: calc(var(--segmented-item-medium-height) - var(--segmented-padding-vertical) * 2);
+  min-height: calc(var(--segmented-item-medium-height) - var(--segmented-padding-vertical) * 2);
+}
+
+.uk-segmented-large .uk-segmented-item {
+  line-height: calc(var(--segmented-item-large-height) - var(--segmented-padding-vertical) * 2);
+  min-height: calc(var(--segmented-item-large-height) - var(--segmented-padding-vertical) * 2);
+}
+
+/* Vertical modifier
+ ========================================================================== */
+.uk-segmented-vertical .uk-segmented-group {
+  flex-direction: column;
+}
+
+.uk-segmented-vertical .uk-segmented-item {
+  text-align: left;
+  width: 100%;
+}
+
+.uk-segmented-vertical .uk-segmented-thumb {
+  height: 0;
+  transition: transform var(--transition-duration) var(--ease-in-out), height var(--transition-duration) var(--ease-in-out);
+  width: 100%;
+}
+
+:root {
+  --segmented-background: var(--global-default-background);
+  --segmented-padding-horizontal: var(--global-xsmall-gutter);
+  --segmented-padding-vertical: var(--global-xsmall-gutter);
+  --segmented-border-radius: var(--global-border-radius);
+  --segmented-group-gutter: var(--global-xsmall-gutter);
+  --segmented-item-height: var(--global-control-height);
+  --segmented-item-padding-horizontal: var(--global-small-gutter);
+  --segmented-item-padding-vertical: var(--global-xsmall-gutter);
+  --segmented-item-small-height: var(--global-control-small-height);
+  --segmented-item-medium-height: var(--global-control-medium-height);
+  --segmented-item-large-height: var(--global-control-large-height);
+  --segmented-item-color: var(--global-color);
+  --segmented-item-hover-background: var(--global-muted-background);
+  --segmented-item-hover-color: var(--global-color);
+  --segmented-item-onclick-background: var(--global-default-background);
+  --segmented-item-onclick-color: var(--global-color);
+  --segmented-item-selected-background: var(--global-primary-background);
+  --segmented-item-selected-color: var(--global-inverse-color);
+  --segmented-item-disabled-background: var(--global-muted-background);
+  --segmented-item-disabled-color: var(--global-muted-color);
+}