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
Hide whitespace changes
Inline Side-by-side
source/_patterns/03-layouts/header/_header.scss
+ 1
− 2
View file @ 49ffdf9a
......@@ -9,13 +9,11 @@ $site-name-bg: gesso-grayscale(gray-2);
&__masthead {
display: flex;
font-family:gesso-font-family(condensedbook);
margin-bottom:0;
min-height: 3.5rem;
padding: gesso-spacing(xs);
position: relative;
transition: margin 300ms;
&.open{
margin-bottom:4rem;
transition: margin 300ms;
......@@ -33,6 +31,7 @@ $site-name-bg: gesso-grayscale(gray-2);
.uw-header-menu {
align-self: flex-end;
margin-right:2.75rem;
@include medium{
margin-right:1rem;
}
......
source/_patterns/04-components/form-item/form-item--select/_form-item--select.scss
+ 2
− 1
View file @ 49ffdf9a
......@@ -2,12 +2,13 @@
// Styles for select form items.
$form-select-arrow-size: 20px !default;
$form-select-font: gesso-font-family(systemmedium);
.form-item__select {
@include svg-background(select-arrows);
background-position: right rem($form-select-arrow-size / 2) center; // LTR
background-repeat: no-repeat;
background-size: rem($form-select-arrow-size);
font-family:$form-select-font;
padding-right: rem($form-select-arrow-size * 2); // LTR
@if $support-for-rtl {
......
source/_patterns/04-components/search/search--wcms-header/_search--wcms-header.scss
+ 77
− 319
View file @ 49ffdf9a
$input-height: 2.375rem;
$button-height: 2.25rem;
$input-height: rem(36px);
$button-height: rem(36px);
.uw-header-search{
display:inline-flex;
position:absolute;
right:0.5rem;
top:4rem;
width:98%;
width:100%;
@include medium{
position:relative;
right:inherit;
top:inherit;
width:inherit;
}
form label{
margin:0;
position:absolute;
right:6px;
right:0;
top:-3.4rem;
@include medium{
position:relative;
......@@ -23,14 +25,21 @@ $button-height: 2.25rem;
}
}
.uw-search--form{
display:inline-flex;
display:grid;
gap:0.7rem;
grid-template-columns: auto 8rem 2.125rem;
height:3.4rem;
margin:0;
padding:0;
padding:0 0 0 1rem;
position:relative;
width:100%;
@include medium{
border:1px solid $uw-white;
display:inline-flex;
gap:inherit;
grid-template-columns:inherit;
height:inherit;
padding:0;
width:inherit;
}
.option {
......@@ -45,6 +54,13 @@ $button-height: 2.25rem;
.form-item{
margin:inherit;
}
.form-type-select{
height:0;
left:-1000rem;
opacity:0;
overflow:hidden;
position: absolute;
}
.uw-input--checkboxform{
margin:inherit;
}
......@@ -60,7 +76,7 @@ $button-height: 2.25rem;
display:none;
}
font-weight:200;
height:$input-height;
height:2.375rem;
margin:0;
overflow: hidden;
padding:0;
......@@ -76,7 +92,8 @@ $button-height: 2.25rem;
height:2rem;
width:2.125rem;
}
&:hover{
&:hover,
&:focus{
background:$uw-white;
&::after {
@include svg-background(search_2);
......@@ -99,24 +116,23 @@ $button-height: 2.25rem;
}
}
.uw-search-button__wrapper{
display:none;
@include medium{
display:block;
}
}
.uw-input--search{
background: none;
border:1px solid $uw-white;
border-radius: 0;
border-width: 1px 0 1px 1px;
border-width: 0;
box-shadow: none;
color:$uw-white;
display:none;
font-family:gesso-font-family(book);
font-family:$form-select-font;
font-size:gesso-font-size(0);
font-weight:200;
height:$input-height;
......@@ -125,7 +141,6 @@ $button-height: 2.25rem;
padding:gesso-spacing(xs);
position: relative;
transition: all 0.3s ease;
width:2rem;
@include medium{
display:block;
font-size:gesso-font-size(-2);
......@@ -153,7 +168,7 @@ $button-height: 2.25rem;
}
&:focus{
background: $uw-white;
border:1px solid $uw-white;
border-width: 0;
color:$uw-black;
&::placeholder{
color:$uw-black;
......@@ -164,8 +179,8 @@ $button-height: 2.25rem;
-webkit-appearance:none;
background-color:transparent;
border-radius:0;
display:none;
font-family:gesso-font-family(book);
display:block;
font-family:$form-select-font;
font-size:gesso-font-size(0);
@include medium{
......@@ -174,20 +189,18 @@ $button-height: 2.25rem;
opacity:0;
overflow:hidden;
padding-right:0;
transition: all 0.3s ease;
width:0;
transition: opacity 0.5s ease;
width:7.5rem;
}
.form-actions{
margin:0;
padding:0;
}
.uw-search-button__wrapper{
border:1px solid $uw-white;
border-radius: 0;
border-width: 1px 1px 1px 0;
border-width: 0;
height:$input-height;
position:relative;
width: 2rem;
width:2.125rem;
&::after {
@include svg-background(search_2-white);
background-position:8px 11px;
......@@ -227,9 +240,10 @@ $button-height: 2.25rem;
&__form {
background-color: inherit;
background-image: none;
border-radius: 0;
border-style: inset;
//border-width: 1px 1px 1px 0;
border: 1px solid $uw-white;
@include medium {
border-width: 0;
}
box-shadow: none;
cursor: pointer;
display: inherit;
......@@ -243,22 +257,21 @@ $button-height: 2.25rem;
max-width: inherit;
padding:inherit;
position:absolute;
right:1px;
right:0;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: uppercase;
top:1px;
top:0;
transition: background 300ms cubic-bezier(0.4, 0, 1, 1);
vertical-align: top;
white-space: normal;
width: 2rem;
width: 2.125rem;
z-index: gesso-z-index(content);
}
}
}
.uw-input{
&.uw-input--checkboxform{
display:block;
......@@ -267,18 +280,6 @@ $button-height: 2.25rem;
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 {
......@@ -287,12 +288,18 @@ $button-height: 2.25rem;
&.form-type-textfield{
display:block;
.uw-input--search{
border:1px solid $uw-white;
display:inline-block;
width:100%;
}
}
&.form-type-select{
display:block;
height:inherit;
left:inherit;
opacity:1;
overflow:hidden;
position: relative;
.uw-select--search{
animation:fadeIn 500ms;
-webkit-appearance: none;
......@@ -312,7 +319,7 @@ $button-height: 2.25rem;
outline:none;
overflow: hidden;
padding:gesso-spacing(xs);
transition: all .5s ease;
transition: opacity .5s ease;
width:8rem;
&::placeholder {
color: $uw-black;
......@@ -330,22 +337,30 @@ $button-height: 2.25rem;
~ .form-actions{
.uw-search-button__wrapper {
border-width:1px;
animation:fadeIn 500ms;
border-width:0;
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{
@include medium{
width:14rem;
}
transition: width 0.3s ease;
width:14rem;
&:hover{
~ .button--submit{
&__form {
......@@ -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{
-webkit-appearance:none;
border-color:$uw-white;
border-radius: 0;
border-style: solid;
border-width: 1px;
border-width:0;
color:$uw-white;
display:inline-block;
height:$input-height;
......@@ -368,283 +386,23 @@ $button-height: 2.25rem;
outline:none;
padding-left: 0.5rem; // LTR
padding-right: 0;
transition: all 0.3s ease;
width:7.5rem;
&:hover,
&:focus{
background-color:$uw-white;
border-color:$uw-white;
border-radius:0;
border-width: 1px ;
border-width:0;
color:$uw-black;
}
}
.button--submit{
&__form {
border-color:gesso-grayscale(gray-6);
border-style: solid;
border-width: 1px 1px 1px 0;
border-width:0;
height:$input-height;
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;
// }
// }
// }
//}
}
}
source/_patterns/04-components/search/search--wcms-header/search--wcms-header.yml
+ 1
− 1
View file @ 49ffdf9a
......@@ -17,7 +17,7 @@ form_items:
label:
text: 'Search'
class: ''
- classes: 'uw-select--search',
- classes: 'uw-select--search'
form_item_wrapper: true
type: 'select'
name: 'search-input'
......
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