Commit 9f070338 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Merge branch 'enable-scss-lint-mergeable-selector' into 'master'

Enable MergeableSelector in scss-lint

See merge request gitlab-org/gitlab-ce!12810
parents c791d9cf ac547e41
...@@ -112,7 +112,7 @@ linters: ...@@ -112,7 +112,7 @@ linters:
# Reports when you define the same selector twice in a single sheet. # Reports when you define the same selector twice in a single sheet.
MergeableSelector: MergeableSelector:
enabled: false enabled: true
# Functions, mixins, variables, and placeholders should be declared # Functions, mixins, variables, and placeholders should be declared
# with all lowercase letters and hyphens instead of underscores. # with all lowercase letters and hyphens instead of underscores.
......
...@@ -40,6 +40,10 @@ ...@@ -40,6 +40,10 @@
&.top-block { &.top-block {
border-top: none; border-top: none;
.container-fluid {
background-color: inherit;
}
} }
&.middle-block { &.middle-block {
...@@ -98,10 +102,6 @@ ...@@ -98,10 +102,6 @@
background-color: $white-light; background-color: $white-light;
border-top: none; border-top: none;
} }
&.top-block .container-fluid {
background-color: inherit;
}
} }
.sub-header-block { .sub-header-block {
......
...@@ -12,15 +12,15 @@ ...@@ -12,15 +12,15 @@
border-left: 3px solid $border-color; border-left: 3px solid $border-color;
color: $text-color; color: $text-color;
background: $gray-light; background: $gray-light;
}
.bs-callout h4 { h4 {
margin-top: 0; margin-top: 0;
margin-bottom: 5px; margin-bottom: 5px;
} }
.bs-callout p:last-child { p:last-child {
margin-bottom: 0; margin-bottom: 0;
}
} }
/* Variations */ /* Variations */
......
...@@ -53,6 +53,14 @@ hr { ...@@ -53,6 +53,14 @@ hr {
.str-truncated { .str-truncated {
@include str-truncated; @include str-truncated;
&-60 {
@include str-truncated(60%);
}
&-100 {
@include str-truncated(100%);
}
} }
.block-truncated { .block-truncated {
...@@ -78,10 +86,17 @@ hr { ...@@ -78,10 +86,17 @@ hr {
font-size: 14px; font-size: 14px;
} }
table a code { table {
position: relative; a code {
top: -2px; position: relative;
margin-right: 3px; top: -2px;
margin-right: 3px;
}
td.permission-x {
background: $table-permission-x-bg !important;
text-align: center;
}
} }
.loading { .loading {
...@@ -266,13 +281,6 @@ img.emoji { ...@@ -266,13 +281,6 @@ img.emoji {
margin-bottom: 10px; margin-bottom: 10px;
} }
table {
td.permission-x {
background: $table-permission-x-bg !important;
text-align: center;
}
}
.btn-sign-in { .btn-sign-in {
text-shadow: none; text-shadow: none;
...@@ -338,10 +346,11 @@ table { ...@@ -338,10 +346,11 @@ table {
.dropzone .dz-preview .dz-progress { .dropzone .dz-preview .dz-progress {
border-color: $border-color !important; border-color: $border-color !important;
}
.dropzone .dz-preview .dz-progress .dz-upload { .dz-upload {
background: $gl-success !important; background: $gl-success !important;
}
} }
.dz-message { .dz-message {
...@@ -402,16 +411,6 @@ table { ...@@ -402,16 +411,6 @@ table {
border-radius: $border-radius-default; border-radius: $border-radius-default;
} }
.str-truncated {
&-60 {
@include str-truncated(60%);
}
&-100 {
@include str-truncated(100%);
}
}
.tooltip { .tooltip {
.tooltip-inner { .tooltip-inner {
word-wrap: break-word; word-wrap: break-word;
......
...@@ -141,15 +141,15 @@ ...@@ -141,15 +141,15 @@
svg { svg {
fill: $gl-text-color-secondary; fill: $gl-text-color-secondary;
} }
}
.nav-item-name { .nav-item-name {
flex: 1; flex: 1;
} }
li.active { &.active {
> a { > a {
font-weight: $gl-font-weight-bold; font-weight: $gl-font-weight-bold;
}
} }
} }
......
...@@ -727,11 +727,11 @@ ...@@ -727,11 +727,11 @@
.pika-single.animate-picker.is-bound { .pika-single.animate-picker.is-bound {
@include set-visible; @include set-visible;
}
.pika-single.animate-picker.is-bound.is-hidden { &.is-hidden {
@include set-invisible; @include set-invisible;
overflow: hidden; overflow: hidden;
}
} }
@mixin dropdown-item-hover { @mixin dropdown-item-hover {
...@@ -938,9 +938,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu { ...@@ -938,9 +938,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
border-right: 0; border-right: 0;
} }
} }
}
.projects-dropdown-container {
.projects-list-frequent-container, .projects-list-frequent-container,
.projects-list-search-container, { .projects-list-search-container, {
padding: 8px 0; padding: 8px 0;
...@@ -951,11 +949,6 @@ header.header-content .dropdown-menu.projects-dropdown-menu { ...@@ -951,11 +949,6 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
.projects-list-frequent-container li.section-empty, .projects-list-frequent-container li.section-empty,
.projects-list-search-container li.section-empty { .projects-list-search-container li.section-empty {
padding: 0 15px; padding: 0 15px;
}
.section-header,
.projects-list-frequent-container li.section-empty,
.projects-list-search-container li.section-empty {
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
font-size: $gl-font-size; font-size: $gl-font-size;
} }
......
...@@ -165,22 +165,36 @@ ...@@ -165,22 +165,36 @@
&:last-child { &:last-child {
border-right: none; border-right: none;
} }
}
td.blame-commit { &.blame-commit {
padding: 5px 10px; padding: 5px 10px;
min-width: 400px; min-width: 400px;
max-width: 400px; max-width: 400px;
background: $gray-light; background: $gray-light;
border-left: 3px solid; border-left: 3px solid;
.commit-row-title {
display: flex;
}
.item-title {
flex: 1;
margin-right: 0.5em;
}
}
&.line-numbers {
float: none;
border-left: 1px solid $blame-line-numbers-border;
.commit-row-title { i {
display: flex; float: none;
margin-right: 0;
}
} }
.item-title { &.lines {
flex: 1; padding: 0;
margin-right: 0.5em;
} }
} }
...@@ -195,20 +209,6 @@ ...@@ -195,20 +209,6 @@
border-left-color: mix($blame-gray, $blame-cyan, $i / 4.0 * 100%); border-left-color: mix($blame-gray, $blame-cyan, $i / 4.0 * 100%);
} }
} }
td.line-numbers {
float: none;
border-left: 1px solid $blame-line-numbers-border;
i {
float: none;
margin-right: 0;
}
}
td.lines {
padding: 0;
}
} }
&.logs { &.logs {
......
...@@ -469,10 +469,10 @@ ...@@ -469,10 +469,10 @@
word-break: break-all; word-break: break-all;
} }
} }
}
.filter-dropdown-item.droplab-item-active .btn { &.droplab-item-active .btn {
@extend %filter-dropdown-item-btn-hover; @extend %filter-dropdown-item-btn-hover;
}
} }
.filter-dropdown-loading { .filter-dropdown-loading {
......
...@@ -352,7 +352,77 @@ ...@@ -352,7 +352,77 @@
.header-user .dropdown-menu-nav, .header-user .dropdown-menu-nav,
.header-new .dropdown-menu-nav { .header-new .dropdown-menu-nav {
margin-top: $dropdown-vertical-offset; 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-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 {
form {
background-color: rgba($indigo-200, .3);
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;
}
}
}
.location-badge {
background-color: $nav-badge-bg;
border-color: $border-color;
}
.search-input-wrap {
.clear-icon {
color: $white-light;
}
}
}
} }
.breadcrumbs { .breadcrumbs {
......
...@@ -30,10 +30,10 @@ body { ...@@ -30,10 +30,10 @@ body {
.container { .container {
padding-top: 0; padding-top: 0;
z-index: 5; z-index: 5;
}
.container .content { .content {
margin: 0; margin: 0;
}
} }
.navless-container { .navless-container {
...@@ -82,26 +82,26 @@ body { ...@@ -82,26 +82,26 @@ body {
transition: background-color 0.15s, border-color 0.15s; transition: background-color 0.15s, border-color 0.15s;
background-color: $orange-500; background-color: $orange-500;
border-color: $orange-500; border-color: $orange-500;
}
.alert-warning + .alert-warning { &:only-of-type {
background-color: $orange-600; background-color: $orange-500;
border-color: $orange-600; border-color: $orange-500;
} }
.alert-warning + .alert-warning + .alert-warning { + .alert-warning {
background-color: $orange-700; background-color: $orange-600;
border-color: $orange-700; border-color: $orange-600;
}
.alert-warning + .alert-warning + .alert-warning + .alert-warning { + .alert-warning {
background-color: $orange-800; background-color: $orange-700;
border-color: $orange-800; border-color: $orange-700;
}
.alert-warning:only-of-type { + .alert-warning {
background-color: $orange-500; background-color: $orange-800;
border-color: $orange-500; border-color: $orange-800;
}
}
}
} }
} }
......
...@@ -299,40 +299,40 @@ ul.indent-list { ...@@ -299,40 +299,40 @@ ul.indent-list {
} }
} }
.group-list-tree .avatar-container.content-loading { .group-list-tree {
position: relative; .avatar-container.content-loading {
position: relative;
> a, > a,
> a .avatar { > a .avatar {
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
} }
> a { > a {
padding: 2px; padding: 2px;
}
> a .avatar { .avatar {
border: 2px solid $white-normal; border: 2px solid $white-normal;
&.identicon { &.identicon {
line-height: 30px; line-height: 30px;
}
}
} }
}
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: transparent; background-color: transparent;
border: 2px outset $kdb-border; border: 2px outset $kdb-border;
border-radius: 50%; border-radius: 50%;
animation: spin-avatar 3s infinite linear; animation: spin-avatar 3s infinite linear;
}
} }
}
.group-list-tree {
.folder-toggle-wrap { .folder-toggle-wrap {
float: left; float: left;
line-height: $list-text-height; line-height: $list-text-height;
......
...@@ -173,21 +173,8 @@ ...@@ -173,21 +173,8 @@
ul > li { ul > li {
white-space: nowrap; white-space: nowrap;
} }
}
@media(max-width: $screen-xs-max) {
.atwho-view-ul {
width: 350px;
}
.atwho-view ul li {
overflow: hidden;
text-overflow: ellipsis;
}
}
// TODO: fallback to global style // TODO: fallback to global style
.atwho-view {
.atwho-view-ul { .atwho-view-ul {
padding: 8px 1px; padding: 8px 1px;
...@@ -220,3 +207,14 @@ ...@@ -220,3 +207,14 @@
} }
} }
} }
@media(max-width: $screen-xs-max) {
.atwho-view-ul {
width: 350px;
}
.atwho-view ul li {
overflow: hidden;
text-overflow: ellipsis;
}
}
...@@ -340,11 +340,64 @@ ...@@ -340,11 +340,64 @@
} }
} }
.project-item-select-holder.btn-group { .page-with-layout-nav {
display: flex; .right-sidebar {
max-width: 350px; top: ($header-height + 1) * 2;
overflow: hidden; }
float: right;
&.page-with-sub-nav {
.right-sidebar {
top: ($header-height + 1) * 3;
&.affix {
top: $header-height;
}
}
}
}
.with-performance-bar .page-with-layout-nav {
.right-sidebar {
top: ($header-height + 1) * 2 + $performance-bar-height;
}
&.page-with-sub-nav {
.right-sidebar {
top: ($header-height + 1) * 3 + $performance-bar-height;
&.affix {
top: $header-height + $performance-bar-height;
}
}
}
}
@media (max-width: $screen-xs-max) {
.top-area {
flex-flow: row wrap;
.nav-controls {
$controls-margin: $btn-xs-side-margin - 2px;
flex: 0 0 100%;
&.controls-flex {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
padding: 0 0 $gl-padding-top;
}
.controls-item,
.controls-item-full,
.controls-item:last-child {
flex: 1 1 35%;
display: block;
width: 100%;
margin: $controls-margin;
}
}
}
.new-project-item-link { .new-project-item-link {
white-space: nowrap; white-space: nowrap;
......
...@@ -60,22 +60,12 @@ ...@@ -60,22 +60,12 @@
border-radius: $border-radius-base; border-radius: $border-radius-base;
border: 1px solid $dropdown-border-color; border: 1px solid $dropdown-border-color;
min-width: 175px; min-width: 175px;
color: $gl-text-color; color: $gl-grayish-blue;
z-index: 999;
} }
.select2-drop-mask { .select2-results .select2-result-label,
z-index: 998; .select2-more-results {
} padding: 10px 15px;
.select2-drop.select2-drop-above.select2-drop-active {
border-top: 1px solid $dropdown-border-color;
margin-top: -6px;
}
.select2-results li.select2-result-with-children > .select2-result-label {
font-weight: $gl-font-weight-bold;
color: $gl-text-color;
} }
.select2-container-active { .select2-container-active {
...@@ -144,58 +134,46 @@ ...@@ -144,58 +134,46 @@
.select2-drop-auto-width & { .select2-drop-auto-width & {
padding: 15px 15px 5px; padding: 15px 15px 5px;
} }
}
.select2-search input { input {
padding: 2px 25px 2px 5px; padding: 2px 25px 2px 5px;
background: $white-light image-url('select2.png'); background: $white-light image-url('select2.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 0 bottom 6px; background-position: right 0 bottom 6px;
border: 1px solid $input-border; border: 1px solid $input-border;
border-radius: $border-radius-default; border-radius: $border-radius-default;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
&:focus { &:focus {
border-color: $input-border-focus; border-color: $input-border-focus;
}
&.select2-active {
background-color: $white-light;
background-image: image-url('select2-spinner.gif') !important;
background-repeat: no-repeat;
background-position: right 5px center !important;
background-size: 16px 16px !important;
}
} }
} }
.select2-search input.select2-active { .select2-results .select2-no-results,
background-color: $white-light; .select2-results .select2-searching,
background-image: image-url('select2-spinner.gif') !important; .select2-results .select2-ajax-error,
background-repeat: no-repeat; .select2-results .select2-selection-limit {
background-position: right 5px center !important; background: $gray-light;
background-size: 16px 16px !important; display: list-item;
padding: 10px 15px;
} }
.select2-results { .select2-results {
margin: 0; margin: 0;
padding: #{$gl-padding / 2} 0; padding: 10px 0;
.select2-no-results,
.select2-searching,
.select2-ajax-error,
.select2-selection-limit {
background: transparent;
padding: #{$gl-padding / 2} $gl-padding;
}
.select2-result-label,
.select2-more-results {
padding: #{$gl-padding / 2} $gl-padding;
}
.select2-highlighted { li.select2-result-with-children > .select2-result-label {
background: transparent; font-weight: $gl-font-weight-bold;
color: $gl-text-color; color: $gl-text-color;
.select2-result-label {
background: $dropdown-item-hover-bg;
}
}
.select2-result {
padding: 0 1px;
} }
} }
...@@ -212,6 +190,8 @@ ...@@ -212,6 +190,8 @@
} }
.select2-highlighted { .select2-highlighted {
background: $gl-link-color !important;
.group-result { .group-result {
.group-path { .group-path {
color: $white-light; color: $white-light;
......
...@@ -217,13 +217,31 @@ $white-gc-bg: #eaf2f5; ...@@ -217,13 +217,31 @@ $white-gc-bg: #eaf2f5;
.cp { color: $white-cp; font-weight: $gl-font-weight-bold; } .cp { color: $white-cp; font-weight: $gl-font-weight-bold; }
.c1 { color: $white-c1; font-style: italic; } .c1 { color: $white-c1; font-style: italic; }
.cs { color: $white-cs; font-weight: $gl-font-weight-bold; font-style: italic; } .cs { color: $white-cs; font-weight: $gl-font-weight-bold; font-style: italic; }
.gd { color: $white-gd; background-color: $white-gd-bg; }
.gd .x { color: $white-gd-x; background-color: $white-gd-x-bg; } .gd {
color: $white-gd;
background-color: $white-gd-bg;
.x {
color: $white-gd-x;
background-color: $white-gd-x-bg;
}
}
.ge { font-style: italic; } .ge { font-style: italic; }
.gr { color: $white-gr; } .gr { color: $white-gr; }
.gh { color: $white-gh; } .gh { color: $white-gh; }
.gi { color: $white-gi; background-color: $white-gi-bg; }
.gi .x { color: $white-gi-x; background-color: $white-gi-x-bg; } .gi {
color: $white-gi;
background-color: $white-gi-bg;
.x {
color: $white-gi-x;
background-color: $white-gi-x-bg;
}
}
.go { color: $white-go; } .go { color: $white-go; }
.gp { color: $white-gp; } .gp { color: $white-gp; }
.gs { font-weight: $gl-font-weight-bold; } .gs { font-weight: $gl-font-weight-bold; }
......
...@@ -158,13 +158,31 @@ span.highlight_word { ...@@ -158,13 +158,31 @@ span.highlight_word {
.cp { color: $highlighted-cp; font-weight: $gl-font-weight-bold; } .cp { color: $highlighted-cp; font-weight: $gl-font-weight-bold; }
.c1 { color: $highlighted-c1; font-style: italic; } .c1 { color: $highlighted-c1; font-style: italic; }
.cs { color: $highlighted-cs; font-weight: $gl-font-weight-bold; font-style: italic; } .cs { color: $highlighted-cs; font-weight: $gl-font-weight-bold; font-style: italic; }
.gd { color: $highlighted-gd; background-color: $highlighted-gd-bg; }
.gd .x { color: $highlighted-gd; background-color: $highlighted-gd-x-bg; } .gd {
color: $highlighted-gd;
background-color: $highlighted-gd-bg;
.x {
color: $highlighted-gd;
background-color: $highlighted-gd-x-bg;
}
}
.ge { font-style: italic; } .ge { font-style: italic; }
.gr { color: $highlighted-gr; } .gr { color: $highlighted-gr; }
.gh { color: $highlighted-gh; } .gh { color: $highlighted-gh; }
.gi { color: $highlighted-gi; background-color: $highlighted-gi-bg; }
.gi .x { color: $highlighted-gi; background-color: $highlighted-gi-x-bg; } .gi {
color: $highlighted-gi;
background-color: $highlighted-gi-bg;
.x {
color: $highlighted-gi;
background-color: $highlighted-gi-x-bg;
}
}
.go { color: $highlighted-go; } .go { color: $highlighted-go; }
.gp { color: $highlighted-gp; } .gp { color: $highlighted-gp; }
.gs { font-weight: $gl-font-weight-bold; } .gs { font-weight: $gl-font-weight-bold; }
......
...@@ -68,18 +68,18 @@ ...@@ -68,18 +68,18 @@
&.affix { &.affix {
top: $header-height; top: $header-height;
}
// with sidebar // with sidebar
&.affix.sidebar-expanded { &.sidebar-expanded {
right: 306px; right: 306px;
left: 16px; left: 16px;
} }
// without sidebar // without sidebar
&.affix.sidebar-collapsed { &.sidebar-collapsed {
right: 16px; right: 16px;
left: 16px; left: 16px;
}
} }
&.affix-top { &.affix-top {
......
...@@ -22,6 +22,11 @@ ...@@ -22,6 +22,11 @@
} }
} }
} }
svg {
width: 136px;
height: 136px;
}
} }
.col-headers { .col-headers {
...@@ -155,11 +160,6 @@ ...@@ -155,11 +160,6 @@
} }
} }
.landing svg {
width: 136px;
height: 136px;
}
.fa-spinner { .fa-spinner {
font-size: 28px; font-size: 28px;
position: relative; position: relative;
......
...@@ -380,6 +380,10 @@ ...@@ -380,6 +380,10 @@
} }
} }
} }
.line_content {
white-space: pre-wrap;
}
} }
.file-content .diff-file { .file-content .diff-file {
...@@ -387,10 +391,6 @@ ...@@ -387,10 +391,6 @@
border: none; border: none;
} }
.diff-file .line_content {
white-space: pre-wrap;
}
.diff-wrap-lines .line_content { .diff-wrap-lines .line_content {
white-space: pre-wrap; white-space: pre-wrap;
} }
......
...@@ -255,23 +255,6 @@ ...@@ -255,23 +255,6 @@
width: 100%; width: 100%;
padding: 0; padding: 0;
padding-bottom: 100%; padding-bottom: 100%;
}
.prometheus-svg-container > svg {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
text {
fill: $gl-text-color;
stroke-width: 0;
}
.text-metric-bold {
font-weight: $gl-font-weight-bold;
}
.label-axis-text { .label-axis-text {
fill: $black; fill: $black;
...@@ -286,42 +269,51 @@ ...@@ -286,42 +269,51 @@
font-size: 12px; font-size: 12px;
} }
.legend-axis-text { > svg {
fill: $black; position: absolute;
} height: 100%;
width: 100%;
left: 0;
top: 0;
.tick { .label-axis-text,
> line { .text-metric-usage {
stroke: $gray-darker; fill: $black;
font-weight: $gl-font-weight-normal;
font-size: 12px;
} }
> text { .legend-axis-text {
font-size: 12px; fill: $black;
} }
}
.text-metric-title { .tick > text {
font-size: 12px; font-size: 12px;
} }
.y-label-text, .text-metric-title {
.x-label-text { font-size: 12px;
fill: $gray-darkest; }
}
.axis-tick { .y-label-text,
stroke: $gray-darker; .x-label-text {
} fill: $gray-darkest;
}
@media (max-width: $screen-sm-max) { .axis-tick {
.label-axis-text, stroke: $gray-darker;
.text-metric-usage,
.legend-axis-text {
font-size: 8px;
} }
.tick > text { @media (max-width: $screen-sm-max) {
font-size: 8px; .label-axis-text,
.text-metric-usage,
.legend-axis-text {
font-size: 8px;
}
.tick > text {
font-size: 8px;
}
} }
} }
} }
...@@ -127,7 +127,16 @@ ...@@ -127,7 +127,16 @@
} }
.right-sidebar { .right-sidebar {
a:not(.btn-retry), position: absolute;
top: $header-height;
bottom: 0;
right: 0;
transition: width .3s;
background: $gray-light;
z-index: 200;
overflow: hidden;
a,
.btn-link { .btn-link {
color: inherit; color: inherit;
} }
...@@ -228,17 +237,6 @@ ...@@ -228,17 +237,6 @@
.btn-clipboard:hover { .btn-clipboard:hover {
color: $gl-text-color; color: $gl-text-color;
} }
}
.right-sidebar {
position: absolute;
top: $header-height;
bottom: 0;
right: 0;
transition: width $right-sidebar-transition-duration;
background: $gray-light;
z-index: 200;
overflow: hidden;
.issuable-sidebar { .issuable-sidebar {
width: calc(100% + 100px); width: calc(100% + 100px);
......
...@@ -109,6 +109,30 @@ ...@@ -109,6 +109,30 @@
border-top-right-radius: $border-radius-default; border-top-right-radius: $border-radius-default;
border-top-left-radius: $border-radius-default; border-top-left-radius: $border-radius-default;
// Ldap configurations may need more tabs & the tab labels are user generated (arbitrarily long).
// These styles prevent this from breaking the layout, and only applied when providers are configured.
&.custom-provider-tabs {
flex-wrap: wrap;
li {
min-width: 85px;
flex-basis: auto;
// This styles tab elements that have wrapped to a second line. We cannot easily predict when this will happen.
// We are making somewhat of an assumption about the configuration here: that users do not have more than
// 3 LDAP servers configured (in addition to standard login) and they are not using especially long names for any
// of them. If either condition is false, this will work as expected. If both are true, there may be a missing border
// above one of the bottom row elements. If you know a better way, please implement it!
&:nth-child(n+5) {
border-top: 1px solid $border-color;
}
}
a {
font-size: 16px;
}
}
li { li {
flex: 1; flex: 1;
text-align: center; text-align: center;
...@@ -154,32 +178,6 @@ ...@@ -154,32 +178,6 @@
} }
} }
// Ldap configurations may need more tabs & the tab labels are user generated (arbitrarily long).
// These styles prevent this from breaking the layout, and only applied when providers are configured.
.new-session-tabs.custom-provider-tabs {
flex-wrap: wrap;
li {
min-width: 85px;
flex-basis: auto;
// This styles tab elements that have wrapped to a second line. We cannot easily predict when this will happen.
// We are making somewhat of an assumption about the configuration here: that users do not have more than
// 3 LDAP servers configured (in addition to standard login) and they are not using especially long names for any
// of them. If either condition is false, this will work as expected. If both are true, there may be a missing border
// above one of the bottom row elements. If you know a better way, please implement it!
&:nth-child(n+5) {
border-top: 1px solid $border-color;
}
}
a {
font-size: 16px;
}
}
.form-control { .form-control {
&:active, &:active,
&:focus { &:focus {
...@@ -231,35 +229,35 @@ ...@@ -231,35 +229,35 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
}
// Fixes footer container to bottom of viewport // Fixes footer container to bottom of viewport
.devise-layout-html body { body {
// offset height of fixed header + 1 to avoid scroll // offset height of fixed header + 1 to avoid scroll
height: calc(100% - 51px); height: calc(100% - 51px);
margin: 0; margin: 0;
padding: 0; padding: 0;
.page-wrap { .page-wrap {
min-height: 100%; min-height: 100%;
position: relative; position: relative;
} }
.footer-container, .footer-container,
hr.footer-fixed { hr.footer-fixed {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 40px; height: 40px;
background: $white-light; background: $white-light;
} }
.navless-container { .navless-container {
padding: 65px 15px; // height of footer + bottom padding of email confirmation link padding: 65px 15px; // height of footer + bottom padding of email confirmation link
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
padding: 0 15px 65px; padding: 0 15px 65px;
}
} }
} }
} }
...@@ -49,9 +49,17 @@ ...@@ -49,9 +49,17 @@
width: auto; width: auto;
} }
} }
&.existing-title {
@media (min-width: $screen-sm-min) {
float: left;
}
}
} }
.member-form-control { .member-form-control {
@include new-style-dropdown;
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
padding-bottom: 5px; padding-bottom: 5px;
margin-left: 0; margin-left: 0;
...@@ -64,12 +72,6 @@ ...@@ -64,12 +72,6 @@
line-height: 43px; line-height: 43px;
} }
.member.existing-title {
@media (min-width: $screen-sm-min) {
float: left;
}
}
.member-search-form { .member-search-form {
@include new-style-dropdown; @include new-style-dropdown;
...@@ -281,7 +283,3 @@ ...@@ -281,7 +283,3 @@
} }
} }
} }
.member-form-control {
@include new-style-dropdown;
}
...@@ -156,6 +156,10 @@ ...@@ -156,6 +156,10 @@
&.media > *:first-child { &.media > *:first-child {
margin-right: 10px; margin-right: 10px;
} }
.approve-btn {
margin-right: 5px;
}
} }
.mr-widget-pipeline-graph { .mr-widget-pipeline-graph {
...@@ -191,6 +195,10 @@ ...@@ -191,6 +195,10 @@
overflow: hidden; overflow: hidden;
word-break: break-all; word-break: break-all;
&.media > *:first-child {
margin-right: 10px;
}
&.label-truncated { &.label-truncated {
position: relative; position: relative;
display: inline-block; display: inline-block;
...@@ -208,14 +216,7 @@ ...@@ -208,14 +216,7 @@
background-color: $gray-light; background-color: $gray-light;
} }
} }
}
.mr-widget-help {
padding: 10px 16px 10px 48px;
font-style: italic;
}
.mr-widget-body {
h4 { h4 {
float: left; float: left;
font-weight: $gl-font-weight-bold; font-weight: $gl-font-weight-bold;
...@@ -238,6 +239,10 @@ ...@@ -238,6 +239,10 @@
margin-right: 7px; margin-right: 7px;
} }
.approve-btn {
margin-right: 5px;
}
label { label {
font-weight: $gl-font-weight-normal; font-weight: $gl-font-weight-normal;
} }
...@@ -337,6 +342,22 @@ ...@@ -337,6 +342,22 @@
} }
} }
.mini-pipeline-graph-dropdown-menu .mini-pipeline-graph-dropdown-item {
display: flex;
align-items: center;
.ci-status-text,
.ci-status-icon {
top: 0;
margin-right: 10px;
}
}
.mr-widget-help {
padding: 10px 16px 10px 48px;
font-style: italic;
}
.ci-coverage { .ci-coverage {
float: right; float: right;
} }
...@@ -351,12 +372,6 @@ ...@@ -351,12 +372,6 @@
} }
} }
.mr-state-widget .mr-widget-body {
.approve-btn {
margin-right: 5px;
}
}
.mr-widget-body-controls { .mr-widget-body-controls {
flex-wrap: wrap; flex-wrap: wrap;
} }
...@@ -470,16 +485,16 @@ ...@@ -470,16 +485,16 @@
padding-bottom: 0; padding-bottom: 0;
} }
} }
}
.mr-info-list.mr-memory-usage { &.mr-memory-usage {
p { p {
float: left; float: left;
} }
.memory-graph-container { .memory-graph-container {
float: left; float: left;
margin-left: 5px; margin-left: 5px;
}
} }
} }
......
...@@ -66,6 +66,15 @@ ...@@ -66,6 +66,15 @@
height: 6px; height: 6px;
margin: 0; margin: 0;
} }
.sidebar-collapsed-icon {
clear: both;
padding: 15px 5px 5px;
.progress {
margin: 5px 0;
}
}
} }
.collapsed-milestone-date { .collapsed-milestone-date {
...@@ -93,17 +102,6 @@ ...@@ -93,17 +102,6 @@
margin-right: 0; margin-right: 0;
} }
.milestone-progress {
.sidebar-collapsed-icon {
clear: both;
padding: 15px 5px 5px;
.progress {
margin: 5px 0;
}
}
}
.right-sidebar-collapsed & { .right-sidebar-collapsed & {
.reference { .reference {
border-top: 1px solid $border-gray-normal; border-top: 1px solid $border-gray-normal;
...@@ -156,18 +154,16 @@ ...@@ -156,18 +154,16 @@
.status-box { .status-box {
margin-top: 0; margin-top: 0;
}
.milestone-buttons {
margin-left: auto;
}
.status-box {
order: 1; order: 1;
} }
.milestone-buttons { .milestone-buttons {
margin-left: auto;
order: 2; order: 2;
.verbose {
display: none;
}
} }
.header-text-content { .header-text-content {
...@@ -175,10 +171,6 @@ ...@@ -175,10 +171,6 @@
width: 100%; width: 100%;
} }
.milestone-buttons .verbose {
display: none;
}
@media (min-width: $screen-xs-min) { @media (min-width: $screen-xs-min) {
.milestone-buttons .verbose { .milestone-buttons .verbose {
display: inline; display: inline;
......
...@@ -111,24 +111,9 @@ ...@@ -111,24 +111,9 @@
margin: auto; margin: auto;
align-items: center; align-items: center;
.icon { + .md-area {
margin-right: $issuable-warning-icon-margin; border-top-left-radius: 0;
} border-top-right-radius: 0;
}
.disabled-comment .issuable-note-warning {
border: none;
border-radius: $label-border-radius;
padding-top: $gl-vert-padding;
padding-bottom: $gl-vert-padding;
.icon svg {
position: relative;
top: 2px;
margin-right: $btn-xs-side-margin;
width: $gl-font-size;
height: $gl-font-size;
fill: $orange-600;
} }
} }
...@@ -155,11 +140,6 @@ ...@@ -155,11 +140,6 @@
} }
} }
.issuable-note-warning + .md-area {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.discussion-form { .discussion-form {
background-color: $white-light; background-color: $white-light;
} }
......
...@@ -312,57 +312,72 @@ ul.notes { ...@@ -312,57 +312,72 @@ ul.notes {
} }
} }
.diff-file .notes_holder { .diff-file {
font-family: $regular_font; .is-over {
.add-diff-note {
display: inline-block;
}
}
td { // Merge request notes in diffs
border: 1px solid $white-normal; // Diff is inline
border-left: none; .notes_content .note-header .note-headline-light {
display: inline-block;
position: relative;
}
&.notes_line { .notes_holder {
vertical-align: middle; font-family: $regular_font;
text-align: center;
padding: 10px 0;
background: $gray-light;
color: $text-color;
}
&.notes_line2 { td {
text-align: center; border: 1px solid $white-normal;
padding: 10px 0; border-left: none;
border-left: 1px solid $note-line2-border !important;
}
&.notes_content { &.notes_line {
background-color: $gray-light; vertical-align: middle;
border-width: 1px 0; text-align: center;
padding: 0; padding: 10px 0;
vertical-align: top; background: $gray-light;
white-space: normal; color: $text-color;
}
&.parallel { &.notes_line2 {
border-width: 1px; text-align: center;
padding: 10px 0;
border-left: 1px solid $note-line2-border !important;
} }
.discussion-notes { &.notes_content {
&:not(:first-child) { background-color: $gray-light;
border-top: 1px solid $white-normal; border-width: 1px 0;
margin-top: 20px; padding: 0;
vertical-align: top;
white-space: normal;
&.parallel {
border-width: 1px;
} }
&:not(:last-child) { .discussion-notes {
border-bottom: 1px solid $white-normal; &:not(:first-child) {
margin-bottom: 20px; border-top: 1px solid $white-normal;
margin-top: 20px;
}
&:not(:last-child) {
border-bottom: 1px solid $white-normal;
margin-bottom: 20px;
}
} }
}
.notes { .notes {
background-color: $white-light; background-color: $white-light;
} }
a code { a code {
top: 0; top: 0;
margin-right: 0; margin-right: 0;
}
} }
} }
} }
...@@ -457,8 +472,9 @@ ul.notes { ...@@ -457,8 +472,9 @@ ul.notes {
margin-left: 10px; margin-left: 10px;
color: $gray-darkest; color: $gray-darkest;
.btn-group > .discussion-next-btn { @include notes-media('max', $screen-md-max) {
margin-left: -1px; float: none;
margin-left: 0;
} }
} }
...@@ -502,13 +518,6 @@ ul.notes { ...@@ -502,13 +518,6 @@ ul.notes {
min-width: 180px; min-width: 180px;
} }
.discussion-actions {
@include notes-media('max', $screen-md-max) {
float: none;
margin-left: 0;
}
}
.note-actions-item { .note-actions-item {
margin-left: 12px; margin-left: 12px;
display: flex; display: flex;
...@@ -665,14 +674,6 @@ ul.notes { ...@@ -665,14 +674,6 @@ ul.notes {
} }
} }
.diff-file {
.is-over {
.add-diff-note {
display: inline-block;
}
}
}
.disabled-comment { .disabled-comment {
background-color: $gray-light; background-color: $gray-light;
border-radius: $border-radius-base; border-radius: $border-radius-base;
...@@ -714,20 +715,20 @@ ul.notes { ...@@ -714,20 +715,20 @@ ul.notes {
svg path { svg path {
fill: $gray-darkest; fill: $gray-darkest;
} }
}
.btn.discussion-create-issue-btn { &.discussion-create-issue-btn {
margin-left: -4px; margin-left: -4px;
border-radius: 0; border-radius: 0;
border-right: 0; border-right: 0;
a { a {
padding: 0; padding: 0;
line-height: 0; line-height: 0;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
border: 0; border: 0;
}
} }
} }
} }
...@@ -801,12 +802,3 @@ ul.notes { ...@@ -801,12 +802,3 @@ ul.notes {
.line-resolve-text { .line-resolve-text {
vertical-align: middle; vertical-align: middle;
} }
// Merge request notes in diffs
.diff-file {
// Diff is inline
.notes_content .note-header .note-headline-light {
display: inline-block;
position: relative;
}
}
...@@ -175,6 +175,25 @@ ...@@ -175,6 +175,25 @@
} }
} }
/**
* Play button with icon in dropdowns
*/
.no-btn {
border: none;
background: none;
outline: none;
width: 100%;
text-align: left;
.icon-play {
position: relative;
top: 2px;
margin-right: 5px;
height: 13px;
width: 12px;
}
}
.duration, .duration,
.finished-at { .finished-at {
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
...@@ -450,48 +469,48 @@ ...@@ -450,48 +469,48 @@
@extend .build-content:hover; @extend .build-content:hover;
} }
// Action Icons in big pipeline-graph nodes .ci-action-icon-container {
.ci-action-icon-container.ci-action-icon-wrapper { position: absolute;
height: 30px; right: 5px;
width: 30px; top: 5px;
background: $white-light;
border: 1px solid $border-color;
border-radius: 100%;
display: block;
&:hover { // Action Icons in big pipeline-graph nodes
background-color: $stage-hover-bg; &.ci-action-icon-wrapper {
border: 1px solid $dropdown-toggle-active-border-color; height: 30px;
} width: 30px;
background: $white-light;
border: 1px solid $border-color;
border-radius: 100%;
display: block;
svg { &:hover {
fill: $gl-text-color-secondary; background-color: $stage-hover-bg;
position: relative; border: 1px solid $dropdown-toggle-active-border-color;
left: 5px;
top: 2px; svg {
width: 18px; fill: $gl-text-color;
height: 18px; }
} }
&.play {
svg { svg {
width: #{$ci-action-icon-size - 8}; fill: $gl-text-color-secondary;
height: #{$ci-action-icon-size - 8}; position: relative;
left: 8px; left: 5px;
top: 2px;
width: 18px;
height: 18px;
} }
}
&:hover svg { &.play {
fill: $gl-text-color; svg {
width: #{$ci-action-icon-size - 8};
height: #{$ci-action-icon-size - 8};
left: 8px;
}
}
} }
} }
.ci-action-icon-container {
position: absolute;
right: 5px;
top: 5px;
}
.ci-status-icon svg { .ci-status-icon svg {
height: 20px; height: 20px;
width: 20px; width: 20px;
...@@ -735,6 +754,28 @@ button.mini-pipeline-graph-dropdown-toggle { ...@@ -735,6 +754,28 @@ button.mini-pipeline-graph-dropdown-toggle {
left: -3px; left: -3px;
position: relative; position: relative;
top: -2px; top: -2px;
&.icon-action-stop,
&.icon-action-cancel {
width: 12px;
height: 12px;
top: 1px;
left: -1px;
}
&.icon-action-play {
width: 11px;
height: 11px;
top: 1px;
left: 1px;
}
&.icon-action-retry {
width: 16px;
height: 16px;
top: 0;
left: -3px;
}
} }
&:hover svg, &:hover svg,
...@@ -751,27 +792,6 @@ button.mini-pipeline-graph-dropdown-toggle { ...@@ -751,27 +792,6 @@ button.mini-pipeline-graph-dropdown-toggle {
} }
} }
svg.icon-action-stop,
svg.icon-action-cancel {
width: 12px;
height: 12px;
top: 1px;
left: -1px;
}
svg.icon-action-play {
width: 11px;
height: 11px;
top: 1px;
left: 1px;
}
svg.icon-action-retry {
width: 16px;
height: 16px;
top: 0;
left: -3px;
}
} }
...@@ -840,13 +860,10 @@ button.mini-pipeline-graph-dropdown-toggle { ...@@ -840,13 +860,10 @@ button.mini-pipeline-graph-dropdown-toggle {
left: 100%; left: 100%;
top: -10px; top: -10px;
box-shadow: 0 1px 5px $black-transparent; box-shadow: 0 1px 5px $black-transparent;
}
/**
* Top arrow in the dropdown in the big pipeline graph
*/
.big-pipeline-graph-dropdown-menu {
/**
* Top arrow in the dropdown in the big pipeline graph
*/
&::before, &::before,
&::after { &::after {
content: ''; content: '';
...@@ -908,22 +925,23 @@ button.mini-pipeline-graph-dropdown-toggle { ...@@ -908,22 +925,23 @@ button.mini-pipeline-graph-dropdown-toggle {
margin-top: 1px; margin-top: 1px;
border-bottom-color: $white-light; border-bottom-color: $white-light;
} }
}
/** /**
* Center dropdown menu in mini graph * Center dropdown menu in mini graph
*/ */
.mini-pipeline-graph-dropdown-menu.dropdown-menu { &.dropdown-menu {
transform: translate(-80%, 0); transform: translate(-80%, 0);
min-width: 150px; min-width: 150px;
@media(min-width: $screen-md-min) { @media(min-width: $screen-md-min) {
transform: translate(-50%, 0); transform: translate(-50%, 0);
right: auto; right: auto;
left: 50%; left: 50%;
min-width: 240px; min-width: 240px;
}
} }
} }
/** /**
* Terminal * Terminal
*/ */
...@@ -947,25 +965,6 @@ button.mini-pipeline-graph-dropdown-toggle { ...@@ -947,25 +965,6 @@ button.mini-pipeline-graph-dropdown-toggle {
} }
} }
/**
* Play button with icon in dropdowns
*/
.ci-table .no-btn {
border: none;
background: none;
outline: none;
width: 100%;
text-align: left;
.icon-play {
position: relative;
top: 2px;
margin-right: 5px;
height: 13px;
width: 12px;
}
}
.ci-header-container { .ci-header-container {
min-height: 55px; min-height: 55px;
......
...@@ -88,7 +88,8 @@ ...@@ -88,7 +88,8 @@
transition: background 2s ease-out; transition: background 2s ease-out;
&:disabled { &:disabled {
opacity: 0.75; opacity: 0.5;
pointer-events: none;
} }
.highlight-changes & { .highlight-changes & {
...@@ -778,35 +779,35 @@ a.deploy-project-label { ...@@ -778,35 +779,35 @@ a.deploy-project-label {
.nav { .nav {
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
}
.nav > li { > li {
display: inline-block; display: inline-block;
&:not(:last-child) { &:not(:last-child) {
margin-right: $gl-padding; margin-right: $gl-padding;
} }
&.right { &.right {
vertical-align: top; vertical-align: top;
margin-top: 0; margin-top: 0;
@media (min-width: $screen-lg-min) { @media (min-width: $screen-lg-min) {
float: right; float: right;
}
} }
}
}
.nav > li > a { > a {
padding: 0; padding: 0;
background-color: transparent; background-color: transparent;
font-size: 14px; font-size: 14px;
line-height: 29px; line-height: 29px;
color: $notes-light-color; color: $notes-light-color;
&:hover, &:hover,
&:focus { &:focus {
color: $gl-text-color; color: $gl-text-color;
}
}
} }
} }
...@@ -1160,13 +1161,6 @@ pre.light-well { ...@@ -1160,13 +1161,6 @@ pre.light-well {
} }
} }
.project-repo-select {
&.disabled {
opacity: 0.5;
pointer-events: none;
}
}
.variables-table { .variables-table {
table-layout: fixed; table-layout: fixed;
......
...@@ -78,6 +78,10 @@ input[type="checkbox"]:hover { ...@@ -78,6 +78,10 @@ input[type="checkbox"]:hover {
} }
.search-input-wrap { .search-input-wrap {
// Fallback if flexbox is not supported
display: inline-block;
width: 100%;
.search-icon, .search-icon,
.clear-icon { .clear-icon {
position: absolute; position: absolute;
......
...@@ -241,11 +241,11 @@ ...@@ -241,11 +241,11 @@
margin-left: 5px; margin-left: 5px;
background: $badge-bg; background: $badge-bg;
} }
}
/* Ensure we don't add border if there's only single li */ /* Ensure we don't add border if there's only single li */
li + li { + li {
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
}
} }
} }
} }
...@@ -5,10 +5,10 @@ table .sherlock-code { ...@@ -5,10 +5,10 @@ table .sherlock-code {
.sherlock-code { .sherlock-code {
pre { pre {
word-wrap: normal; word-wrap: normal;
}
pre code { code {
white-space: pre; white-space: pre;
}
} }
} }
...@@ -21,13 +21,13 @@ table .sherlock-code { ...@@ -21,13 +21,13 @@ table .sherlock-code {
text-align: right; text-align: right;
padding: 0 10px !important; padding: 0 10px !important;
} }
.slow {
color: $red-500;
font-weight: $gl-font-weight-bold;
}
} }
.sherlock-file-sample pre { .sherlock-file-sample pre {
padding-top: 28px !important; padding-top: 28px !important;
} }
.sherlock-line-samples-table .slow {
color: $red-500;
font-weight: $gl-font-weight-bold;
}
...@@ -40,16 +40,16 @@ ...@@ -40,16 +40,16 @@
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
width: 100%; width: 100%;
} }
}
.person .spark { .spark {
display: block; display: block;
background: $stat-graph-common-bg; background: $stat-graph-common-bg;
width: 100%; width: 100%;
} }
.person .area-contributor { .area-contributor {
fill: $stat-graph-orange-fill; fill: $stat-graph-orange-fill;
}
} }
} }
......
...@@ -161,10 +161,10 @@ ul.wiki-pages-list.content-list { ...@@ -161,10 +161,10 @@ ul.wiki-pages-list.content-list {
list-style: none; list-style: none;
margin-left: 0; margin-left: 0;
padding-left: 15px; padding-left: 15px;
}
ul li { li {
padding: 5px 0; padding: 5px 0;
}
} }
} }
......
---
title: Enable MergeableSelector in scss-lint
merge_request: 12810
author: Takuya Noguchi
Markdown is supported
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