@broxus/react-uikit 0.21.0 → 0.23.0

package/dist/assets/button.css

@@ -0,0 +1,491 @@
+/* ========================================================================
+   Component: Button
+ ========================================================================== */
+/*
+ * 1. Remove margins in Chrome, Safari and Opera.
+ * 2. Remove borders for `button`.
+ * 3. Address `overflow` set to `hidden` in IE.
+ * 4. Correct `font` properties and `color` not being inherited for `button`.
+ * 5. Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 6. Remove default style for `input type="submit"`in iOS.
+ * 7. Style
+ * 8. `line-height` is used to create a height because it also centers the text vertically for `a` elements.
+ *    Better would be to use height and flexbox to center the text vertically but flexbox doesn't work in Firefox on `button` elements.
+ * 9. Align text if button has a width
+ * 10. Required for `a`.
+ */
+.uk-button {
+  -webkit-appearance: none; /* 6 */
+  appearance: none; /* 6 */
+  border: none; /* 2 */
+  border-radius: 0;
+  box-sizing: border-box;
+  color: inherit;
+  display: inline-block; /* 7 */
+  font: inherit; /* 4 */
+  font-size: var(--button-font-size); /* 7 */
+  line-height: var(--button-line-height); /* 8 */
+  margin: 0; /* 1 */
+  overflow: visible; /* 3 */
+  padding: 0 var(--button-padding-horizontal); /* 7 */
+  text-align: center; /* 9 */
+  text-decoration: none; /* 10 */
+  text-transform: none; /* 5 */
+  vertical-align: middle; /* 7 */
+}
+
+.uk-button:not(:disabled) {
+  cursor: pointer;
+}
+
+/*
+ * Remove the inner border and padding in Firefox.
+ */
+.uk-button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/* Hover */
+.uk-button:hover {
+  /* 9 */
+  text-decoration: none;
+}
+
+/* OnClick + Active */
+/* Style modifiers
+ ========================================================================== */
+/*
+ * Default
+ */
+.uk-button-default {
+  background-color: var(--button-default-background);
+  color: var(--button-default-color);
+}
+
+/* Hover */
+.uk-button-default:hover {
+  background-color: var(--button-default-hover-background);
+  color: var(--button-default-hover-color);
+}
+
+/* OnClick + Active */
+.uk-button-default:active,
+.uk-button-default.uk-active {
+  background-color: var(--button-default-active-background);
+  color: var(--button-default-active-color);
+}
+
+/*
+ * Primary
+ */
+.uk-button-primary {
+  background-color: var(--button-primary-background);
+  color: var(--button-primary-color);
+}
+
+/* Hover */
+.uk-button-primary:hover {
+  background-color: var(--button-primary-hover-background);
+  color: var(--button-primary-hover-color);
+}
+
+/* OnClick + Active */
+.uk-button-primary:active,
+.uk-button-primary.uk-active {
+  background-color: var(--button-primary-active-background);
+  color: var(--button-primary-active-color);
+}
+
+/*
+ * Secondary
+ */
+.uk-button-secondary {
+  background-color: var(--button-secondary-background);
+  color: var(--button-secondary-color);
+}
+
+/* Hover */
+.uk-button-secondary:hover {
+  background-color: var(--button-secondary-hover-background);
+  color: var(--button-secondary-hover-color);
+}
+
+/* OnClick + Active */
+.uk-button-secondary:active,
+.uk-button-secondary.uk-active {
+  background-color: var(--button-secondary-active-background);
+  color: var(--button-secondary-active-color);
+}
+
+/*
+ * Tertiary
+ */
+.uk-button-tertiary {
+  background-color: var(--button-tertiary-background);
+  color: var(--button-tertiary-color);
+}
+
+/* Hover */
+.uk-button-tertiary:hover {
+  background-color: var(--button-tertiary-hover-background);
+  color: var(--button-tertiary-hover-color);
+}
+
+/* OnClick + Active */
+.uk-button-tertiary:active,
+.uk-button-tertiary.uk-active {
+  background-color: var(--button-tertiary-active-background);
+  color: var(--button-tertiary-active-color);
+}
+
+/*
+ * Danger
+ */
+.uk-button-danger {
+  background-color: var(--button-danger-background);
+  color: var(--button-danger-color);
+}
+
+/* Hover */
+.uk-button-danger:hover {
+  background-color: var(--button-danger-hover-background);
+  color: var(--button-danger-hover-color);
+}
+
+/* OnClick + Active */
+.uk-button-danger:active,
+.uk-button-danger.uk-active {
+  background-color: var(--button-danger-active-background);
+  color: var(--button-danger-active-color);
+}
+
+/*
+ * Disabled
+ * The same for all style modifiers
+ */
+.uk-button-default:disabled,
+.uk-button-primary:disabled,
+.uk-button-secondary:disabled,
+.uk-button-tertiary:disabled,
+.uk-button-danger:disabled {
+  background-color: var(--button-disabled-background);
+  color: var(--button-disabled-color);
+}
+
+/* Size modifiers
+ ========================================================================== */
+.uk-button-xsmall {
+  font-size: var(--button-xsmall-font-size);
+  line-height: var(--button-xsmall-line-height);
+  padding: 0 var(--button-xsmall-padding-horizontal);
+}
+
+.uk-button-small {
+  font-size: var(--button-small-font-size);
+  line-height: var(--button-small-line-height);
+  padding: 0 var(--button-small-padding-horizontal);
+}
+
+.uk-button-medium {
+  font-size: var(--button-medium-font-size);
+  line-height: var(--button-medium-line-height);
+  padding: 0 var(--button-medium-padding-horizontal);
+}
+
+.uk-button-large {
+  font-size: var(--button-large-font-size);
+  line-height: var(--button-large-line-height);
+  padding: 0 var(--button-large-padding-horizontal);
+}
+
+.uk-button-xlarge {
+  font-size: var(--button-xlarge-font-size);
+  line-height: var(--button-xlarge-line-height);
+  padding: 0 var(--button-xlarge-padding-horizontal);
+}
+
+/* Text modifiers
+ ========================================================================== */
+/*
+ * Text
+ * 1. Reset
+ * 2. Style
+ */
+.uk-button-text {
+  background: none; /* 1 */
+  color: var(--button-text-color); /* 2 */
+  line-height: var(--button-text-line-height); /* 1 */
+  padding: 0; /* 1 */
+}
+
+/* Hover */
+.uk-button-text:hover {
+  color: var(--button-text-hover-color);
+}
+
+/* Disabled */
+.uk-button-text:disabled {
+  color: var(--button-text-disabled-color);
+}
+
+/*
+ * Link
+ * 1. Reset
+ * 2. Style
+ */
+.uk-button-link {
+  background: none; /* 1 */
+  color: var(--button-link-color); /* 2 */
+  line-height: var(--button-link-line-height); /* 1 */
+  padding: 0; /* 1 */
+}
+
+/* Hover */
+.uk-button-link:hover {
+  color: var(--button-link-hover-color);
+  text-decoration: var(--button-link-hover-text-decoration);
+}
+
+/* Disabled */
+.uk-button-link:disabled {
+  color: var(--button-link-disabled-color);
+  text-decoration: none;
+}
+
+/* Ghost modifiers
+ ========================================================================== */
+.uk-button.uk-button-ghost {
+  background-color: transparent;
+  border: var(--button-ghost-border-width) var(--button-ghost-border-style);
+}
+
+.uk-button-default.uk-button-ghost {
+  background-color: transparent;
+  border-color: var(--button-ghost-default-border);
+  color: var(--button-ghost-default-color);
+}
+
+.uk-button-default.uk-button-ghost:hover {
+  background-color: transparent;
+  border-color: var(--button-ghost-default-hover-border);
+}
+
+.uk-button-default.uk-button-ghost:active,
+.uk-button-default.uk-button-ghost.active {
+  background-color: transparent;
+  border-color: var(--button-ghost-default-active-border);
+}
+
+.uk-button-primary.uk-button-ghost {
+  background-color: transparent;
+  border-color: var(--button-ghost-primary-border);
+  color: var(--button-ghost-primary-color);
+}
+
+.uk-button-primary.uk-button-ghost:hover {
+  background-color: transparent;
+  border-color: var(--button-ghost-primary-hover-border);
+}
+
+.uk-button-primary.uk-button-ghost:active,
+.uk-button-primary.uk-button-ghost.active {
+  background-color: transparent;
+  border-color: var(--button-ghost-primary-active-border);
+}
+
+.uk-button-secondary.uk-button-ghost {
+  background-color: transparent;
+  border-color: var(--button-ghost-secondary-border);
+  color: var(--button-ghost-secondary-color);
+}
+
+.uk-button-secondary.uk-button-ghost:hover {
+  background-color: transparent;
+  border-color: var(--button-ghost-secondary-hover-border);
+}
+
+.uk-button-secondary.uk-button-ghost:active,
+.uk-button-secondary.uk-button-ghost.active {
+  background-color: transparent;
+  border-color: var(--button-ghost-secondary-active-border);
+}
+
+.uk-button-tertiary.uk-button-ghost {
+  background-color: transparent;
+  border-color: var(--button-ghost-tertiary-border);
+  color: var(--button-ghost-tertiary-color);
+}
+
+.uk-button-tertiary.uk-button-ghost:hover {
+  background-color: transparent;
+  border-color: var(--button-ghost-tertiary-hover-border);
+}
+
+.uk-button-tertiary.uk-button-ghost:active,
+.uk-button-tertiary.uk-button-ghost.active {
+  background-color: transparent;
+  border-color: var(--button-ghost-tertiary-active-border);
+}
+
+.uk-button-danger.uk-button-ghost {
+  background-color: transparent;
+  border-color: var(--button-ghost-danger-border);
+  color: var(--button-ghost-danger-color);
+}
+
+.uk-button-danger.uk-button-ghost:hover {
+  background-color: transparent;
+  border-color: var(--button-ghost-danger-hover-border);
+}
+
+.uk-button-danger.uk-button-ghost:active,
+.uk-button-danger.uk-button-ghost.active {
+  background-color: transparent;
+  border-color: var(--button-ghost-danger-active-border);
+}
+
+/* Shape modifiers
+ ========================================================================== */
+.uk-button-circle {
+  border-radius: var(--button-circle-border-radius);
+}
+
+.uk-button-round {
+  border-radius: var(--button-round-border-radius);
+}
+
+/* Group
+ ========================================================================== */
+/*
+ * 1. Using `flex` instead of `inline-block` to prevent whitespace between child elements
+ * 2. Behave like button
+ * 3. Create position context
+ */
+.uk-button-group {
+  display: inline-flex; /* 1 */
+  position: relative; /* 3 */
+  vertical-align: middle; /* 2 */
+}
+
+:root {
+  --button-line-height: var(--global-control-height);
+  --button-xsmall-line-height: var(--global-control-xsmall-height);
+  --button-small-line-height: var(--global-control-small-height);
+  --button-medium-line-height: var(--global-control-medium-height);
+  --button-large-line-height: var(--global-control-large-height);
+  --button-xlarge-line-height: var(--global-control-xlarge-height);
+  --button-font-size: var(--global-font-size);
+  --button-xsmall-font-size: var(--global-2xsmall-font-size);
+  --button-small-font-size: var(--global-small-font-size);
+  --button-medium-font-size: var(--global-font-size);
+  --button-large-font-size: var(--global-medium-font-size);
+  --button-xlarge-font-size: var(--global-large-font-size);
+  --button-padding-horizontal: var(--global-gutter);
+  --button-xsmall-padding-horizontal: var(--global-xsmall-gutter);
+  --button-small-padding-horizontal: var(--global-small-gutter);
+  --button-medium-padding-horizontal: var(--global-gutter);
+  --button-large-padding-horizontal: var(--global-medium-gutter);
+  --button-xlarge-padding-horizontal: var(--global-large-gutter);
+  --button-default-background: var(--global-muted-background);
+  --button-default-color: var(--global-emphasis-color);
+  --button-default-hover-background: rgb(235.6, 235.6, 235.6);
+  --button-default-hover-color: var(--global-emphasis-color);
+  --button-default-active-background: rgb(223.2, 223.2, 223.2);
+  --button-default-active-color: var(--global-emphasis-color);
+  --button-primary-background: var(--global-primary-background);
+  --button-primary-color: var(--global-inverse-color);
+  --button-primary-hover-background: rgb(17.34375, 128.25, 239.15625);
+  --button-primary-hover-color: var(--global-inverse-color);
+  --button-primary-active-background: rgb(15.1875, 121.5, 227.8125);
+  --button-primary-active-color: var(--global-inverse-color);
+  --button-secondary-background: var(--global-secondary-background);
+  --button-secondary-color: var(--global-inverse-color);
+  --button-secondary-hover-background: rgb(45.05, 45.05, 45.05);
+  --button-secondary-hover-color: var(--global-inverse-color);
+  --button-secondary-active-background: rgb(30.6, 30.6, 30.6);
+  --button-secondary-active-color: var(--global-inverse-color);
+  --button-tertiary-background: var(--global-tertiary-background);
+  --button-tertiary-color: var(--global-inverse-color);
+  --button-tertiary-hover-background: rgb(174.8, 174.8, 174.8);
+  --button-tertiary-hover-color: var(--global-inverse-color);
+  --button-tertiary-active-background: rgb(165.6, 165.6, 165.6);
+  --button-tertiary-active-color: var(--global-inverse-color);
+  --button-danger-background: var(--global-danger-background);
+  --button-danger-color: var(--global-inverse-color);
+  --button-danger-hover-background: rgb(244.1578947368, 82.6105263158, 59.8421052632);
+  --button-danger-hover-color: var(--global-inverse-color);
+  --button-danger-active-background: rgb(243.3157894737, 69.2210526316, 44.6842105263);
+  --button-danger-active-color: var(--global-inverse-color);
+  --button-ghost-border-width: var(--global-border-width);
+  --button-ghost-border-style: var(--global-border-style);
+  --button-ghost-default-color: var(--button-default-background);
+  --button-ghost-default-border: var(--button-default-background);
+  --button-ghost-default-hover-border: var(--button-default-hover-background);
+  --button-ghost-default-active-border: var(--button-default-active-background);
+  --button-ghost-primary-color: var(--button-primary-background);
+  --button-ghost-primary-border: var(--button-primary-background);
+  --button-ghost-primary-hover-border: var(--button-primary-hover-background);
+  --button-ghost-primary-active-border: var(--button-primary-active-background);
+  --button-ghost-secondary-color: var(--button-secondary-background);
+  --button-ghost-secondary-border: var(--button-secondary-background);
+  --button-ghost-secondary-hover-border: var(--button-secondary-hover-background);
+  --button-ghost-secondary-active-border: var(--button-secondary-active-background);
+  --button-ghost-tertiary-color: var(--button-tertiary-background);
+  --button-ghost-tertiary-border: var(--button-tertiary-background);
+  --button-ghost-tertiary-hover-border: var(--button-tertiary-hover-background);
+  --button-ghost-tertiary-active-border: var(--button-tertiary-active-background);
+  --button-ghost-danger-color: var(--button-danger-background);
+  --button-ghost-danger-border: var(--button-danger-background);
+  --button-ghost-danger-hover-border: var(--button-danger-hover-background);
+  --button-ghost-danger-active-border: var(--button-danger-active-background);
+  --button-circle-border-radius: 40px;
+  --button-round-border-radius: 4px;
+  --button-disabled-background: var(--global-muted-background);
+  --button-disabled-color: var(--global-muted-color);
+  --button-text-line-height: var(--global-line-height);
+  --button-text-color: var(--global-muted-color);
+  --button-text-hover-color: var(--global-color);
+  --button-text-disabled-color: var(--global-muted-color);
+  --button-link-line-height: var(--global-line-height);
+  --button-link-color: var(--global-link-color);
+  --button-link-hover-color: var(--global-link-hover-color);
+  --button-link-hover-text-decoration: underline;
+  --button-link-disabled-color: var(--global-muted-color);
+  --inverse-button-color: var(--inverse-global-inverse-color);
+  --inverse-button-default-background: var(--inverse-global-primary-background);
+  --inverse-button-default-color: var(--inverse-global-inverse-color);
+  --inverse-button-default-hover-background: rgb(242.25, 242.25, 242.25);
+  --inverse-button-default-hover-color: var(--inverse-global-inverse-color);
+  --inverse-button-default-active-background: rgb(229.5, 229.5, 229.5);
+  --inverse-button-default-active-color: var(--inverse-global-inverse-color);
+  --inverse-button-primary-background: var(--inverse-global-primary-background);
+  --inverse-button-primary-color: var(--inverse-global-inverse-color);
+  --inverse-button-primary-hover-background: rgb(242.25, 242.25, 242.25);
+  --inverse-button-primary-hover-color: var(--inverse-global-inverse-color);
+  --inverse-button-primary-active-background: rgb(229.5, 229.5, 229.5);
+  --inverse-button-primary-active-color: var(--inverse-global-inverse-color);
+  --inverse-button-secondary-background: var(--inverse-global-primary-background);
+  --inverse-button-secondary-color: var(--inverse-global-inverse-color);
+  --inverse-button-secondary-hover-background: rgb(242.25, 242.25, 242.25);
+  --inverse-button-secondary-hover-color: var(--inverse-global-inverse-color);
+  --inverse-button-secondary-active-background: rgb(229.5, 229.5, 229.5);
+  --inverse-button-secondary-active-color: var(--inverse-global-inverse-color);
+  --inverse-button-tertiary-background: var(--inverse-global-primary-background);
+  --inverse-button-tertiary-color: var(--inverse-global-inverse-color);
+  --inverse-button-tertiary-hover-background: rgb(242.25, 242.25, 242.25);
+  --inverse-button-tertiary-hover-color: var(--inverse-global-inverse-color);
+  --inverse-button-tertiary-active-background: rgb(229.5, 229.5, 229.5);
+  --inverse-button-tertiary-active-color: var(--inverse-global-inverse-color);
+  --inverse-button-danger-background: var(--button-danger-background);
+  --inverse-button-danger-color: var(--button-danger-color);
+  --inverse-button-danger-hover-background: var(--button-danger-hover-background);
+  --inverse-button-danger-hover-color: var(--button-danger-hover-color);
+  --inverse-button-danger-active-background: var(--button-danger-active-background);
+  --inverse-button-danger-active-color: var(--button-danger-active-color);
+  --inverse-button-text-color: var(--inverse-global-emphasis-color);
+  --inverse-button-text-hover-color: var(--inverse-global-muted-color);
+  --inverse-button-text-disabled-color: var(--inverse-global-muted-color);
+  --inverse-button-link-color: var(--inverse-global-emphasis-color);
+  --inverse-button-link-hover-color: var(--inverse-global-muted-color);
+}