summaryrefslogtreecommitdiff
path: root/app/assets/stylesheets/framework
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/stylesheets/framework')
-rw-r--r--app/assets/stylesheets/framework/buttons.scss29
-rw-r--r--app/assets/stylesheets/framework/dropdowns.scss4
-rw-r--r--app/assets/stylesheets/framework/files.scss6
-rw-r--r--app/assets/stylesheets/framework/gitlab-theme.scss6
-rw-r--r--app/assets/stylesheets/framework/header.scss9
-rw-r--r--app/assets/stylesheets/framework/markdown_area.scss1
-rw-r--r--app/assets/stylesheets/framework/nav.scss6
-rw-r--r--app/assets/stylesheets/framework/sidebar.scss123
-rw-r--r--app/assets/stylesheets/framework/timeline.scss4
-rw-r--r--app/assets/stylesheets/framework/tw_bootstrap.scss1
-rw-r--r--app/assets/stylesheets/framework/variables.scss49
11 files changed, 127 insertions, 111 deletions
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 657c5f033c7..e8c0172680d 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -7,6 +7,7 @@
&:focus,
&:active {
outline: none;
+ background-color: $btn-active-gray;
@include box-shadow($gl-btn-active-background);
}
}
@@ -27,7 +28,8 @@
color: $color;
}
- &:active {
+ &:active,
+ &.active {
@include box-shadow ($gl-btn-active-background);
background-color: $dark;
@@ -61,7 +63,7 @@
}
@mixin btn-white {
- @include btn-color($white-light, $border-white-light, $white-normal, $border-white-normal, $white-dark, $border-white-dark, #313236);
+ @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $btn-white-active);
}
.btn {
@@ -218,3 +220,26 @@
margin-right: 5px;
}
}
+
+.btn-text-field {
+ width: 100%;
+ text-align: left;
+ padding: 6px 16px;
+ border-color: $border-color;
+ color: $btn-placeholder-gray;
+ background-color: $background-color;
+
+ &:hover,
+ &:active,
+ &:focus {
+ cursor: text;
+ box-shadow: none;
+ border-color: $border-color;
+ color: $btn-placeholder-gray;
+ background-color: $background-color;
+ }
+}
+
+.btn-file-option {
+ background: linear-gradient(180deg, $white-light 25%, $gray-light 100%);
+}
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 82dc1acbd01..ba6c7930cdc 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -248,7 +248,7 @@
.dropdown-title {
position: relative;
- padding: 0 0 15px;
+ padding: 0 25px 15px;
margin: 0 10px 10px;
font-weight: 600;
line-height: 1;
@@ -275,7 +275,7 @@
}
.dropdown-menu-close {
- right: 7px;
+ right: 5px;
width: 20px;
height: 20px;
top: -1px;
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index a26ace5cc19..789df42fb66 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -15,11 +15,13 @@
.file-title {
position: relative;
- background: $background-color;
+ background-color: $background-color;
border-bottom: 1px solid $border-color;
margin: 0;
text-align: left;
padding: 10px $gl-padding;
+ word-wrap: break-word;
+ border-radius: 3px 3px 0 0;
.file-actions {
float: right;
@@ -48,7 +50,7 @@
}
}
- a {
+ a:not(.btn) {
color: $gl-dark-link-color;
}
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index fa9038ebaca..c83cf881596 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -33,15 +33,10 @@
background: $color;
}
- .complex-sidebar .nav-primary {
- border-right: 1px solid lighten($color, 3%);
- }
-
.sidebar-wrapper {
background: $color-darker;
.sidebar-user {
- border-top: 1px solid lighten($color, 3%);
background: $color-darker;
color: $color-light;
@@ -67,6 +62,7 @@
.count {
color: $color-light;
+ background: $color-dark;
}
}
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 724980b2208..3f015427d07 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -69,6 +69,7 @@ header {
}
.header-content {
+ position: relative;
height: $header-height;
padding-right: 20px;
@@ -76,6 +77,10 @@ header {
padding-right: 0;
}
+ .dropdown-menu {
+ margin-top: -5px;
+ }
+
.title {
margin: 0;
font-size: 19px;
@@ -123,11 +128,11 @@ header {
}
@mixin collapsed-header {
- margin-left: 40px;
+ margin-left: $sidebar_collapsed_width;
}
.header-collapsed {
- margin-left: 40px;
+ margin-left: $sidebar_collapsed_width;
@media (min-width: $screen-md-min) {
@include collapsed-header;
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index ea8e1c902cb..c8f86d60e3b 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -84,6 +84,7 @@
.md-preview-holder {
min-height: 167px;
padding: 10px 0;
+ overflow-x: auto;
}
.markdown-area {
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 94f5a12ff6a..192d53b048a 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -58,12 +58,12 @@
.nav-search {
display: inline-block;
- width: 50%;
+ width: 100%;
padding: 11px 0;
/* Small devices (phones, tablets, 768px and lower) */
- @media (max-width: $screen-sm-min) {
- width: 100%;
+ @media (min-width: $screen-sm-min) {
+ width: 50%;
}
}
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 1d49249dd80..18189e985c4 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -144,7 +144,7 @@
}
a {
- padding: 7px 12px;
+ padding: 7px 15px;
font-size: $gl-font-size;
line-height: 24px;
color: $gray;
@@ -169,12 +169,10 @@
}
.count {
- &:before {
- content: '(';
- }
- &:after {
- content: ')';
- }
+ float: right;
+ background: #eee;
+ padding: 0 8px;
+ @include border-radius(6px);
}
&.back-link i {
@@ -193,27 +191,6 @@
}
}
-.expand-nav a {
- color: $gl-icon-color;
- width: 60px;
- position: fixed;
- top: 0;
- left: 0;
- font-size: 20px;
- background: #fff;
- height: 59px;
- text-align: center;
- line-height: 59px;
- border-bottom: 1px solid #eee;
- transition-duration: .3s;
- outline: none;
- z-index: 100;
-
- &:hover {
- text-decoration: none;
- }
-}
-
.collapse-nav a {
width: $sidebar_width;
position: fixed;
@@ -233,12 +210,55 @@
}
.page-sidebar-collapsed {
+ padding-left: $sidebar_collapsed_width;
+
.sidebar-wrapper {
- display: none;
+ width: $sidebar_collapsed_width;
+
+ .header-logo {
+ width: $sidebar_collapsed_width;
+
+ a {
+ padding-left: ($sidebar_collapsed_width - 36) / 2;
+
+ .gitlab-text-container {
+ display: none;
+ }
+ }
+ }
+
+ .nav-sidebar {
+ width: $sidebar_collapsed_width;
+
+ li {
+ width: auto;
+
+ a {
+ span {
+ display: none;
+ }
+ }
+ }
+ }
+
+ .collapse-nav a {
+ width: $sidebar_collapsed_width;
+ }
+
+ .sidebar-user {
+ padding-left: ($sidebar_collapsed_width - 36) / 2;
+ width: $sidebar_collapsed_width;
+
+ .username {
+ display: none;
+ }
+ }
}
}
.page-sidebar-expanded {
+ padding-left: $sidebar_collapsed_width;
+
@media (min-width: $screen-md-min) {
padding-left: $sidebar_width;
}
@@ -289,48 +309,3 @@
padding-right: $sidebar_collapsed_width;
}
}
-
-.complex-sidebar {
- display: inline-block;
-
- .nav-primary {
- width: 61px;
- float: left;
- height: 100vh;
-
- .nav-sidebar {
- width: 60px;
-
- li a {
- width: 60px;
-
- span {
- display: none;
- }
- }
- }
- }
-
- .nav-secondary {
- $nav-secondary-width: 168px;
-
- float: left;
- width: $nav-secondary-width;
-
- .nav-sidebar {
- width: $nav-secondary-width;
-
- li {
- width: $nav-secondary-width;
-
- a {
- width: $nav-secondary-width;
-
- i {
- display: none;
- }
- }
- }
- }
- }
-}
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index aa244fe548d..b91f2f6f898 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -14,10 +14,6 @@
background: $row-hover;
}
- &:last-child {
- border-bottom: none;
- }
-
.avatar {
margin-right: 15px;
}
diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss
index dd42db1840f..96bab7880c2 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap.scss
@@ -43,7 +43,6 @@
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/popovers";
-@import "bootstrap/carousel";
// Utility classes
.clearfix {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index c2defd31884..0b6be86ce6a 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -10,10 +10,10 @@ $gutter_inner_width: 258px;
/*
* UI elements
*/
-$border-color: #efeff1;
+$border-color: #e5e5e5;
$focus-border-color: #3aabf0;
$table-border-color: #eef0f2;
-$background-color: #faf9f9;
+$background-color: #fafafa;
/*
* Text
@@ -28,6 +28,7 @@ $gl-link-color: #3084bb;
$gl-dark-link-color: #333;
$gl-placeholder-color: #8f8f8f;
$gl-icon-color: $gl-placeholder-color;
+$gl-grayish-blue: #7f8fa4;
$gl-gray: $gl-text-color;
$gl-header-color: $gl-title-color;
@@ -81,7 +82,7 @@ $provider-btn-not-active-color: #4688f1;
$white-light: #fff;
$white-normal: #ededed;
-$white-dark: #ededed;
+$white-dark: #ececec;
$gray-light: #faf9f9;
$gray-normal: #f5f5f5;
@@ -104,9 +105,11 @@ $orange-light: rgba(252, 109, 38, 0.80);
$orange-normal: #e75e40;
$orange-dark: #ce5237;
-$red-light: #f06559;
-$red-normal: #e52c5a;
-$red-dark: #d22852;
+$red-light: #e52c5a;
+$red-normal: #d22852;
+$red-dark: darken($red-normal, 5%);
+
+$black-transparent: rgba(0, 0, 0, 0.3);
$border-white-light: #f1f2f4;
$border-white-normal: #d6dae2;
@@ -128,9 +131,9 @@ $border-orange-light: #fc6d26;
$border-orange-normal: #ce5237;
$border-orange-dark: #c14e35;
-$border-red-light: #f24f41;
-$border-red-normal: #d22852;
-$border-red-dark: #ca264f;
+$border-red-light: #d22852;
+$border-red-normal: #ca264f;
+$border-red-dark: darken($border-red-normal, 5%);
$help-well-bg: #fafafa;
$help-well-border: #e5e5e5;
@@ -150,15 +153,22 @@ $gl-success: $green-normal;
$gl-info: $blue-normal;
$gl-warning: $orange-normal;
$gl-danger: $red-normal;
-$gl-btn-active-background: rgba(0, 0, 0, 0.12);
-$gl-btn-active-gradient: inset 0 0 4px $gl-btn-active-background;
+$gl-btn-active-background: rgba(0, 0, 0, 0.16);
+$gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background;
/*
* Commit Diff Colors
*/
$added: #63c363;
$deleted: #f77;
-
+$line-added: #ecfdf0;
+$line-added-dark: #c7f0d2;
+$line-removed: #fbe9eb;
+$line-removed-dark: #fac5cd;
+$line-number-old: #f9d7dc;
+$line-number-new: #ddfbe6;
+$match-line: #fafafa;
+$table-border-gray: #f0f0f0;
/*
* Fonts
*/
@@ -192,6 +202,13 @@ $dropdown-toggle-icon-color: #c4c4c4;
$dropdown-toggle-hover-icon-color: $dropdown-toggle-hover-border-color;
/*
+* Buttons
+*/
+$btn-active-gray: #ececec;
+$btn-placeholder-gray: #c7c7c7;
+$btn-white-active: #848484;
+
+/*
* Award emoji
*/
$award-emoji-menu-bg: #fff;
@@ -201,14 +218,14 @@ $award-emoji-new-btn-icon-color: #dcdcdc;
/*
* Search Box
*/
-$search-input-border-color: $dropdown-input-focus-border;
+$search-input-border-color: rgba(#4688f1, .8);
$search-input-focus-shadow-color: $dropdown-input-focus-shadow;
-$search-input-width: $dropdown-width;
+$search-input-width: 244px;
$location-badge-color: #aaa;
$location-badge-bg: $gray-normal;
+$location-badge-active-bg: #4f91f8;
$location-icon-color: #e7e9ed;
-$location-active-color: $gl-text-color;
-$location-active-bg: $search-input-border-color;
+$location-icon-active-color: #807e7e;
/*
* Notes
View Lorry Controller Status