diff --git a/source/_patterns/00-atoms/15-form-fields/text-input.mustache b/source/_patterns/00-atoms/15-form-fields/01-text-input.mustache
similarity index 100%
rename from source/_patterns/00-atoms/15-form-fields/text-input.mustache
rename to source/_patterns/00-atoms/15-form-fields/01-text-input.mustache
diff --git a/source/_patterns/00-atoms/15-form-fields/disabled-text-input.mustache b/source/_patterns/00-atoms/15-form-fields/02-disabled-text-input.mustache
similarity index 100%
rename from source/_patterns/00-atoms/15-form-fields/disabled-text-input.mustache
rename to source/_patterns/00-atoms/15-form-fields/02-disabled-text-input.mustache
diff --git a/source/_patterns/00-atoms/15-form-fields/read-only-text-input.mustache b/source/_patterns/00-atoms/15-form-fields/03-read-only-text-input.mustache
similarity index 100%
rename from source/_patterns/00-atoms/15-form-fields/read-only-text-input.mustache
rename to source/_patterns/00-atoms/15-form-fields/03-read-only-text-input.mustache
diff --git a/source/_patterns/00-atoms/15-form-fields/text-input-addon.mustache b/source/_patterns/00-atoms/15-form-fields/04-text-input-addon.mustache
similarity index 100%
rename from source/_patterns/00-atoms/15-form-fields/text-input-addon.mustache
rename to source/_patterns/00-atoms/15-form-fields/04-text-input-addon.mustache
diff --git a/source/_patterns/00-atoms/15-form-fields/05-select.mustache b/source/_patterns/00-atoms/15-form-fields/05-select.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..6b3b929054c643d72df79d6299a9b54bdc18ff34
--- /dev/null
+++ b/source/_patterns/00-atoms/15-form-fields/05-select.mustache
@@ -0,0 +1,8 @@
+<div class="select">
+ <select class="select__control form-field__control {{ classes }}" value="" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}>
+ <option>Option 1</option>
+ <option>Option 2</option>
+ <option>Option 3</option>
+ <option>Option 4</option>
+ </select>
+</div>
diff --git a/source/_patterns/00-atoms/15-form-fields/06-disabled-select.mustache b/source/_patterns/00-atoms/15-form-fields/06-disabled-select.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..120299562576509240bb019527d5a449343f3977
--- /dev/null
+++ b/source/_patterns/00-atoms/15-form-fields/06-disabled-select.mustache
@@ -0,0 +1 @@
+{{> atoms-select(disabled: true) }}
diff --git a/source/_patterns/00-atoms/15-form-fields/07-readonly-select.mustache b/source/_patterns/00-atoms/15-form-fields/07-readonly-select.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..b0ed964bc8ec1f0859dd161c3fbc06f5c9f6f5a9
--- /dev/null
+++ b/source/_patterns/00-atoms/15-form-fields/07-readonly-select.mustache
@@ -0,0 +1 @@
+{{> atoms-select(readonly: true) }}
diff --git a/source/_patterns/00-atoms/15-form-fields/08-checkbox.mustache b/source/_patterns/00-atoms/15-form-fields/08-checkbox.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..a7ebb21a660a6514be9fb51279c9091d6bf287c6
--- /dev/null
+++ b/source/_patterns/00-atoms/15-form-fields/08-checkbox.mustache
@@ -0,0 +1,4 @@
+<div class="checkbox form-field__control">
+ <input type="checkbox" id="checkbox_1" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}>
+ <label for="checkbox_1">{{ excerpt.short }}</label>
+</div>
diff --git a/source/_patterns/00-atoms/15-form-fields/09-disabled-checkbox.mustache b/source/_patterns/00-atoms/15-form-fields/09-disabled-checkbox.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..35c5c352e0c538e86431138d264e95a7c8ed7e73
--- /dev/null
+++ b/source/_patterns/00-atoms/15-form-fields/09-disabled-checkbox.mustache
@@ -0,0 +1 @@
+{{> atoms-checkbox(disabled: true) }}
diff --git a/source/_patterns/00-atoms/15-form-fields/10-radio.mustache b/source/_patterns/00-atoms/15-form-fields/10-radio.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..0a37088c28a55ecbe73556f47af116534e59b5f7
--- /dev/null
+++ b/source/_patterns/00-atoms/15-form-fields/10-radio.mustache
@@ -0,0 +1,6 @@
+<div class="radio form-field__control">
+ <label>
+ <input type="radio" name="radio" {{# disabled }}disabled{{/ disabled }}>
+ <span>Option</span>
+ </label>
+</div>
diff --git a/source/_patterns/00-atoms/15-form-fields/11-disabled-radio.mustache b/source/_patterns/00-atoms/15-form-fields/11-disabled-radio.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..9387317a7a5f620266c8be975893d2d5b56e1597
--- /dev/null
+++ b/source/_patterns/00-atoms/15-form-fields/11-disabled-radio.mustache
@@ -0,0 +1 @@
+{{> atoms-radio(disabled: true) }}
diff --git a/source/_patterns/00-atoms/15-form-fields/checkbox.mustache b/source/_patterns/00-atoms/15-form-fields/checkbox.mustache
deleted file mode 100644
index 55008b14d4739c2ea73b648e878d121256793359..0000000000000000000000000000000000000000
--- a/source/_patterns/00-atoms/15-form-fields/checkbox.mustache
+++ /dev/null
@@ -1,4 +0,0 @@
-<div class="checkbox form-field__control">
- <input type="checkbox" id="checkbox_1">
- <label for="checkbox_1">{{ excerpt.short }}</label>
-</div>
diff --git a/source/_patterns/01-molecules/14-form-fields/radio-field.mustache b/source/_patterns/01-molecules/14-form-fields/radio-field.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..a901ad361cf09a997ae2fd0ba98b2a872db91965
--- /dev/null
+++ b/source/_patterns/01-molecules/14-form-fields/radio-field.mustache
@@ -0,0 +1,13 @@
+<div class="form-field {{# error }}form-field--error{{/ error }} {{ classes }}">
+ <div class="form-field__wrapper {{ wrapperClasses }}">
+ {{> atoms-radio }}
+ {{> atoms-radio }}
+ {{> atoms-radio }}
+ </div>
+ {{# error }}
+ <div class="form-field__error">{{ error }}</div>
+ {{/ error }}
+ {{# help }}
+ <div class="form-field__help-text">{{ help }}</div>
+ {{/ help }}
+</div>
diff --git a/source/_patterns/01-molecules/14-form-fields/select-field.mustache b/source/_patterns/01-molecules/14-form-fields/select-field.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..c36e6a8ac33094d4833c73c605cb434c86106427
--- /dev/null
+++ b/source/_patterns/01-molecules/14-form-fields/select-field.mustache
@@ -0,0 +1,12 @@
+<div class="form-field {{# error }}form-field--error{{/ error }} {{ classes }}">
+ <label class="form-field__label" for="field">{{ label }}{{^ label }}{{ form.label }}{{/ label }}</label>
+ <div class="form-field__wrapper form-field__wrapper--shadowed">
+ {{> atoms-select }}
+ </div>
+ {{# error }}
+ <div class="form-field__error">{{ error }}</div>
+ {{/ error }}
+ {{# help }}
+ <div class="form-field__help-text">{{ help }}</div>
+ {{/ help }}
+</div>
diff --git a/source/_patterns/01-molecules/14-form-fields/validation.mustache b/source/_patterns/01-molecules/14-form-fields/validation.mustache
index 09f6a8209eaf4219b7de42325df24cfa3c9ab990..df5166797046dd8c3fd1f09351b47c432a3274c7 100644
--- a/source/_patterns/01-molecules/14-form-fields/validation.mustache
+++ b/source/_patterns/01-molecules/14-form-fields/validation.mustache
@@ -8,4 +8,8 @@
{{> atoms-text-input-addon(classes: "text-input-addon--r") }}
</div>
</div>
+
+ {{> molecules-select-field(classes: "form-field--required", error: "Toto pole je povinné")}}
+ {{> molecules-radio-field(classes: "form-field--required", error: "Toto pole je povinné")}}
+ {{> molecules-checkbox-field(classes: "form-field--required", error: "Toto pole je povinné")}}
</div>
diff --git a/source/_patterns/02-organisms/07-forms/form.mustache b/source/_patterns/02-organisms/07-forms/form.mustache
index c08002a5e962504b76a5ebb084996afdf47b463f..470c360d6555ca3bf847f18ca79d1eec2fac933b 100644
--- a/source/_patterns/02-organisms/07-forms/form.mustache
+++ b/source/_patterns/02-organisms/07-forms/form.mustache
@@ -3,5 +3,9 @@
{{> molecules-addon-field(classes: "col-span-2") }}
{{> molecules-field(classes: "col-span-4 form-field--required", error: "Tady nastala nějaká chyba") }}
{{> molecules-checkbox-field(classes: "col-span-4") }}
+ {{> molecules-radio-field(classes: "col-span-3") }}
+ {{> molecules-radio-field(classes: "col-span-1", wrapperClasses: "form-field__wrapper--col-items") }}
+ {{> molecules-select-field(classes: "col-span-2") }}
+ {{> molecules-select-field(classes: "col-span-2") }}
{{> atoms-button(classes: "col-span-2 text-lg max-w-full btn--black-100", cta: "Odeslat") }}
</div>
diff --git a/source/css/atoms/form-field.pcss b/source/css/atoms/form-field.pcss
index 3c9d1f9dab903932c1990d7a48adfb9c5562cd9d..35ec6ce4632a6631153b50bb3e01cba89959bf94 100644
--- a/source/css/atoms/form-field.pcss
+++ b/source/css/atoms/form-field.pcss
@@ -3,16 +3,16 @@
}
.text-input {
- @apply bg-white py-3 px-4 text-lg border border-grey-200 transition duration-200;
+ @apply outline-none bg-grey-25 py-3 px-4 text-lg border border-grey-200 transition duration-200;
&:hover:not([disabled]):not([readonly]) {
- @apply outline-none border-grey-300;
+ @apply border-grey-300;
}
&:active,
&:focus {
&:not([disabled]):not([readonly]) {
- @apply outline-none border-blue-300;
+ @apply border-blue-300;
}
}
@@ -60,37 +60,68 @@
@apply border-r-0;
}
-.form-field--error {
- .text-input,
- .text-input ~ .text-input-addon {
- @apply border-red-600;
+.select {
+ @apply relative flex items-center w-full;
+
+ &:after {
+ @apply absolute right-0 text-xl font-bold pr-3 transition duration-200;
+ font-family: 'pirati-ui';
+ /* chevron down */
+ content: "\e925";
}
}
+.select__control {
+ @apply w-full appearance-none outline-none bg-grey-25 py-3 pl-4 pr-8 text-lg rounded-none border border-grey-200 transition duration-200;
+
+ &:hover:not([disabled]):not([readonly]) {
+ @apply border-grey-300;
+ }
+
+ &:active,
+ &:focus {
+ &:not([disabled]):not([readonly]) {
+ @apply border-blue-300;
+ }
+ }
+
+ &::placeholder {
+ @apply text-grey-200 font-normal;
+ }
+
+ &[readonly],
+ &[disabled] {
+ @apply bg-grey-125 cursor-not-allowed;
+
+ &::placeholder {
+ @apply text-grey-200;
+ }
+ }
+}
.checkbox {
@apply relative flex;
input {
- @apply w-6 h-6 cursor-pointer bg-grey-200 mr-2 border border-grey-200 transition duration-200;
-
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
+ @apply w-5 h-5 cursor-pointer appearance-none outline-none bg-grey-200 mr-2 border border-grey-200 transition duration-200;
&:hover:not([disabled]):not([readonly]) {
- @apply outline-none border-grey-300;
+ @apply border-grey-300;
}
&:active,
&:focus {
- @apply outline-none border-blue-300;
+ @apply border-blue-300;
}
&:checked {
@apply bg-blue-300 border-transparent;
}
+
+ &[disabled] {
+ @apply cursor-not-allowed;
+ }
}
label {
@@ -103,11 +134,61 @@
content: "";
height: 5px;
width: 12px;
- top: 8px;
- left: 6px;
+ top: 6px;
+ left: 4px;
border-left: 2px solid theme("colors.white");
border-bottom: 2px solid theme("colors.white");
transform: rotate(-45deg);
}
}
+
+
+.radio {
+ @apply relative;
+
+ input {
+ @apply w-5 h-5 appearance-none cursor-pointer outline-none bg-grey-200 mr-2 border border-grey-200 transition duration-200 rounded-full;
+
+ &:hover:not([disabled]):not([readonly]) {
+ @apply border-grey-300;
+ }
+
+ &:active,
+ &:focus {
+ @apply border-blue-300;
+ }
+
+ &:checked {
+ @apply bg-blue-300 border-transparent;
+ }
+
+ &[disabled] {
+ @apply cursor-not-allowed;
+ }
+ }
+
+ label {
+ @apply flex items-center leading-tight;
+ }
+
+ &:after {
+ @apply inline absolute pointer-events-none rounded-full bg-white;
+
+ width: .7rem;
+ height: .7rem;
+
+ content: "";
+ top: calc((theme("spacing.5") - .7rem) / 2);
+ left: calc((theme("spacing.5") - .7rem) / 2);
+ }
+}
+
+
+.form-field--error {
+ .text-input,
+ .select__control,
+ .text-input ~ .text-input-addon {
+ @apply border-red-600;
+ }
+}
diff --git a/source/css/molecules/form-field.pcss b/source/css/molecules/form-field.pcss
index e6542578045e07838aaec38cb227203bed89a442..edca451b60d22a77132c3b13c15521a9c482ad11 100644
--- a/source/css/molecules/form-field.pcss
+++ b/source/css/molecules/form-field.pcss
@@ -7,22 +7,35 @@
}
.form-field__wrapper {
- /* Flex allows centering absolute position too, used for .form-field--appendicon */
@apply relative flex;
/* Inset shadow for text-fields */
- &.form-field__wrapper--shadowed:after {
+ &--shadowed:after {
@apply absolute w-full h-full pointer-events-none;
content: "";
box-shadow: inset 0 2px 6px 0 rgba(0,0,0,.1);
}
+
+ &,
+ &--row-items {
+ .form-field__control + .form-field__control {
+ @apply ml-4;
+ }
+ }
+
+ &--col-items {
+ @apply flex-col;
+
+ .form-field__control + .form-field__control {
+ @apply ml-0 mt-4;
+ }
+ }
}
.form-field__error,
.form-field__help-text {
@apply text-sm mt-1 font-light;
-
}
.form-field__error {
diff --git a/tailwind.config.js b/tailwind.config.js
index 229a268f707e1c0416eb6cf2c80745d0ae99f4c5..3a3c806ef62a396aaff355cb36afb6e1a57daa4f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -84,6 +84,7 @@ module.exports = {
'black': '#000000',
'white': '#ffffff',
'grey': {
+ '25': '#fafafa',
'50': '#f7f7f7',
'100': '#f3f3f3',
'125': '#f0f0f0',