summaryrefslogtreecommitdiff
path: root/app/assets
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets')
-rw-r--r--app/assets/stylesheets/base/variables.scss1
-rw-r--r--app/assets/stylesheets/generic/header.scss206
-rw-r--r--app/assets/stylesheets/generic/sidebar.scss6
-rw-r--r--app/assets/stylesheets/themes/gitlab-theme.scss3
4 files changed, 107 insertions, 109 deletions
diff --git a/app/assets/stylesheets/base/variables.scss b/app/assets/stylesheets/base/variables.scss
index 596376c3970..c44fa06fc53 100644
--- a/app/assets/stylesheets/base/variables.scss
+++ b/app/assets/stylesheets/base/variables.scss
@@ -5,6 +5,7 @@ $gl-link-color: #446e9b;
$nprogress-color: #c0392b;
$gl-font-size: 14px;
$list-font-size: 15px;
+$sidebar_collapsed_width: 52px;
$sidebar_width: 230px;
$avatar_radius: 50%;
$code_font_size: 13px;
diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss
index 3b0ee264bc3..5da4d14b3ba 100644
--- a/app/assets/stylesheets/generic/header.scss
+++ b/app/assets/stylesheets/generic/header.scss
@@ -2,7 +2,13 @@
* Application Header
*
*/
+$header-height: 46px;
+
header {
+ &.empty-header .container {
+ border-bottom: 1px solid #EEE;
+ }
+
&.navbar-gitlab {
z-index: 100;
margin-bottom: 0;
@@ -13,54 +19,9 @@ header {
.container {
width: 100% !important;
padding: 0;
- padding-right: 35px;
background: #FFF;
- border-bottom: 1px solid #EEE;
filter: none;
- .title {
- position: relative;
- float: left;
- margin: 0;
- margin-left: 25px;
- font-size: 18px;
- line-height: 44px;
- font-weight: bold;
- color: #444;
-
- @include str-truncated(37%);
-
- a {
- color: #444;
- &:hover {
- text-decoration: underline;
- }
- }
- }
-
- .app_logo {
- border-bottom: 1px solid transparent;
- margin-bottom: -1px;
-
- a {
- padding: 5px 8px;
-
- img {
- float: left;
- }
-
- h3 {
- width: 158px;
- float: left;
- margin: 0;
- margin-left: 20px;
- font-size: 18px;
- line-height: 34px;
- font-weight: normal;
- }
- }
- }
-
.nav > li > a {
color: #888;
font-size: 14px;
@@ -80,7 +41,6 @@ header {
}
}
- /** NAV block with links and profile **/
.nav {
float: right;
margin-right: 0;
@@ -96,73 +56,68 @@ header {
}
}
}
-
- .turbolink-spinner {
- font-size: 20px;
- margin-right: 10px;
- }
-
- @media (max-width: $screen-xs-max) {
- border-width: 0;
- font-size: 18px;
-
- .title {
- @include str-truncated(70%);
- }
-
- .navbar-collapse {
- margin-top: 47px;
- }
-
- .navbar-nav {
- margin: 5px 0;
-
- .visible-xs, .visable-sm {
- display: table-cell !important;
- }
- }
-
- li {
- display: table-cell;
- width: 1%;
-
- a {
- text-align: center;
- font-size: 18px !important;
- }
- }
- }
}
- /**
- *
- * Logo holder
- *
- */
- .app_logo {
+ .header-logo {
+ border-bottom: 1px solid transparent;
float: left;
- margin-right: 9px;
+ height: $header-height;
+ width: $sidebar_width;
a {
float: left;
- height: 46px;
+ height: $header-height;
width: 100%;
+ padding: 5px 8px;
+
+ h3 {
+ width: 158px;
+ float: left;
+ margin: 0;
+ margin-left: 20px;
+ font-size: 18px;
+ line-height: 34px;
+ font-weight: normal;
+ }
img {
width: 36px;
height: 36px;
+ float: left;
}
}
+
&:hover {
background-color: #EEE;
}
}
- /**
- *
- * Search box
- *
- */
+ .header-content {
+ border-bottom: 1px solid #EEE;
+ padding-right: 35px;
+ height: $header-height;
+
+ .title {
+ position: relative;
+ float: left;
+ margin: 0;
+ margin-left: 35px;
+ font-size: 18px;
+ line-height: 44px;
+ font-weight: bold;
+ color: #444;
+
+ @include str-truncated(37%);
+
+ a {
+ color: #444;
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+
.search {
margin-right: 10px;
margin-left: 10px;
@@ -198,6 +153,22 @@ header {
width: 300px;
}
+@mixin collapsed-header {
+ .header-logo {
+ width: $sidebar_collapsed_width;
+
+ h3 {
+ display: none;
+ }
+ }
+
+ .header-content {
+ .title {
+ margin-left: 30px;
+ }
+ }
+}
+
@media (max-width: 1200px) {
.search .search-input {
width: 200px;
@@ -212,23 +183,48 @@ header {
@media (max-width: $screen-md-max) {
.header-collapsed, .header-expanded {
- width: 52px;
-
- h3 {
- display: none;
- }
+ @include collapsed-header;
}
}
@media(min-width: $screen-md-max) {
.header-collapsed {
- width: 52px;
-
- h3 {
- display: none;
- }
+ @include collapsed-header;
}
.header-expanded {
}
}
+
+@media (max-width: $screen-xs-max) {
+ header .container {
+ border-width: 0;
+ font-size: 18px;
+
+ .title {
+ @include str-truncated(70%);
+ }
+
+ .navbar-collapse {
+ margin-top: 47px;
+ }
+
+ .navbar-nav {
+ margin: 5px 0;
+
+ .visible-xs, .visable-sm {
+ display: table-cell !important;
+ }
+ }
+
+ li {
+ display: table-cell;
+ width: 1%;
+
+ a {
+ text-align: center;
+ font-size: 18px !important;
+ }
+ }
+ }
+}
diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss
index a80b5850803..5d4dee5691a 100644
--- a/app/assets/stylesheets/generic/sidebar.scss
+++ b/app/assets/stylesheets/generic/sidebar.scss
@@ -102,13 +102,13 @@
padding-left: 50px;
.sidebar-wrapper {
- width: 52px;
+ width: $sidebar_collapsed_width;
.nav-sidebar {
margin-top: 29px;
position: fixed;
top: 45px;
- width: 52px;
+ width: $sidebar_collapsed_width;
li a {
padding-left: 18px;
@@ -125,7 +125,7 @@
.collapse-nav a {
left: 0px;
- width: 52px;
+ width: $sidebar_collapsed_width;
}
.sidebar-user {
diff --git a/app/assets/stylesheets/themes/gitlab-theme.scss b/app/assets/stylesheets/themes/gitlab-theme.scss
index 9b8e3d8e291..a52c847da69 100644
--- a/app/assets/stylesheets/themes/gitlab-theme.scss
+++ b/app/assets/stylesheets/themes/gitlab-theme.scss
@@ -1,8 +1,9 @@
@mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
header {
&.navbar-gitlab {
- .app_logo {
+ .header-logo {
background-color: $color-darker;
+ border-color: $color-darker;
a {
color: $color-light;
View Lorry Controller Status