Commit ed616f23 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Merge branch 'css-cleanup' into 'master'

Reduce amount of custom css and increase usage of default bootstrap

* Copy variables template file for configuring bootstrap variables
* Move layout and bootstrap to `base/` directory and explicitly set import order
* Apply some styles from flatly theme
* Replace bs-callout with alert
* Refactor gitlab css state colors
* Cleanup css variables
* Remove custom css for panels and navs

See merge request !1651
parents 3cf4359b be3edeb6
......@@ -11,12 +11,17 @@
*= require cal-heatmap
*/
@import "main/*";
@import "base/variables";
@import "base/mixins";
@import "base/layout";
/**
* Customized Twitter bootstrap
*/
@import 'gl_bootstrap';
@import 'base/gl_variables';
@import 'base/gl_bootstrap';
/**
* NProgress load bar css
......@@ -39,7 +44,7 @@
* Page specific styles (issues, projects etc):
*/
@import "sections/*";
@import "pages/*";
/**
* Code highlight
......
......@@ -3,17 +3,6 @@
*
*/
$font-size-base: 13px !default;
$nav-pills-active-link-hover-bg: $bg_primary;
$pagination-active-bg: $bg_primary;
$list-group-active-bg: $bg_primary;
$brand-primary: $bg_primary;
$brand-success: $bg_success;
$brand-info: #029ACF;
$brand-warning: $bg_warning;
$brand-danger: $bg_danger;
// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";
......@@ -141,10 +130,6 @@ $brand-danger: $bg_danger;
}
}
}
&.nav-small-tabs > li > a {
padding: 6px 9px;
}
}
.nav-tabs > li > a,
......@@ -152,61 +137,6 @@ $brand-danger: $bg_danger;
color: #666;
}
.nav-compact > li > a {
padding: 6px 12px;
}
.nav-small > li > a {
padding: 3px 5px;
font-size: 12px;
}
/*
* Callouts from Bootstrap3 docs
*
* Not quite alerts, but custom and helpful notes for folks reading the docs.
* Requires a base and modifier class.
*/
/* Common styles for all types */
.bs-callout {
margin: 20px 0;
padding: 20px;
border-left: 3px solid #eee;
color: #666;
background: #f9f9f9;
}
.bs-callout h4 {
margin-top: 0;
margin-bottom: 5px;
}
.bs-callout p:last-child {
margin-bottom: 0;
}
/* Variations */
.bs-callout-danger {
background-color: #fdf7f7;
border-color: #eed3d7;
color: #b94a48;
}
.bs-callout-warning {
background-color: #faf8f0;
border-color: #faebcc;
color: #8a6d3b;
}
.bs-callout-info {
background-color: #f4f8fa;
border-color: #bce8f1;
color: #34789a;
}
.bs-callout-success {
background-color: #dff0d8;
border-color: #5cA64d;
color: #3c763d;
}
/**
* fix to keep tooltips position in top navigation bar
*
......@@ -221,16 +151,13 @@ $brand-danger: $bg_danger;
*
*/
.panel {
@include border-radius(0px);
.panel-heading {
@include border-radius(0px);
font-size: 14px;
line-height: 18px;
.panel-head-actions {
position: relative;
top: -7px;
top: -6px;
float: right;
}
}
......@@ -263,40 +190,10 @@ $brand-danger: $bg_danger;
}
}
.panel-default {
.panel-heading {
background-color: #EEE;
}
}
.panel-danger {
@include panel-colored;
.panel-heading {
color: $border_danger;
border-color: $border_danger;
}
}
.panel-success {
@include panel-colored;
.panel-heading {
color: $border_success;
border-color: $border_success;
}
}
.panel-primary {
@include panel-colored;
.panel-heading {
color: $border_primary;
border-color: $border_primary;
}
}
.panel-warning {
@include panel-colored;
.panel-heading {
color: $border_warning;
border-color: $border_warning;
.alert {
a {
@extend .alert-link;
color: #fff;
text-decoration: underline;
}
}
This diff is collapsed.
......@@ -121,14 +121,6 @@
}
}
@mixin page-title {
color: #333;
line-height: 1.5;
font-weight: normal;
margin-top: 0px;
margin-bottom: 10px;
}
@mixin str-truncated($max_width: 82%) {
display: inline-block;
overflow: hidden;
......@@ -137,14 +129,3 @@
white-space: nowrap;
max-width: $max_width;
}
@mixin panel-colored {
border: 1px solid #EEE;
background: $box_bg;
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.09));
.panel-heading {
font-weight: bold;
background-color: $box_bg;
}
}
/*
* General Colors
*/
$style_color: #474D57;
$hover: #FFF3EB;
$box_bg: #F9F9F9;
$gl-link-color: #446e9b;
$nprogress-color: #c0392b;
$gl-font-size: 13px;
$list-font-size: 15px;
$sidebar_width: 230px;
$avatar_radius: 50%;
$code_font_size: 13px;
$code_line_height: 1.5;
/*
* Link colors
*/
$link_color: #446e9b;
$link_hover_color: darken($link-color, 10%);
$btn-border: 1px solid #ccc;
/*
* Success colors (green)
*/
$border_success: #019875;
$bg_success: #019875;
/*
* Danger colors (red)
*/
$border_danger: #d43f3a;
$bg_danger: #d9534f;
/*
* Primary colors (blue)
*/
$border_primary: #446e9b;
$bg_primary: #446e9b;
* State colors:
*/
$gl-success: #019875;
$gl-danger: #d9534f;
$gl-primary: #446e9b;
$gl-info: #029ACF;
$gl-warning: #EB9532;
$gl-primary: #2C3E50;
$gl-success: #18BC9C;
$gl-info: #3498DB;
$gl-warning: #F39C12;
$gl-danger: #E74C3C;
/*
* Warning colors (yellow)
*/
$bg_warning: #EB9532;
$border_warning: #EB9532;
/**
* Commit Diff Colors
*/
$added: #63c363;
$deleted: #f77;
/**
* NProgress customize
*/
$nprogress-color: #c0392b;
/**
* Font sizes
*/
$list-font-size: 15px;
/**
* Sidebar navigation width
/*
* Fonts
*/
$sidebar_width: 230px;
$avatar_radius: 50%;
$code_font_size: 13px;
$code_line_height: 1.5;
$monospace_font: 'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
$regular_font: "Helvetica Neue", Helvetica, Arial, sans-serif;
......@@ -6,12 +6,10 @@
}
&.btn-create {
@extend .wide;
@extend .btn-success;
}
&.btn-save {
@extend .wide;
@extend .btn-primary;
}
......@@ -23,11 +21,6 @@
float: right;
}
&.wide {
padding-left: 20px;
padding-right: 20px;
}
&.btn-small {
padding: 2px 10px;
font-size: 12px;
......@@ -41,16 +34,16 @@
}
&.btn-close {
color: $bg_danger;
border-color: $border_danger;
color: $gl-danger;
border-color: $gl-danger;
&:hover {
color: #B94A48;
}
}
&.btn-reopen {
color: $bg_success;
border-color: $border_success;
color: $gl-success;
border-color: $gl-success;
&:hover {
color: #468847;
}
......
......@@ -61,7 +61,7 @@ pre {
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background: $bg_primary;
background: $gl-primary;
color: #FFF
}
......@@ -71,7 +71,7 @@ pre {
/** FLASH message **/
.author_link {
color: $link_color;
color: $gl-link-color;
}
.help li { color:$style_color; }
......
......@@ -3,7 +3,7 @@
*/
.issue-form, .merge-request-form, .wiki-form {
.description {
height: 20em;
height: 16em;
border-top-left-radius: 0;
}
}
......
......@@ -11,17 +11,17 @@
margin-right: 5px;
&.issue-box-closed {
background-color: $bg_danger;
background-color: $gl-danger;
color: #FFF;
}
&.issue-box-merged {
background-color: $bg_primary;
background-color: $gl-primary;
color: #FFF;
}
&.issue-box-open {
background-color: $bg_success;
background-color: $gl-success;
color: #FFF;
}
......
......@@ -41,8 +41,8 @@
}
.ui-state-active {
border: 1px solid $bg_primary;
background: $bg_primary;
border: 1px solid $gl-primary;
background: $gl-primary;
color: #FFF;
}
......
......@@ -3,10 +3,11 @@
.select2-choice {
background: #FFF;
border-color: #BBB;
padding: 6px 12px;
padding: 6px 14px;
font-size: 13px;
line-height: 18px;
height: auto;
margin: 2px 0;
.select2-arrow {
background: #FFF;
......@@ -20,7 +21,7 @@
}
.select2-container-multi .select2-choices .select2-search-field input {
padding: 6px 12px;
padding: 8px 14px;
font-size: 13px;
line-height: 18px;
height: auto;
......@@ -42,7 +43,7 @@
.select2-results {
max-height: 350px;
.select2-highlighted {
background: $bg_primary;
background: $gl-primary;
}
}
}
......
......@@ -2,28 +2,12 @@
* Headers
*
*/
h1.page-title {
@include page-title;
font-size: 28px;
}
h2.page-title {
@include page-title;
font-size: 24px;
}
h3.page-title {
@include page-title;
font-size: 22px;
}
h4.page-title {
.page-title {
margin-top: 0px;
}
h6 {
color: #888;
text-transform: uppercase;
color: #333;
line-height: 1.5;
font-weight: normal;
margin-bottom: 5px;
}
/** CODE **/
......@@ -36,52 +20,6 @@ pre {
}
}
/**
* Links
*
*/
a {
outline: none;
color: $link_color;
&:hover {
text-decoration: underline;
color: $link_hover_color;
}
&:focus {
text-decoration: underline;
}
&.darken {
color: $style_color;
}
&.lined {
text-decoration: underline;
&:hover { text-decoration: underline; }
}
&.gray {
color: gray;
}
&.supp_diff_link {
text-align: center;
padding: 20px 0;
background: #f1f1f1;
width: 100%;
float: left;
}
&.neib {
margin-right: 15px;
}
}
a:focus {
outline: none;
}
.monospace {
font-family: $monospace_font;
}
......
/** Typo **/
$monospace_font: 'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
$regular_font: "Helvetica Neue", Helvetica, Arial, sans-serif;
......@@ -31,11 +31,8 @@
li {
&.active {
a {
background-color: #EEE;
border-bottom: 1px solid #EEE !important;
&:hover {
background: #eee;
}
background-color: whitesmoke !important;
border-bottom: 1px solid whitesmoke !important;
}
}
......@@ -111,8 +108,8 @@
}
.dash-new-project {
background: $bg_success;
border: 1px solid $border_success;
background: $gl-success;
border: 1px solid $gl-success;
a {
color: #FFF;
......@@ -120,8 +117,8 @@
}
.dash-new-group {
background: $bg_success;
border: 1px solid $border_success;
background: $gl-success;
border: 1px solid $gl-success;
a {
color: #FFF;
......
......@@ -40,7 +40,7 @@
}
.check-all-holder {
height: 32px;
height: 36px;
float: left;
margin-right: 12px;
padding: 6px 15px;
......
......@@ -136,8 +136,8 @@
background-color: #F5F5F5;
&.ci-success {
color: $bg_success;
border-color: $border_success;
color: $gl-success;
border-color: $gl-success;
background-color: #F1FAF1;
}
......@@ -148,20 +148,20 @@
}
&.ci-running {
color: $bg_warning;
border-color: $border_warning;
color: $gl-warning;
border-color: $gl-warning;
background-color: #FAF5F1;
}
&.ci-failed {
color: $bg_danger;
border-color: $border_danger;
color: $gl-danger;
border-color: $gl-danger;
background-color: #FAF1F1;
}
&.ci-error {
color: $bg_danger;
border-color: $border_danger;
color: $gl-danger;
border-color: $gl-danger;
background-color: #FAF1F1;
}
}
......
......@@ -40,7 +40,7 @@ ul.notes {
font-weight: bold;
font-size: 14px;
&:hover {
color: $link_color;
color: $gl-link-color;
}
}
.author-username {
......@@ -70,7 +70,7 @@ ul.notes {
a[href*="/uploads/"] {
&:before {
margin-right: 4px;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
......@@ -153,7 +153,6 @@ ul.notes {
@extend .cgray;
&:hover {
color: $link_hover_color;
&.danger { @extend .cred; }
}
}
......@@ -181,7 +180,7 @@ ul.notes {
background: #FFF;
padding: 4px;
font-size: 16px;
color: $link_color;
color: $gl-link-color;
margin-left: -60px;
position: absolute;
z-index: 10;
......@@ -194,7 +193,7 @@ ul.notes {
&:hover {
font-size: 24px;
background: $bg_primary;
background: $gl-primary;
color: #FFF;
@include show-add-diff-note;
}
......
......@@ -10,13 +10,13 @@
}
.ns-part {
color: $bg_primary;
color: $gl-primary;
}
.ns-watch {
color: $bg_success;
color: $gl-success;
}
.ns-mute {
color: $bg_danger;
color: $gl-danger;
}
......@@ -99,25 +99,6 @@
margin-right: 45px;
}
.btn,
.form-control {
border: 1px solid #E1E1E1;
box-shadow: none;
padding: 6px 9px;
}
.btn {
background: none;
color: $link_color;
&.active {
background-color: #f5f5f5;
border: 1px solid rgba(0,0,0,0.195);
color: #333;
font-weight: bold;
}
}
.form-control {
cursor: auto;
@extend .monospace;
......@@ -267,15 +248,15 @@ ul.nav.nav-projects-tabs {
}
.vs-public {
color: $bg_primary;
color: $gl-primary;
}
.vs-internal {
color: $bg_warning;
color: $gl-warning;
}
.vs-private {
color: $bg_success;
color: $gl-success;
}
.breadcrumb.repo-breadcrumb {
......
......@@ -39,14 +39,9 @@
.tree-item-file-name {
max-width: 320px;
vertical-align: middle;
a {
&:hover {
color: $link_hover_color;
}
}
i {
color: $bg_primary;
color: $gl-primary;
}
img {
......
......@@ -14,7 +14,7 @@
.form-group
.col-sm-2
.col-sm-10
.bs-callout.bs-callout-info
.alert.alert-info
= render 'shared/group_tips'
.form-actions
= f.submit 'Create group', class: "btn btn-create"
......
......@@ -44,7 +44,7 @@
Projects (#{@projects.total_count})
.panel-head-actions
.dropdown.inline
%button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
%button.dropdown-toggle.btn.btn-sm{type: 'button', 'data-toggle' => 'dropdown'}
%span.light sort:
- if @sort.present?
= sort_options_hash[@sort]
......@@ -63,7 +63,7 @@
= sort_title_oldest_updated
= link_to admin_namespaces_projects_path(sort: sort_value_largest_repo) do
= sort_title_largest_repo
= link_to 'New Project', new_project_path, class: "btn btn-new"
= link_to 'New Project', new_project_path, class: "btn btn-sm btn-success"
%ul.well-list
- @projects.each do |project|
%li
......
......@@ -10,7 +10,7 @@
- @service.errors.full_messages.each do |msg|
%p= msg
- if @service.help.present?
.bs-callout
.alert.alert-info
= preserve do
= markdown @service.help
......
......@@ -35,7 +35,7 @@
Users (#{@users.total_count})
.panel-head-actions
.dropdown.inline
%a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
%a.dropdown-toggle.btn.btn-sm{href: '#', "data-toggle" => "dropdown"}
%span.light sort:
- if @sort.present?
= sort_options_hash[@sort]
......@@ -59,7 +59,7 @@
= link_to admin_users_path(sort: sort_value_oldest_updated) do
= sort_title_oldest_updated
= link_to 'New User', new_admin_user_path, class: "btn btn-new"
= link_to 'New User', new_admin_user_path, class: "btn btn-new btn-sm"
%ul.well-list
- @users.each do |user|
%li
......
......@@ -4,7 +4,7 @@
projects:
- if can? current_user, :manage_group, @group
.panel-head-actions
= link_to new_project_path(namespace_id: @group.id), class: "btn btn-new" do
= link_to new_project_path(namespace_id: @group.id), class: "btn btn-sm btn-success" do
%i.fa.fa-plus
New Project
%ul.well-list
......
......@@ -56,7 +56,7 @@
.form-group
= f.label :bio, class: "control-label"
.col-sm-10
= f.text_area :bio, rows: 6, class: "form-control", maxlength: 250
= f.text_area :bio, rows: 4, class: "form-control", maxlength: 250
%span.help-block Tell us about yourself in fewer than 250 characters.
.col-md-5
......@@ -89,10 +89,12 @@
= link_to 'Remove avatar', profile_avatar_path, data: { confirm: "Avatar will be removed. Are you sure?"}, method: :delete, class: "btn btn-remove btn-small remove-avatar"
- if @user.public_profile?
.bs-callout.bs-callout-info
.alert.alert-info
%h4 Public profile
%p Your profile is publicly visible because you joined public project(s)
.form-actions
= f.submit 'Save changes', class: "btn btn-save"
.row
.col-md-7
.col-sm-2
= f.submit 'Save changes', class: "btn btn-success"
......@@ -50,6 +50,7 @@
= f.select(:milestone_id, milestone_options(issuable),
{ include_blank: 'Select milestone' }, { class: 'select2' })
- else
.prepend-top-10
%span.light No open milestones available.
 
- if can? current_user, :admin_milestone, issuable.project
......@@ -63,6 +64,7 @@
= f.collection_select :label_ids, issuable.project.labels.all, :id, :name,
{ selected: issuable.label_ids }, multiple: true, class: 'select2'
- else
.prepend-top-10
%span.light No labels yet.
 
- if can? current_user, :admin_label, issuable.project
......
......@@ -15,7 +15,7 @@
- else
= link_to title, '#'
%ul.blob-commit-info.bs-callout.bs-callout-info.hidden-xs
%ul.blob-commit-info.well.hidden-xs
- blob_commit = @repository.last_commit_for_path(@commit.id, blob.path)
= render blob_commit, project: @project
......
.bs-callout.bs-callout-warning
.alert.alert-warning
%h4
Too many changes.
.pull-right
......
......@@ -12,7 +12,7 @@
%span Import existing git repo
.col-sm-10
= f.text_field :import_url, class: 'form-control', placeholder: 'https://github.com/randx/six.git'
.bs-callout.bs-callout-info
.alert.alert-info
This URL must be publicly accessible or you can add a username and password like this: https://username:password@gitlab.com/company/project.git.
%br
The import will time out after 4 minutes. For big repositories, use a clone/push combination.
......
......@@ -2,7 +2,7 @@
-if @label.errors.any?
.row
.col-sm-10.col-sm-offset-2
.bs-callout.bs-callout-danger
.alert.alert-danger
- @label.errors.full_messages.each do |msg|
%span= msg
%br
......
......@@ -99,11 +99,11 @@
- if @diffs.present?
= render "projects/diffs/diffs", diffs: @diffs, project: @project
- elsif @commits.size > MergeRequestDiff::COMMITS_SAFE_SIZE
.bs-callout.bs-callout-danger
.alert.alert-danger
%h4 This comparison includes more than #{MergeRequestDiff::COMMITS_SAFE_SIZE} commits.
%p To preserve performance the line changes are not shown.
- else
.bs-callout.bs-callout-danger
.alert.alert-danger
%h4 This comparison includes a huge diff.
%p To preserve performance the line changes are not shown.
......
......@@ -3,7 +3,7 @@
- elsif @merge_request_diff.empty?
.nothing-here-block Nothing to merge from #{@merge_request.source_branch} into #{@merge_request.target_branch}
- else
.bs-callout.bs-callout-warning
.alert.alert-warning
%h4
Changes view for this comparison is extremely large.
%p
......
......@@ -34,7 +34,7 @@
%span Import existing git repo
.col-sm-10
= f.text_field :import_url, class: 'form-control', placeholder: 'https://github.com/randx/six.git'
.bs-callout.bs-callout-info
.alert.alert-info.prepend-top-10
This URL must be publicly accessible or you can add a username and password like this: https://username:password@gitlab.com/company/project.git.
%br
The import will time out after 4 minutes. For big repositories, use a clone/push combination.
......@@ -65,7 +65,7 @@
%i.fa.fa-bitbucket
Import projects from Bitbucket
= render 'bitbucket_import_modal'
- unless request.host == 'gitlab.com'
.project-import.form-group
.col-sm-2
......
......@@ -2,7 +2,7 @@
%p.light Keep stable branches secure and force developers to use Merge Requests
%hr
.bs-callout.bs-callout-info
.alert.alert-info
%p Protected branches are designed to
%ul
%li prevent pushes from everybody except #{link_to "masters", help_page_path("permissions", "permissions"), class: "vlink"}
......
......@@ -18,7 +18,7 @@
%li= msg
- if @service.help.present?
.bs-callout
.alert.alert-info
= preserve do
= markdown @service.help
......
......@@ -40,7 +40,7 @@
%p Repository is read-only
- if @project.forked_from_project
.alert.alert-success
.well
%i.fa.fa-code-fork.project-fork-icon
Forked from:
%br
......
......@@ -15,7 +15,7 @@
= f.text_field :path, placeholder: 'open-source', class: 'form-control',
autofocus: local_assigns[:autofocus] || false
- if @group.persisted?
.bs-callout.bs-callout-danger
.alert.alert-danger
%ul
%li Changing group path can have unintended side effects.
%li Renaming group path will rename directory for all related projects
......
- if cookies[:hide_no_ssh_message].blank? && !current_user.hide_no_ssh_key && current_user.require_ssh_key?
.no-ssh-key-message.alert.alert-warning.hidden-xs
You won't be able to pull or push project code via SSH until you #{link_to 'add an SSH key', new_profile_key_path} to your profile
You won't be able to pull or push project code via SSH until you #{link_to 'add an SSH key', new_profile_key_path, class: 'alert-link'} to your profile
.pull-right
= link_to "Don't show again", profile_path(user: {hide_no_ssh_key: true}), method: :put
= link_to "Don't show again", profile_path(user: {hide_no_ssh_key: true}), method: :put, class: 'alert-link'
|
= link_to 'Remind later', '#', class: 'hide-no-ssh-message'
= link_to 'Remind later', '#', class: 'hide-no-ssh-message alert-link'
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