From 9ce090feb6aa3d8262cac2c43ee86ebfe5098422 Mon Sep 17 00:00:00 2001
From: "fanky.eu" <jakub.webisti@gmail.com>
Date: Mon, 17 May 2021 12:22:31 +0200
Subject: [PATCH] select filters in program full width mobile, more width
desktop
---
.../00-atoms/15-form-fields/05-select.mustache | 2 +-
.../elections-program-listing-pirati-stan.mustache | 2 +-
source/css/atoms/form-field-pirati-stan.pcss | 12 ++++++------
3 files changed, 8 insertions(+), 8 deletions(-)
diff --git a/source/_patterns/00-atoms/15-form-fields/05-select.mustache b/source/_patterns/00-atoms/15-form-fields/05-select.mustache
index 8e78db8..292b70a 100644
--- a/source/_patterns/00-atoms/15-form-fields/05-select.mustache
+++ b/source/_patterns/00-atoms/15-form-fields/05-select.mustache
@@ -2,7 +2,7 @@
<select class="select__control form-field__control {{ classes }}" onchange="this.dataset.chosen = this.value;" data-chosen="{{# selected }}{{ selected }}{{/ selected }}"{{# disabled }} disabled{{/ disabled }}{{# readonly }} readonly{{/ readonly }}{{# required }} required{{/ required }}>
<option {{^ selected }}selected {{/ selected }}value="">{{ placeholder }}{{^ placeholder }}Choose option{{/ placeholder }}</option>
<option {{# selected }}selected {{/ selected }}>{{# selected }}{{ selected }}{{/ selected }}{{^ selected }}Option 1{{/ selected }}</option>
- <option>Option 2</option>
+ <option>Quite long and described option</option>
<option>Option 3</option>
</select>
</div>
\ No newline at end of file
diff --git a/source/_patterns/03-templates/coalition-program-points/elections-program-listing-pirati-stan.mustache b/source/_patterns/03-templates/coalition-program-points/elections-program-listing-pirati-stan.mustache
index fb054d2..a1555c8 100644
--- a/source/_patterns/03-templates/coalition-program-points/elections-program-listing-pirati-stan.mustache
+++ b/source/_patterns/03-templates/coalition-program-points/elections-program-listing-pirati-stan.mustache
@@ -11,7 +11,7 @@
<a class="switch__item switch__item--active" data-chosen="mujprogram">Můj program</a>
<a class="switch__item" data-chosen="celyprogram">Celý program</a>
</div>
- <div class="filters sm:px-20">
+ <div class="filters">
{{> atoms-select(wrapClasses: "inline-flex w-auto text-black w-full md:w-auto", classes: "bg-black block filter-pirati-stan", placeholder: "Podle resortu", selected: "Konstruktivní boj proti dezinformacím") }}
{{> atoms-select(wrapClasses: "inline-flex w-auto text-white w-full md:w-auto", classes: "bg-black block filter-pirati-stan", placeholder: "Podle plánu") }}
</div>
diff --git a/source/css/atoms/form-field-pirati-stan.pcss b/source/css/atoms/form-field-pirati-stan.pcss
index 50927e6..90700e0 100644
--- a/source/css/atoms/form-field-pirati-stan.pcss
+++ b/source/css/atoms/form-field-pirati-stan.pcss
@@ -1,16 +1,13 @@
.select__control {
-
- &:active,
- &:focus {
&:not([disabled]):not([readonly]) {
@apply border-black;
- }
}
}
select:not([data-chosen='']) {
background-color: theme("colors.fxactivecolor");
+ border-color: theme("colors.fxactivecolor");
}
option[value=""] {
@apply hidden;
@@ -141,10 +138,13 @@ option[value=""] {
}
.filter-pirati-stan {
- @apply font-alt;
+ @apply font-alt pt-4 pl-6 pr-12 align-top;
min-width: 200px;
height: 80px;
text-transform: uppercase;
- font-size: 22px!important;
+ font-size: 20px!important;
line-height: 25px;
+ @screen sm{
+ font-size: 22px!important;
+ }
}
\ No newline at end of file
--
GitLab