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

ISTWCMS-4729: css for mobile view and clean up for desktop.

parent 561c95c6
No related branches found
No related tags found
1 merge request!187ISTWCMS 4729 ebremner search form
...@@ -9,13 +9,11 @@ $site-name-bg: gesso-grayscale(gray-2); ...@@ -9,13 +9,11 @@ $site-name-bg: gesso-grayscale(gray-2);
&__masthead { &__masthead {
display: flex; display: flex;
font-family:gesso-font-family(condensedbook);
margin-bottom:0; margin-bottom:0;
min-height: 3.5rem; min-height: 3.5rem;
padding: gesso-spacing(xs); padding: gesso-spacing(xs);
position: relative; position: relative;
transition: margin 300ms; transition: margin 300ms;
&.open{ &.open{
margin-bottom:4rem; margin-bottom:4rem;
transition: margin 300ms; transition: margin 300ms;
...@@ -33,6 +31,7 @@ $site-name-bg: gesso-grayscale(gray-2); ...@@ -33,6 +31,7 @@ $site-name-bg: gesso-grayscale(gray-2);
.uw-header-menu { .uw-header-menu {
align-self: flex-end; align-self: flex-end;
margin-right:2.75rem; margin-right:2.75rem;
@include medium{ @include medium{
margin-right:1rem; margin-right:1rem;
} }
......
...@@ -2,12 +2,13 @@ ...@@ -2,12 +2,13 @@
// Styles for select form items. // Styles for select form items.
$form-select-arrow-size: 20px !default; $form-select-arrow-size: 20px !default;
$form-select-font: gesso-font-family(systemmedium);
.form-item__select { .form-item__select {
@include svg-background(select-arrows); @include svg-background(select-arrows);
background-position: right rem($form-select-arrow-size / 2) center; // LTR background-position: right rem($form-select-arrow-size / 2) center; // LTR
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: rem($form-select-arrow-size); background-size: rem($form-select-arrow-size);
font-family:$form-select-font;
padding-right: rem($form-select-arrow-size * 2); // LTR padding-right: rem($form-select-arrow-size * 2); // LTR
@if $support-for-rtl { @if $support-for-rtl {
......
$input-height: 2.375rem; $input-height: rem(36px);
$button-height: 2.25rem; $button-height: rem(36px);
.uw-header-search{ .uw-header-search{
display:inline-flex;
position:absolute; position:absolute;
right:0.5rem;
top:4rem; top:4rem;
width:98%; width:100%;
@include medium{ @include medium{
position:relative; position:relative;
right:inherit;
top:inherit; top:inherit;
width:inherit; width:inherit;
} }
form label{ form label{
margin:0; margin:0;
position:absolute; position:absolute;
right:6px; right:0;
top:-3.4rem; top:-3.4rem;
@include medium{ @include medium{
position:relative; position:relative;
...@@ -23,14 +25,21 @@ $button-height: 2.25rem; ...@@ -23,14 +25,21 @@ $button-height: 2.25rem;
} }
} }
.uw-search--form{ .uw-search--form{
display:inline-flex; display:grid;
gap:0.7rem;
grid-template-columns: auto 8rem 2.125rem;
height:3.4rem; height:3.4rem;
margin:0; margin:0;
padding:0; padding:0 0 0 1rem;
position:relative; position:relative;
width:100%; width:100%;
@include medium{ @include medium{
border:1px solid $uw-white;
display:inline-flex;
gap:inherit;
grid-template-columns:inherit;
height:inherit; height:inherit;
padding:0;
width:inherit; width:inherit;
} }
.option { .option {
...@@ -45,6 +54,13 @@ $button-height: 2.25rem; ...@@ -45,6 +54,13 @@ $button-height: 2.25rem;
.form-item{ .form-item{
margin:inherit; margin:inherit;
} }
.form-type-select{
height:0;
left:-1000rem;
opacity:0;
overflow:hidden;
position: absolute;
}
.uw-input--checkboxform{ .uw-input--checkboxform{
margin:inherit; margin:inherit;
} }
...@@ -60,7 +76,7 @@ $button-height: 2.25rem; ...@@ -60,7 +76,7 @@ $button-height: 2.25rem;
display:none; display:none;
} }
font-weight:200; font-weight:200;
height:$input-height; height:2.375rem;
margin:0; margin:0;
overflow: hidden; overflow: hidden;
padding:0; padding:0;
...@@ -76,7 +92,8 @@ $button-height: 2.25rem; ...@@ -76,7 +92,8 @@ $button-height: 2.25rem;
height:2rem; height:2rem;
width:2.125rem; width:2.125rem;
} }
&:hover{ &:hover,
&:focus{
background:$uw-white; background:$uw-white;
&::after { &::after {
@include svg-background(search_2); @include svg-background(search_2);
...@@ -99,24 +116,23 @@ $button-height: 2.25rem; ...@@ -99,24 +116,23 @@ $button-height: 2.25rem;
} }
} }
.uw-search-button__wrapper{ .uw-search-button__wrapper{
display:none; display:none;
@include medium{ @include medium{
display:block; display:block;
} }
} }
.uw-input--search{ .uw-input--search{
background: none; background: none;
border:1px solid $uw-white; border:1px solid $uw-white;
border-radius: 0; border-radius: 0;
border-width: 1px 0 1px 1px; border-width: 1px 0 1px 1px;
border-width: 0;
box-shadow: none; box-shadow: none;
color:$uw-white; color:$uw-white;
display:none; display:none;
font-family:gesso-font-family(book); font-family:$form-select-font;
font-size:gesso-font-size(0); font-size:gesso-font-size(0);
font-weight:200; font-weight:200;
height:$input-height; height:$input-height;
...@@ -125,7 +141,6 @@ $button-height: 2.25rem; ...@@ -125,7 +141,6 @@ $button-height: 2.25rem;
padding:gesso-spacing(xs); padding:gesso-spacing(xs);
position: relative; position: relative;
transition: all 0.3s ease; transition: all 0.3s ease;
width:2rem;
@include medium{ @include medium{
display:block; display:block;
font-size:gesso-font-size(-2); font-size:gesso-font-size(-2);
...@@ -153,7 +168,7 @@ $button-height: 2.25rem; ...@@ -153,7 +168,7 @@ $button-height: 2.25rem;
} }
&:focus{ &:focus{
background: $uw-white; background: $uw-white;
border:1px solid $uw-white; border-width: 0;
color:$uw-black; color:$uw-black;
&::placeholder{ &::placeholder{
color:$uw-black; color:$uw-black;
...@@ -164,8 +179,8 @@ $button-height: 2.25rem; ...@@ -164,8 +179,8 @@ $button-height: 2.25rem;
-webkit-appearance:none; -webkit-appearance:none;
background-color:transparent; background-color:transparent;
border-radius:0; border-radius:0;
display:none; display:block;
font-family:gesso-font-family(book); font-family:$form-select-font;
font-size:gesso-font-size(0); font-size:gesso-font-size(0);
@include medium{ @include medium{
...@@ -174,20 +189,18 @@ $button-height: 2.25rem; ...@@ -174,20 +189,18 @@ $button-height: 2.25rem;
opacity:0; opacity:0;
overflow:hidden; overflow:hidden;
padding-right:0; padding-right:0;
transition: all 0.3s ease; transition: opacity 0.5s ease;
width:0; width:7.5rem;
} }
.form-actions{ .form-actions{
margin:0; margin:0;
padding:0; padding:0;
} }
.uw-search-button__wrapper{ .uw-search-button__wrapper{
border:1px solid $uw-white; border-width: 0;
border-radius: 0;
border-width: 1px 1px 1px 0;
height:$input-height; height:$input-height;
position:relative; position:relative;
width: 2rem; width:2.125rem;
&::after { &::after {
@include svg-background(search_2-white); @include svg-background(search_2-white);
background-position:8px 11px; background-position:8px 11px;
...@@ -227,9 +240,10 @@ $button-height: 2.25rem; ...@@ -227,9 +240,10 @@ $button-height: 2.25rem;
&__form { &__form {
background-color: inherit; background-color: inherit;
background-image: none; background-image: none;
border-radius: 0; border: 1px solid $uw-white;
border-style: inset; @include medium {
//border-width: 1px 1px 1px 0; border-width: 0;
}
box-shadow: none; box-shadow: none;
cursor: pointer; cursor: pointer;
display: inherit; display: inherit;
...@@ -243,22 +257,21 @@ $button-height: 2.25rem; ...@@ -243,22 +257,21 @@ $button-height: 2.25rem;
max-width: inherit; max-width: inherit;
padding:inherit; padding:inherit;
position:absolute; position:absolute;
right:1px; right:0;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
text-shadow: none; text-shadow: none;
text-transform: uppercase; text-transform: uppercase;
top:1px; top:0;
transition: background 300ms cubic-bezier(0.4, 0, 1, 1); transition: background 300ms cubic-bezier(0.4, 0, 1, 1);
vertical-align: top; vertical-align: top;
white-space: normal; white-space: normal;
width: 2rem; width: 2.125rem;
z-index: gesso-z-index(content); z-index: gesso-z-index(content);
} }
} }
} }
.uw-input{ .uw-input{
&.uw-input--checkboxform{ &.uw-input--checkboxform{
display:block; display:block;
...@@ -267,18 +280,6 @@ $button-height: 2.25rem; ...@@ -267,18 +280,6 @@ $button-height: 2.25rem;
overflow:hidden; overflow:hidden;
position: absolute; position: absolute;
~ .form-item { ~ .form-item {
&.form-type-textfield{
display:none;
@include medium{
display:block;
}
}
&.form-type-select{
display:none;
@include medium{
display:block;
}
}
} }
&:checked{ &:checked{
~ .form-item { ~ .form-item {
...@@ -287,12 +288,18 @@ $button-height: 2.25rem; ...@@ -287,12 +288,18 @@ $button-height: 2.25rem;
&.form-type-textfield{ &.form-type-textfield{
display:block; display:block;
.uw-input--search{ .uw-input--search{
border:1px solid $uw-white;
display:inline-block; display:inline-block;
width:100%; width:100%;
} }
} }
&.form-type-select{ &.form-type-select{
display:block; display:block;
height:inherit;
left:inherit;
opacity:1;
overflow:hidden;
position: relative;
.uw-select--search{ .uw-select--search{
animation:fadeIn 500ms; animation:fadeIn 500ms;
-webkit-appearance: none; -webkit-appearance: none;
...@@ -312,7 +319,7 @@ $button-height: 2.25rem; ...@@ -312,7 +319,7 @@ $button-height: 2.25rem;
outline:none; outline:none;
overflow: hidden; overflow: hidden;
padding:gesso-spacing(xs); padding:gesso-spacing(xs);
transition: all .5s ease; transition: opacity .5s ease;
width:8rem; width:8rem;
&::placeholder { &::placeholder {
color: $uw-black; color: $uw-black;
...@@ -330,22 +337,30 @@ $button-height: 2.25rem; ...@@ -330,22 +337,30 @@ $button-height: 2.25rem;
~ .form-actions{ ~ .form-actions{
.uw-search-button__wrapper { .uw-search-button__wrapper {
border-width:1px; animation:fadeIn 500ms;
border-width:0;
display:inherit; display:inherit;
margin-right:0.5rem; @include medium{
margin-right:0;
}
.button--submit{
&__form {
position: relative;;
}
}
} }
} }
} }
} }
} }
&:focus-within{
@include medium{
@include medium{
&:focus-within{
.uw-input--search{ .uw-input--search{
@include medium{ transition: width 0.3s ease;
width:14rem; width:14rem;
}
&:hover{ &:hover{
~ .button--submit{ ~ .button--submit{
&__form { &__form {
...@@ -353,14 +368,17 @@ $button-height: 2.25rem; ...@@ -353,14 +368,17 @@ $button-height: 2.25rem;
} }
} }
} }
transition: width 0.3s ease; }
.form-type-select{
height:$input-height;
left:inherit;
opacity:1;
overflow:inherit;
position:relative;
width:7.5rem;
} }
.uw-select--search{ .uw-select--search{
-webkit-appearance:none; border-width:0;
border-color:$uw-white;
border-radius: 0;
border-style: solid;
border-width: 1px;
color:$uw-white; color:$uw-white;
display:inline-block; display:inline-block;
height:$input-height; height:$input-height;
...@@ -368,283 +386,23 @@ $button-height: 2.25rem; ...@@ -368,283 +386,23 @@ $button-height: 2.25rem;
outline:none; outline:none;
padding-left: 0.5rem; // LTR padding-left: 0.5rem; // LTR
padding-right: 0; padding-right: 0;
transition: all 0.3s ease;
width:7.5rem; width:7.5rem;
&:hover, &:hover,
&:focus{ &:focus{
background-color:$uw-white; background-color:$uw-white;
border-color:$uw-white; border-width:0;
border-radius:0;
border-width: 1px ;
color:$uw-black; color:$uw-black;
} }
} }
.button--submit{ .button--submit{
&__form { &__form {
border-color:gesso-grayscale(gray-6); border-color:gesso-grayscale(gray-6);
border-style: solid; border-width:0;
border-width: 1px 1px 1px 0;
height:$input-height; height:$input-height;
top:0; top:0;
} }
} }
} }
} }
} }
//.uw-search--form{ }
// color:#fff;
// margin:0;
// padding:0;
// position:relative;
// .uw-input--search {
// background:$test-color-3;
// width:2rem;
//
// @include medium{
// width:6rem;
// }
// }
// .uw-select--search{
// display:none;
//
// }
// &:hover{
// .uw-search--label{
// color:#000;
// }
// .uw-input--search {
// color: #000;
// &::placeholder {
// color: #000;
// }
// ~ .button--submit{
// &__form {
// color: #000;
// &:hover{
// color:#fff;
// }
// }
// }
// }
// }
//
// &:focus-within{
// display:flex;
//
// .uw-input.uw-input--search{
// background:$uw-white;
// color: #000;
// width:14rem;
// &::placeholder {
// color: #000;
// }
// ~ .button--submit{
// &__form {
// background:$uw-white;
// border: 1px solid $uw-white;
// border-left: 1px solid $uw-black;
// color:$uw-black;
// height:38px;
// position:relative;
// right:inherit;
// top:0;
// &::after {
// left:0.5rem;
// position:absolute;
// top:0.5rem;
//
// }
// &:hover,
// &:focus{
//
// background: gesso-grayscale(gray-6);
// border: 1px solid #767676;
// color:$uw-white;
// }
// }
// }
// ~ .uw-select--search{
// //border:0;
// //border-radius:0;
// //display:block;
// //font-family:gesso-font-family(book);
// //font-size:gesso-font-size(-2);
// //font-weight:200;
// //height:38px;
// //line-height:1.25rem;
// //opacity:1;
// //outline:none;
// //overflow: hidden;
// //padding:gesso-spacing(xs);
// //position:relative;
// //transition: all .3s ease;
// //width:7.5rem;
// &:hover,
// &:focus{
//
// //background: gesso-grayscale(gray-6);
// //border:0;
// //color:$uw-white;
// }
//
// }
// }
//
// }
// .uw-search--label{
// background: none;
// border:1px solid #fff;
// border-radius: 0;
// box-shadow: none;
// color:#fff;
// display:flex;
// font-family:gesso-font-family(book);
// font-size:gesso-font-size(-2);
// font-weight:200;
// height:38px;
// line-height:1.25rem;
// overflow: hidden;
// padding:gesso-spacing(xs);
// padding-right:1.5rem;
// position: absolute;
// transition: all .5s ease;
// width:2rem;
// &::after {
// content:$fdsu-search-2;
// display:block;
// font-family: gesso-font-family(iconfont);
// font-weight:200;
// text-align: center;
// }
// .uw-search--labeltext{
// display:block;
// overflow: hidden;
// text-indent:-1000rem;
// }
// @include medium{
// display:none;
// .uw-search--labeltext{
// display:none;
// }
// }
// }
// .uw-input{
//
// border:1px solid #fff;
// border-radius: 0;
// box-shadow: none;
// color:#fff;
// font-size:gesso-font-size(-2);
// position: relative;
// ~ .uw-select--search{
// opacity:0;
// width:0;
// }
// &.uw-input--search{
// background: none;
// color:#fff;
// font-family:gesso-font-family(book);
// font-weight:200;
// height:38px;
// line-height:1.25rem;
// overflow: hidden;
// padding:gesso-spacing(xs);
// padding-right:1.5rem;
// position: relative;
// transition: all .3s ease;
//
// &::placeholder{
// color:#fff;
// opacity:0.5;
// &:hover{
// color:#000;
// }
// }
// &:hover{
// background: #fff;
// color:#000;
// &::placeholder{
// color:#000;
// }
// }
//
// //&:focus{
// // background: #fff;
// // color:#000;
// //
// // &::placeholder{
// // color:#000;
// // }
// // ~ .button--submit{
// // &__form {
// // background: $uw-white;
// // color: #000;
// // &:hover{
// // background: gesso-grayscale(gray-6);
// // color:#fff;
// // }
// // }
// // }
// //
// //}
// }
// }
// .button{
// margin:0;
// visibility:hidden;
// @include medium{
// visibility:visible;
// }
// }
// .button--submit{
// margin:0;
// position: relative;
// &__form{
// background-color: inherit;
// background-image: none;
// border-radius: 0;
// border-style: inset;
// //border-width: 1px 1px 1px 0;
// box-shadow: none;
// cursor: pointer;
// display: inherit;
// font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
// font-size: inherit;
// font-weight:200;
// height:36px;
// letter-spacing:inherit;
// line-height:inherit;
// max-width: inherit;
// padding:inherit;
// position:absolute;
// right:1px;
// text-align: center;
// text-decoration: none;
// text-shadow: none;
// text-transform: uppercase;
// top:1px;
// transition: background 200ms cubic-bezier(0.4, 0, 1, 1);
// vertical-align: top;
// white-space: normal;
// width: 2rem;
// &::after {
// content:$fdsu-search-2;
// display:block;
// font-family: gesso-font-family(iconfont);
// font-weight:200;
// text-align: center;
// //transform: rotate(45deg);
// }
// &:hover,
// &:focus{
//
// background: gesso-grayscale(gray-6);
// color: $uw-white;
// }
// }
// }
//}
}
...@@ -17,7 +17,7 @@ form_items: ...@@ -17,7 +17,7 @@ form_items:
label: label:
text: 'Search' text: 'Search'
class: '' class: ''
- classes: 'uw-select--search', - classes: 'uw-select--search'
form_item_wrapper: true form_item_wrapper: true
type: 'select' type: 'select'
name: 'search-input' name: 'search-input'
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment