Skip to content
Snippets Groups Projects
Commit 6cf307e9 authored by Aria Givi's avatar Aria Givi
Browse files

obsolete regeln gelöscht, präfixe hinzugefügt

parent 7339eaa2
No related branches found
No related tags found
3 merge requests!1262WIP: Resolve "Spendenseite Texte anpassen",!1207WIP: Resolve "Rechtschreibfehler",!1198Meta ger redesign
Hide whitespace changes
Inline Side-by-side
resources/assets/less/metager/searchbar.less
+ 57
− 178
View file @ 6cf307e9
/* Suchleiste */ /* Suchleiste */
.searchbar { .searchbar {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
align-items: stretch; -webkit-box-align: stretch;
justify-content: center; -ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 16px; font-size: 16px;
background-color: transparent; background-color: transparent;
color: #333; color: #333;
&>* { &>* {
background-color: white; background-color: white;
} }
.search-focus-selector {
border-radius: 5px 0px 0px 5px;
display: flex;
align-items: center;
position: relative;
@media(max-width: @screen-xs-max) {
display: none;
}
&>button {
border: none;
border-right: 1px solid rgb(170, 170, 170);
background-color: white;
margin: 5px;
}
.search-settings:only-child {
padding: 5px;
border-right: solid 1px #ccc;
}
select {
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
padding: 0px 35px 0px 5px;
font-family: FontAwesome, sans-serif;
border: none;
&>option {
font-family: FontAwesome, sans-serif;
}
}
&:after {
content: "\f078";
font: 15px "FontAwesome", sans-serif;
line-height: 30px;
background-color: transparent;
right: 8px;
top: 2px;
padding: 2px 2px 2px 5px;
position: absolute;
pointer-events: none;
}
}
.search-option-frame {
display: flex;
position: absolute;
background-color: white;
top: 50px;
padding: 10px;
border: 1px solid rgb(175, 175, 175);
border-radius: 4px;
.searchbar-options-arrow {
width: 0;
height: 0;
top: -5px;
position: absolute;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid rgb(175, 175, 175);
margin-left: 3%;
}
#settings-btn {
width: 100%;
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0px;
i.fa {
padding: 0px 8px;
}
}
}
.search-button-container {
display: flex;
margin-top: 3%;
@media (max-width: @screen-xs-max) {
flex-direction: column;
}
>* {
display: flex;
justify-content: space-between;
align-items: center;
&:hover {
background-color: #e6e6e6;
}
}
}
.search-add-focus {
position: relative;
button {
background-color: white;
border: none;
padding: 0px 8px;
font-size: 16px;
&:hover {
background-color: #e6e6e6;
}
}
}
.search-edit-focus {
position: relative;
button {
background-color: transparent;
border: none;
padding: 0px 8px;
font-size: 16px;
&:hover {
background-color: #e6e6e6;
}
}
}
.search-settings {
position: relative;
a.btn {
border: none;
padding: 0px 8px;
display: block;
align-items: center;
font-size: 16px;
}
}
.search-input-submit { .search-input-submit {
flex-grow: 1; -webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
max-width: 600px; max-width: 600px;
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
...@@ -140,16 +29,18 @@ ...@@ -140,16 +29,18 @@
} }
} }
.search-input { .search-input {
flex-grow: 1; -webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
input { input {
border: none; border: none;
border-bottom: none; border-bottom: none;
height: 40px; height: 40px;
box-shadow: none; -webkit-box-shadow: none;
box-shadow: none;
&:focus { &:focus {
outline-color: rgb(255, 128, 0); outline-color: rgb(255, 128, 0);
-webkit-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1); -webkit-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
-moz-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1); box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
border-color: rgba(255, 128, 0, 1); border-color: rgba(255, 128, 0, 1);
} }
...@@ -172,22 +63,10 @@ ...@@ -172,22 +63,10 @@
display: none; display: none;
} }
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
flex-direction: column-reverse; -webkit-box-orient: vertical;
} -webkit-box-direction: reverse;
} -ms-flex-direction: column-reverse;
flex-direction: column-reverse;
label:hover+.searchbar-tooltip {
display: inline-block;
top: 30px;
left: -10px;
@media (max-width: 799px) {
display: none;
}
}
.search-option-descriptor {
@media (min-width: @screen-sm-min) {
display: none;
} }
} }
...@@ -251,41 +130,19 @@ label:hover+.searchbar-tooltip { ...@@ -251,41 +130,19 @@ label:hover+.searchbar-tooltip {
} }
} }
.searchbar-tooltip {
display: none;
position: absolute;
&>.searchbar-tooltip-arrow {
position: absolute;
top: -4px;
left: 20px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #ff8000;
}
&>.searchbar-tooltip-content {
position: relative;
&>p {
display: inline-block;
background: #ff8000;
border-radius: .25em;
font-size: 16px;
color: white;
padding: 5px 10px;
white-space: nowrap;
}
}
}
@resultpage-leftbox-max-width: @result-width; @resultpage-leftbox-max-width: @result-width;
@resultpage-leftbox-min-dist-left-right: 8px; @resultpage-leftbox-min-dist-left-right: 8px;
@resultpage-leftbox-min-dist-top-bottom: 8px; @resultpage-leftbox-min-dist-top-bottom: 8px;
@resultpage-leftbox-big-screen-margin-left: 50px; @resultpage-leftbox-big-screen-margin-left: 50px;
header { header {
padding-top: @resultpage-leftbox-min-dist-top-bottom; padding-top: @resultpage-leftbox-min-dist-top-bottom;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
flex-direction: column; -webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: fixed; position: fixed;
z-index: 100; // Makes the header larger, so it correctly covers the non scrolling parts below z-index: 100; // Makes the header larger, so it correctly covers the non scrolling parts below
width: @resultpage-leftbox-max-width + @resultpage-leftbox-big-screen-margin-left + 10; width: @resultpage-leftbox-max-width + @resultpage-leftbox-big-screen-margin-left + 10;
...@@ -297,7 +154,9 @@ header { ...@@ -297,7 +154,9 @@ header {
margin: 0px; margin: 0px;
padding: @resultpage-leftbox-min-dist-top-bottom @resultpage-leftbox-min-dist-left-right 0px @resultpage-leftbox-min-dist-left-right; padding: @resultpage-leftbox-min-dist-top-bottom @resultpage-leftbox-min-dist-left-right 0px @resultpage-leftbox-min-dist-left-right;
-webkit-box-pack: center; -webkit-box-pack: center;
align-items: center; -webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
} }
#research-bar { #research-bar {
width: 100%; width: 100%;
...@@ -306,10 +165,17 @@ header { ...@@ -306,10 +165,17 @@ header {
background-color: white; background-color: white;
border: 1px solid #ccc; border: 1px solid #ccc;
border-bottom: 2px solid rgb(255, 128, 0); border-bottom: 2px solid rgb(255, 128, 0);
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
align-items: center; -webkit-box-align: center;
justify-content: center; -ms-flex-align: center;
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24); align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
@media (max-width: 799px) { @media (max-width: 799px) {
margin: 0px @resultpage-leftbox-min-dist-left-right; margin: 0px @resultpage-leftbox-min-dist-left-right;
} }
...@@ -323,25 +189,36 @@ header:nth-child(1) { ...@@ -323,25 +189,36 @@ header:nth-child(1) {
} }
#foki { #foki {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
justify-content: left; -webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
margin-left: @resultpage-leftbox-big-screen-margin-left; margin-left: @resultpage-leftbox-big-screen-margin-left;
padding-top: 8px; padding-top: 8px;
width: @resultpage-leftbox-max-width; width: @resultpage-leftbox-max-width;
@media (max-width: 799px) { @media (max-width: 799px) {
width: 100%; width: 100%;
margin: 0px; margin: 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
justify-content: center; -webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: @resultpage-leftbox-min-dist-top-bottom @resultpage-leftbox-min-dist-left-right 0px @resultpage-leftbox-min-dist-left-right; padding: @resultpage-leftbox-min-dist-top-bottom @resultpage-leftbox-min-dist-left-right 0px @resultpage-leftbox-min-dist-left-right;
} }
#foki-box { #foki-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
width: 100%; width: 100%;
max-width: @resultpage-leftbox-max-width; max-width: @resultpage-leftbox-max-width;
background-color: white; background-color: white;
border: 1px solid #ccc; border: 1px solid #ccc;
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24); -webkit-box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
overflow-x: visible; overflow-x: visible;
padding: 10px; padding: 10px;
@media (max-width: 700px) { @media (max-width: 700px) {
...@@ -387,10 +264,12 @@ header:nth-child(1) { ...@@ -387,10 +264,12 @@ header:nth-child(1) {
pointer-events: none; pointer-events: none;
} }
&-left { &-left {
background: -webkit-gradient(linear, left top, right top, from(@scrollfade-color), color-stop(fade(@scrollfade-color, 80%)), to(fade(@scrollfade-color, 0%)));
background: linear-gradient(to right, @scrollfade-color, fade(@scrollfade-color, 80%), fade(@scrollfade-color, 0%)); background: linear-gradient(to right, @scrollfade-color, fade(@scrollfade-color, 80%), fade(@scrollfade-color, 0%));
left: 1px; left: 1px;
} }
&-right { &-right {
background: -webkit-gradient(linear, right top, left top, from(@scrollfade-color), color-stop(fade(@scrollfade-color, 80%)), to(fade(@scrollfade-color, 0%)));
background: linear-gradient(to left, @scrollfade-color, fade(@scrollfade-color, 80%), fade(@scrollfade-color, 0%)); background: linear-gradient(to left, @scrollfade-color, fade(@scrollfade-color, 80%), fade(@scrollfade-color, 0%));
right: 1px; right: 1px;
} }
......
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