diff --git a/asset/scss/components/_forms.scss b/asset/scss/components/_forms.scss index a510910..6db0b1b 100644 --- a/asset/scss/components/_forms.scss +++ b/asset/scss/components/_forms.scss @@ -1,66 +1,67 @@ -.search{ - .input-group * { - margin: 0; - } - .input-group { - position: relative; - border-radius: 4rem; - overflow: hidden; - padding: 0; - margin: 0; - } - .input-group .appear { - right: 0; - position: absolute; - height: 100%; - padding: 0.3rem 1rem; - } - .button{ - border-color: $primary-color; - } - .appear{ - display:none; - } - input{ - &:active{ - border-color: $primary-color; - background-color: $input-background-focus; +.hero{ + .search{ + .input-group * { + margin: 0; } - &:focus,&:focus-within{ - border-color: $primary-color; - background-color: $input-background; - } - &:not(:placeholder-shown) { - border:none; - background-color: $input-background-focus; + .input-group { position: relative; - right: 2rem; - + .appear { - display: block; - color: $primary-color; + border-radius: 4rem; + overflow: hidden; + padding: 0; + margin: 0; + } + .input-group .appear { + right: 0; + position: absolute; + height: 100%; + padding: 0.3rem 1rem; + } + .button{ + border-color: $primary-color; + } + .appear{ + display:none; + } + input{ + &:active{ + border-color: $primary-color; background-color: $input-background-focus; - z-index: 2; - &:hover { - color: $white; - background-color: $primary-color; - } + } + &:focus,&:focus-within{ + border-color: $primary-color; + background-color: $input-background; + } + &:not(:placeholder-shown) { + border:none; + background-color: $input-background-focus; + position: relative; + right: 2rem; + + .appear { + display: block; + background-color: scale-color($input-background-focus, $lightness: -20%); + z-index: 2; + &:hover { + color: $white; + background-color: $primary-color; + } + } + } + } + .hollow { + border-color: $primary-color; + color: $primary-color; + &::after { + } + &::placeholder { + color: scale-color($primary-color, $lightness: -20%); + } + &:hover { + background-color: scale-color($primary-color, $lightness: 95%); + } + &:active { + background-color: scale-color($primary-color, $lightness: 85%); } } } - .hollow { - border-color: $primary-color; - color: $primary-color; - &::after { - } - &::placeholder { - color: scale-color($primary-color, $lightness: -20%); - } - &:hover { - background-color: scale-color($primary-color, $lightness: 95%); - } - &:active { - background-color: scale-color($primary-color, $lightness: 85%); - } - } } diff --git a/asset/scss/global/_omeka.scss b/asset/scss/global/_omeka.scss index beff39b..aa80c35 100644 --- a/asset/scss/global/_omeka.scss +++ b/asset/scss/global/_omeka.scss @@ -323,7 +323,7 @@ body.vertical-menu header .desktop { .browse-control-mobile { display: none; - + @include breakpoint(small down) { display: inline-block; // float: right; @@ -376,16 +376,16 @@ body.vertical-menu header .desktop { @include breakpoint(small down) { // margin: 0; display: none; - + &.open { display: flex; align-items: stretch; } - + &.closed { display: none; } - + // .sorting, // .omeka-pagination, // .advanced-search { @@ -554,8 +554,18 @@ body.vertical-menu header .desktop { margin-bottom: 0; } -.sorting button { - // margin-bottom: 0; +.sorting { + display: flex; + button,.button { + padding: 0 $global-padding*1.4; + font-size: $global-font-size * 0.85; + margin: 0 $global-margin; + } + select { + // width: 100%; + // height: 100%; + margin-bottom: 0; + } } .layout-toggle button {