Combine all search releated CSS
This commit is contained in:
Annabel Dunstone Gray
parent
2414d94118
commit
739422c9b4
2 changed files with 47 additions and 110 deletions
|
|
@ -295,75 +295,6 @@ header.navbar-gitlab-new {
|
|||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 4px 8px 0;
|
||||
|
||||
form {
|
||||
height: 32px;
|
||||
border: 0;
|
||||
border-radius: $border-radius-default;
|
||||
transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.15s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.search-active form {
|
||||
box-shadow: none;
|
||||
|
||||
.search-input {
|
||||
color: $gl-text-color;
|
||||
transition: color ease-in-out 0.15s;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: $gl-text-color-tertiary;
|
||||
}
|
||||
|
||||
.search-input-wrap {
|
||||
.search-icon,
|
||||
.clear-icon {
|
||||
color: $gl-text-color-tertiary;
|
||||
transition: color ease-in-out 0.15s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
color: $white-light;
|
||||
background: none;
|
||||
transition: color ease-in-out 0.15s;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
transition: color ease-in-out 0.15s;
|
||||
}
|
||||
|
||||
.location-badge {
|
||||
font-size: 12px;
|
||||
margin: -4px 4px -4px -4px;
|
||||
line-height: 25px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 2px 0 0 2px;
|
||||
height: 32px;
|
||||
transition: border-color ease-in-out 0.15s;
|
||||
}
|
||||
|
||||
&.search-active {
|
||||
.location-badge {
|
||||
background-color: $nav-badge-bg;
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
.search-input-wrap {
|
||||
.clear-icon {
|
||||
color: $white-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
min-height: 48px;
|
||||
|
|
@ -375,6 +306,8 @@ header.navbar-gitlab-new {
|
|||
display: flex;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding-top: $gl-padding;
|
||||
padding-bottom: $gl-padding;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
|
@ -386,11 +319,6 @@ header.navbar-gitlab-new {
|
|||
align-self: center;
|
||||
color: $gl-text-color-secondary;
|
||||
|
||||
@media (max-width: $screen-xs-max) {
|
||||
padding-left: 17px;
|
||||
border-left: 1px solid $gl-text-color-quaternary;
|
||||
}
|
||||
|
||||
.avatar-tile {
|
||||
margin-right: 4px;
|
||||
border: 1px solid $border-color;
|
||||
|
|
|
|||
|
|
@ -28,9 +28,7 @@ input[type="checkbox"]:hover {
|
|||
}
|
||||
|
||||
.search {
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
margin-top: ($header-height - 35) / 2;
|
||||
margin: 4px 8px 0;
|
||||
|
||||
form {
|
||||
@extend .form-control;
|
||||
|
|
@ -38,15 +36,24 @@ input[type="checkbox"]:hover {
|
|||
padding: 4px;
|
||||
width: $search-input-width;
|
||||
line-height: 24px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
border-radius: $border-radius-default;
|
||||
transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.15s;
|
||||
|
||||
&:hover {
|
||||
border-color: lighten($dropdown-input-focus-border, 20%);
|
||||
box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.location-text {
|
||||
font-style: normal;
|
||||
.location-badge {
|
||||
font-size: 12px;
|
||||
margin: -4px 4px -4px -4px;
|
||||
line-height: 25px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 2px 0 0 2px;
|
||||
height: 32px;
|
||||
transition: border-color ease-in-out 0.15s;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
|
|
@ -56,41 +63,26 @@ input[type="checkbox"]:hover {
|
|||
margin-left: 5px;
|
||||
line-height: 25px;
|
||||
width: 98%;
|
||||
color: $white-light;
|
||||
background: none;
|
||||
transition: color ease-in-out 0.15s;
|
||||
}
|
||||
|
||||
.location-badge {
|
||||
line-height: 25px;
|
||||
padding: 0 5px;
|
||||
border-radius: $border-radius-default;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
color: $note-disabled-comment-color;
|
||||
display: inline-block;
|
||||
background-color: $gray-normal;
|
||||
vertical-align: top;
|
||||
cursor: default;
|
||||
.search-input::placeholder {
|
||||
transition: color ease-in-out 0.15s;
|
||||
}
|
||||
|
||||
.search-input-container {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-input-wrap {
|
||||
// Fallback if flexbox is not supported
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.search-input-wrap {
|
||||
width: 100%;
|
||||
|
||||
.search-icon,
|
||||
.clear-icon {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 0;
|
||||
color: $location-icon-color;
|
||||
|
||||
&::before {
|
||||
font-family: FontAwesome;
|
||||
|
|
@ -148,19 +140,30 @@ input[type="checkbox"]:hover {
|
|||
form {
|
||||
@extend .form-control:focus;
|
||||
border-color: $dropdown-input-focus-border;
|
||||
box-shadow: 0 0 4px $search-input-focus-shadow-color;
|
||||
box-shadow: none;
|
||||
|
||||
.search-input-wrap {
|
||||
.search-icon,
|
||||
.clear-icon {
|
||||
color: $gl-text-color-tertiary;
|
||||
transition: color ease-in-out 0.15s;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
color: $gl-text-color;
|
||||
transition: color ease-in-out 0.15s;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: $gl-text-color-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
.location-badge {
|
||||
transition: all 0.15s;
|
||||
background-color: $location-badge-active-bg;
|
||||
color: $white-light;
|
||||
}
|
||||
|
||||
.search-input-wrap {
|
||||
i {
|
||||
color: $layout-link-gray;
|
||||
}
|
||||
background-color: $nav-badge-bg;
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
|
|
@ -187,6 +190,12 @@ input[type="checkbox"]:hover {
|
|||
width: 68%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.search-holder {
|
||||
|
|
|
|||
Loading…
Reference in a new issue