@broxus/react-uikit 0.22.0 → 0.23.1

package/dist/assets/form.css

@@ -0,0 +1,486 @@
+/* ========================================================================
+   Component: Form
+ ========================================================================== */
+/*
+ * 1. Define consistent box sizing.
+ *    Default is `content-box` with following exceptions set to `border-box`
+ *    `input[type="search"]` in Chrome, Safari and Opera
+ *    `input[type="color"]` in Firefox
+ * 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. Prevent content overflow if a fixed width is used
+ * 6. Remove default style in iOS.
+ * 7. Take the full width
+ * 8. Reset default
+ * 9. Style
+ */
+.uk-input,
+.uk-textarea {
+  -webkit-appearance: none; /* 6 */
+  background: var(--form-background); /* 9 */
+  border: 0 none; /* 9 */
+  border-radius: 0; /* 3 */
+  box-sizing: border-box; /* 1 */
+  color: var(--form-color); /* 9 */
+  font: inherit; /* 4 */
+  margin: 0; /* 2 */
+  max-width: 100%; /* 5 */
+  padding: 0 var(--form-padding-horizontal); /* 8 */
+  width: 100%; /* 7 */
+}
+
+/*
+ * Single-line
+ * 1. Show the overflow in Edge.
+ * 2. Allow any element to look like an `input` or `select` element
+ * 3. Make sure line-height is not larger than height
+ *    Also needed to center the text vertically
+ */
+.uk-input {
+  /* 2 */
+  display: inline-block;
+  height: var(--form-height);
+  /* 1 */
+  overflow: visible;
+  vertical-align: middle;
+}
+
+/* 2 */
+.uk-input:not(input) {
+  line-height: var(--form-line-height);
+}
+
+/*
+ * Multi-line
+ * 1. Remove the default vertical scrollbar in IE 10+.
+ */
+.uk-textarea {
+  /* 1 */
+  overflow: auto;
+  padding-bottom: var(--form-padding-vertical);
+  padding-top: var(--form-padding-vertical);
+  vertical-align: top;
+}
+
+/*
+ * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
+ */
+.uk-input[type=search]::-webkit-search-cancel-button,
+.uk-input[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+.uk-input[type=number]::-webkit-inner-spin-button,
+.uk-input[type=number]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+ * Define consistent border, margin, and padding.
+ */
+.uk-fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+ * Placeholder
+ */
+.uk-input::-ms-input-placeholder {
+  color: var(--form-placeholder-color) !important;
+}
+
+.uk-input::placeholder {
+  color: var(--form-placeholder-color);
+}
+
+.uk-textarea::-ms-input-placeholder {
+  color: var(--form-placeholder-color) !important;
+}
+
+.uk-textarea::placeholder {
+  color: var(--form-placeholder-color);
+}
+
+/*
+ * Removes placeholder transparency in Firefox.
+ */
+.uk-input::-moz-placeholder,
+.uk-textarea::-moz-placeholder {
+  opacity: 1;
+}
+
+/* Focus */
+.uk-input:focus,
+.uk-textarea:focus {
+  background-color: var(--form-focus-background);
+  color: var(--form-focus-color);
+  outline: none;
+}
+
+/* Disabled */
+.uk-input:disabled,
+.uk-textarea:disabled {
+  background-color: var(--form-disabled-background);
+  color: var(--form-disabled-color);
+}
+
+/* Size modifier (`uk-input` and `uk-textarea`)
+ ========================================================================== */
+/*
+ * Small
+ */
+.uk-form-small {
+  font-size: var(--form-small-font-size);
+}
+
+/* Multi-line */
+textarea.uk-form-small,
+[multiple].uk-form-small,
+[size].uk-form-small {
+  padding: var(--form-small-padding-vertical) var(--form-small-padding-horizontal);
+}
+
+.uk-form-small:not(input, textarea) {
+  line-height: var(--form-small-line-height);
+}
+
+/* Single-line */
+.uk-form-small:not(textarea, [multiple], [size]) {
+  height: var(--form-small-height);
+  padding-left: var(--form-small-padding-horizontal);
+  padding-right: var(--form-small-padding-horizontal);
+}
+
+/*
+ * Medium
+ */
+.uk-form-medium {
+  font-size: var(--form-medium-font-size);
+}
+
+/* Multi-line */
+textarea.uk-form-medium,
+[multiple].uk-form-medium,
+[size].uk-form-medium {
+  padding: var(--form-medium-padding-vertical) var(--form-medium-padding-horizontal);
+}
+
+.uk-form-medium:not(input, textarea) {
+  line-height: var(--form-medium-line-height);
+}
+
+/* Single-line */
+.uk-form-medium:not(textarea, [multiple], [size]) {
+  height: var(--form-medium-height);
+  padding-left: var(--form-medium-padding-horizontal);
+  padding-right: var(--form-medium-padding-horizontal);
+}
+
+/*
+ * Large
+ */
+.uk-form-large {
+  font-size: var(--form-large-font-size);
+}
+
+/* Multi-line */
+textarea.uk-form-large,
+[multiple].uk-form-large,
+[size].uk-form-large {
+  padding: var(--form-large-padding-vertical) var(--form-large-padding-horizontal);
+}
+
+.uk-form-large:not(input, textarea) {
+  line-height: var(--form-large-line-height);
+}
+
+/* Single-line */
+.uk-form-large:not(textarea, [multiple], [size]) {
+  height: var(--form-large-height);
+  padding-left: var(--form-large-padding-horizontal);
+  padding-right: var(--form-large-padding-horizontal);
+}
+
+/* Style modifier (`uk-input` and `uk-textarea`)
+ ========================================================================== */
+/*
+ * Error
+ */
+.uk-form-danger,
+.uk-form-danger:focus {
+  color: var(--form-danger-color);
+}
+
+/*
+ * Warning
+ */
+.uk-form-warning,
+.uk-form-warning:focus {
+  color: var(--form-warning-color);
+}
+
+/*
+ * Success
+ */
+.uk-form-success,
+.uk-form-success:focus {
+  color: var(--form-success-color);
+}
+
+/*
+ * Blank
+ */
+.uk-form-blank {
+  background: none;
+}
+
+/* Width modifiers (`uk-input` and `uk-textarea`)
+ ========================================================================== */
+/*
+ * Fixed widths
+ * Different widths for mini sized `input` and `select` elements
+ */
+input.uk-form-width-xsmall {
+  width: var(--form-width-xsmall);
+}
+
+.uk-form-width-xsmall {
+  width: var(--form-width-xsmall);
+}
+
+.uk-form-width-small {
+  width: var(--form-width-small);
+}
+
+.uk-form-width-medium {
+  width: var(--form-width-medium);
+}
+
+.uk-form-width-large {
+  width: var(--form-width-large);
+}
+
+/* Datalist
+ ========================================================================== */
+/*
+ * 1. Remove default style in Chrome
+ */
+.uk-input[list] {
+  background-position: 100% 50%;
+  background-repeat: no-repeat;
+  padding-right: var(--form-datalist-padding-right);
+}
+
+/* 1 */
+.uk-input[list]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+.uk-input[list]:hover,
+.uk-input[list]:focus {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%2012%208%206%2016%206%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
+}
+
+/* Legend
+ ========================================================================== */
+/*
+ * Legend
+ * 1. Behave like block element
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove padding so people aren't caught out if they zero out fieldsets.
+ * 4. Style
+ */
+.uk-legend {
+  /* 2 */
+  color: inherit;
+  /* 4 */
+  font-size: var(--form-legend-font-size);
+  line-height: var(--form-legend-line-height);
+  /* 3 */
+  padding: 0;
+  /* 1 */
+  width: 100%;
+}
+
+/* Custom controls
+ ========================================================================== */
+/*
+ * 1. Container fits its content
+ * 2. Create position context
+ * 3. Prevent content overflow
+ * 4. Behave like most inline-block elements
+ */
+.uk-form-custom {
+  /* 1 */
+  display: inline-block;
+  /* 3 */
+  max-width: 100%;
+  /* 2 */
+  position: relative;
+  /* 4 */
+  vertical-align: middle;
+}
+
+/*
+ * 1. Position and resize the form control to always cover its container
+ * 2. Required for Firefox for positioning to the left
+ * 3. Required for Webkit to make `height` work
+ * 4. Hide control and show cursor
+ * 5. Needed for the cursor
+ * 6. Clip height caused by 5. Needed for Webkit only
+ */
+.uk-form-custom select,
+.uk-form-custom input[type=file] {
+  /* 3 */
+  -webkit-appearance: none;
+  cursor: pointer;
+  height: 100%;
+  /* 2 */
+  left: 0;
+  /* 4 */
+  opacity: 0;
+  /* 1 */
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}
+
+.uk-form-custom input[type=file] {
+  /* 5 */
+  font-size: 500px;
+  /* 6 */
+  overflow: hidden;
+}
+
+/* Label
+ ========================================================================== */
+/* Layout
+ ========================================================================== */
+/*
+ * Stacked
+ */
+.uk-form-stacked .uk-form-label {
+  display: block;
+  margin-bottom: var(--form-stacked-margin-bottom);
+}
+
+/*
+ * Horizontal
+ */
+/* Tablet portrait and smaller */
+@media (max-width: 959px) {
+  /* Behave like `uk-form-stacked` */
+  .uk-form-horizontal .uk-form-label {
+    display: block;
+    margin-bottom: var(--form-stacked-margin-bottom);
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-form-horizontal .uk-form-label {
+    float: left;
+    margin-top: var(--form-horizontal-label-margin-top);
+    width: var(--form-horizontal-label-width);
+  }
+  .uk-form-horizontal .uk-form-controls {
+    margin-left: var(--form-horizontal-controls-margin-left);
+  }
+  /* Better vertical alignment if controls are checkboxes and radio buttons with text */
+  .uk-form-horizontal .uk-form-controls-text {
+    padding-top: var(--form-horizontal-controls-text-padding-top);
+  }
+}
+/* Icons
+ ========================================================================== */
+/*
+ * 1. Set width
+ * 2. Center icon vertically and horizontally
+ * 3. Style
+ */
+.uk-form-icon {
+  align-items: center;
+  /* 3 */
+  color: var(--form-icon-color);
+  /* 2 */
+  display: inline-flex;
+  justify-content: center;
+  /* 1 */
+  width: var(--form-icon-width);
+}
+
+/*
+ * Make `input` element clickable through icon, e.g. if it's a `span`
+ */
+.uk-form-icon:not(a, button, input) {
+  pointer-events: none;
+}
+
+/*
+ * Required for `a`.
+ */
+.uk-form-icon:hover {
+  color: var(--form-icon-hover-color);
+}
+
+:root {
+  --form-height: var(--global-control-height);
+  --form-line-height: var(--form-height);
+  --form-padding-horizontal: 10px;
+  --form-padding-vertical: 4px;
+  --form-background: rgb(245.52, 245.52, 245.52);
+  --form-color: var(--global-color);
+  --form-focus-background: rgb(243.04, 243.04, 243.04);
+  --form-focus-color: var(--global-color);
+  --form-disabled-background: rgb(240.56, 240.56, 240.56);
+  --form-disabled-color: var(--global-color);
+  --form-placeholder-color: var(--global-muted-color);
+  --form-small-height: var(--global-control-small-height);
+  --form-small-padding-horizontal: 8px;
+  --form-small-padding-vertical: 3px;
+  --form-small-line-height: var(--form-small-height);
+  --form-small-font-size: var(--global-small-font-size);
+  --form-medium-height: var(--global-control-medium-height);
+  --form-medium-padding-horizontal: 15px;
+  --form-medium-padding-vertical: 6px;
+  --form-medium-line-height: var(--form-medium-height);
+  --form-medium-font-size: var(--global-font-size);
+  --form-large-height: var(--global-control-large-height);
+  --form-large-padding-horizontal: 12px;
+  --form-large-padding-vertical: 4px;
+  --form-large-line-height: var(--form-large-height);
+  --form-large-font-size: var(--global-medium-font-size);
+  --form-danger-color: var(--global-danger-background);
+  --form-warning-color: var(--global-warning-background);
+  --form-success-color: var(--global-success-background);
+  --form-width-xsmall: 50px;
+  --form-width-small: 130px;
+  --form-width-medium: 260px;
+  --form-width-large: 500px;
+  --form-datalist-padding-right: 20px;
+  --form-datalist-icon-color: var(--global-color);
+  --form-legend-font-size: var(--global-large-font-size);
+  --form-legend-line-height: 1.4;
+  --form-stacked-margin-bottom: var(--global-small-margin);
+  --form-horizontal-label-width: 200px;
+  --form-horizontal-label-margin-top: 7px;
+  --form-horizontal-controls-margin-left: 215px;
+  --form-horizontal-controls-text-padding-top: 7px;
+  --form-icon-width: var(--form-height);
+  --form-icon-color: var(--global-muted-color);
+  --form-icon-hover-color: var(--global-color);
+  --inverse-form-background: var(--inverse-global-muted-background);
+  --inverse-form-color: var(--inverse-global-color);
+  --inverse-form-focus-background: var(--inverse-global-muted-background);
+  --inverse-form-focus-color: var(--inverse-global-color);
+  --inverse-form-placeholder-color: var(--inverse-global-muted-color);
+  --inverse-form-datalist-icon-color: var(--inverse-global-color);
+  --inverse-form-icon-color: var(--inverse-global-muted-color);
+  --inverse-form-icon-hover-color: var(--inverse-global-color);
+}