Skip to content
Snippets Groups Projects
Commit 561c95c6 authored by Martin Leblanc's avatar Martin Leblanc Committed by Kevin Paxman
Browse files

ISTWCMS-4729: css for mobile view

parent ab9abd7d
No related branches found
No related tags found
1 merge request!187ISTWCMS 4729 ebremner search form
Hide whitespace changes
Inline Side-by-side
source/_patterns/03-layouts/header/_header.scss
+ 1
− 0
View file @ 561c95c6
......@@ -15,6 +15,7 @@ $site-name-bg: gesso-grayscale(gray-2);
padding: gesso-spacing(xs);
position: relative;
transition: margin 300ms;
&.open{
margin-bottom:4rem;
transition: margin 300ms;
......
source/_patterns/04-components/search/search--wcms-header/_search--wcms-header.scss
+ 146
− 119
View file @ 561c95c6
......@@ -5,7 +5,7 @@ $button-height: 2.25rem;
display:inline-flex;
position:absolute;
top:4rem;
width:100%;
width:98%;
@include medium{
position:relative;
top:inherit;
......@@ -14,14 +14,13 @@ $button-height: 2.25rem;
form label{
margin:0;
position:absolute;
right:0.375rem;
right:6px;
top:-3.4rem;
@include medium{
position:relative;
right:inherit;
top:inherit;
}
}
.uw-search--form{
display:inline-flex;
......@@ -29,141 +28,86 @@ $button-height: 2.25rem;
margin:0;
padding:0;
position:relative;
width:98%;
width:100%;
@include medium{
height:inherit;
width:inherit;
}
.option {
display: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
margin-left: inherit;
padding-left: inherit;
}
.form-item{
margin:inherit;
.uw-input--checkboxform{
margin:inherit;
}
.uw-input--checkboxform{
margin:inherit;
}
.uw-search--checkboxlabel{
background-color: transparent;
border:1px solid $uw-white;
border-radius: 0;
box-shadow: none;
color:$uw-white;
display:block;
@include medium{
display:none;
}
&.form-type-checkbox{
font-weight:200;
height:$input-height;
margin:0;
overflow: hidden;
padding:0;
transition: all 300ms;
width:2.125rem;
&::after {
@include svg-background(search_2-white);
background-position:8px 11px;
background-repeat:no-repeat;
background-size:40%;
content:'';
display:block;
.uw-search--checkboxlabel{
background-color: transparent;
border:1px solid $uw-white;
border-radius: 0;
box-shadow: none;
color:$uw-white;
display:block;
font-weight:200;
height:$input-height;
margin:0;
overflow: hidden;
padding:0;
transition: all 300ms;
width:2.125rem;
&::after {
@include svg-background(search_2-white);
background-position:8px 11px;
background-repeat:no-repeat;
background-size:40%;
content:'';
display:block;
height:2rem;
width:2.125rem;
}
&:hover{
background:$uw-white;
&::after {
@include svg-background(search_2);
}
}
&.close{
background:$uw-white;
&::after {
@include svg-background(mobile-arrow-up);
background-position:10px 14px;
background-repeat:no-repeat;
background-size:34%;
color:$uw-white;
content:'';
display:block;
line-height: 1.5rem;
text-align: center;
}
}
}
@include medium{
display:none;
height:2rem;
width:2.125rem;
}
&:hover{
background:$uw-white;
&::after {
@include svg-background(search_2);
}
}
.uw-input{
&.uw-input--checkboxform{
&.close{
background:$uw-white;
&::after {
@include svg-background(mobile-arrow-up);
background-position:10px 14px;
background-repeat:no-repeat;
background-size:34%;
color:$uw-white;
content:'';
display:block;
height:0;
left:-1000rem;
overflow:hidden;
position: absolute;
~ .form-item {
&.form-type-textfield{
display:none;
}
&.form-type-select{
display:none;
}
}
&:checked{
~ .form-item {
animation:fadeIn 500ms;
display:block;
height:inherit;
&.form-type-textfield,
&.form-type-select{
display:block;
}
}
~ .uw-input--search{
display:block;
}
~ .uw-select--search{
animation:fadeIn 500ms;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color:transparent;
border-color:$uw-white;
color:$uw-white;
display:inline-block;
font-family:gesso-font-family(book);
font-size:gesso-font-size(0);
font-weight:200;
height:$input-height;
line-height:1.25rem;
margin: 0.5rem 0 0;
opacity:1;
outline:none;
overflow: hidden;
padding:gesso-spacing(xs);
transition: all .5s ease;
width:8rem;
&::placeholder {
color: $uw-black;
}
option{
color:$uw-black;
}
@include medium{
display:none;
font-size:gesso-font-size(-2);
}
}
}
line-height: 1.5rem;
text-align: center;
}
}
}
.uw-search-button__wrapper{
display:none;
@include medium{
display:block;
}
}
.uw-input--search{
background: none;
border:1px solid $uw-white;
......@@ -216,7 +160,6 @@ $button-height: 2.25rem;
}
}
}
.uw-select--search{
-webkit-appearance:none;
background-color:transparent;
......@@ -315,6 +258,88 @@ $button-height: 2.25rem;
}
}
}
.uw-input{
&.uw-input--checkboxform{
display:block;
height:0;
left:-1000rem;
overflow:hidden;
position: absolute;
~ .form-item {
&.form-type-textfield{
display:none;
@include medium{
display:block;
}
}
&.form-type-select{
display:none;
@include medium{
display:block;
}
}
}
&:checked{
~ .form-item {
animation:fadeIn 500ms;
display:block;
&.form-type-textfield{
display:block;
.uw-input--search{
display:inline-block;
width:100%;
}
}
&.form-type-select{
display:block;
.uw-select--search{
animation:fadeIn 500ms;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color:transparent;
border-color:$uw-white;
color:$uw-white;
display:inline-block;
font-family:gesso-font-family(book);
font-size:gesso-font-size(0);
font-weight:200;
height:$input-height;
line-height:1.25rem;
margin: 0 0.725rem 0 0;
opacity:1;
outline:none;
overflow: hidden;
padding:gesso-spacing(xs);
transition: all .5s ease;
width:8rem;
&::placeholder {
color: $uw-black;
}
option{
color:$uw-black;
}
@include medium{
display:none;
font-size:gesso-font-size(-2);
}
}
}
}
~ .form-actions{
.uw-search-button__wrapper {
border-width:1px;
display:inherit;
margin-right:0.5rem;
}
}
}
}
}
@include medium{
&:focus-within{
.uw-input--search{
......@@ -366,6 +391,8 @@ $button-height: 2.25rem;
}
}
}
//.uw-search--form{
// color:#fff;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment