Skip to content

G
gitlab-ce
Commit 0bac6eab authored by Simon Knox's avatar Simon Knox
Browse files
Options

Merge branch... 

Merge branch '241489-ide-migrate-button-styles-in-_ide_theme_overrides-scss-to-use-box-shadow-instead-of-border' into 'master'

Migrate button styles in _ide_theme_overrides.scss

See merge request gitlab-org/gitlab!40705
parents 27b3ad4a 27a56fb1
Hide whitespace changes
Inline Side-by-side
Showing with 97 additions and 17 deletions
app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
View file @ 0bac6eab
......@@ -226,20 +226,20 @@
@return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width, #{$original-border}));
}
.btn:not(.btn-link):not([disabled]):hover {
.btn:not(.gl-button):not(.btn-link):not([disabled]):hover {
border-width: var(--ide-btn-hover-border-width, 1px);
padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px);
}
.btn:not([disabled]).btn-sm:hover {
.btn:not(.gl-button):not([disabled]).btn-sm:hover {
padding: calc-btn-hover-padding(4px) calc-btn-hover-padding(10px);
}
.btn:not([disabled]).btn-block:hover {
.btn:not(.gl-button):not([disabled]).btn-block:hover {
padding: calc-btn-hover-padding(6px) 0;
}
.btn-default,
.btn-default:not(.gl-button),
.dropdown,
.dropdown-menu-toggle {
background-color: var(--ide-input-background, $white) !important;
......@@ -258,7 +258,7 @@
}
// In IDE, the only inverted buttons are `.btn-remove`
.btn-inverted.btn-remove {
.btn-inverted.btn-remove:not(.gl-button) {
color: var(--ide-input-color, $red-500) !important;
background-color: var(--ide-input-background, $white) !important;
border-color: var(--ide-btn-default-border, $red-500);
......@@ -277,17 +277,21 @@
}
}
.btn-default {
// todo: remove this block after all default buttons have been migrated to gl-button
.btn-default:not(.gl-button) {
background-color: var(--ide-btn-default-background, $white) !important;
border-color: var(--ide-btn-default-border, $border-color);
&:hover,
&:focus {
border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
background-color: var(--ide-input-background, $white-normal) !important;
background-color: var(--ide-btn-default-background, $white-normal) !important;
}
&:active,
.active {
border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
background-color: var(--ide-input-background, $white-dark) !important;
background-color: var(--ide-btn-default-background, $white-dark) !important;
}
}
......@@ -321,8 +325,9 @@
border-color: var(--ide-dropdown-hover-background, $gray-100) !important;
}
.btn-primary,
.btn-info {
// todo: remove this block after all primary/info buttons have been migrated to gl-button
.btn-primary:not(.gl-button),
.btn-info:not(.gl-button) {
background-color: var(--ide-btn-primary-background, $blue-500);
border-color: var(--ide-btn-primary-border, $blue-600) !important;
......@@ -339,7 +344,8 @@
}
}
.btn-success {
// todo: remove this block after all success buttons have been migrated to gl-button
.btn-success:not(.gl-button) {
background-color: var(--ide-btn-success-background, $green-500);
border-color: var(--ide-btn-success-border, $green-600) !important;
......@@ -356,12 +362,70 @@
}
}
.btn[disabled] {
// todo: remove this block after all disabled buttons have been migrated to gl-button
.btn[disabled]:not(.gl-button) {
background-color: var(--ide-btn-default-background, $gray-light) !important;
border: 1px solid var(--ide-btn-disabled-border, $gray-100) !important;
color: var(--ide-btn-disabled-color, $gl-text-color-disabled) !important;
}
@function ide-btn-var($btn-type, $var-type, $value) {
@return var(--ide-btn-#{$btn-type}-#{$var-type}, $value);
}
@mixin ide-gl-button($btn-type, $bg-normal, $bg-hover, $bg-active, $border-normal, $border-hover, $border-focus, $border-active, $border-width-hover: 2px, $box-shadow-hover: $t-gray-a-08, $box-shadow-focus: 0 0 0 4px rgba($blue-500, 0.25)) {
background-color: ide-btn-var($btn-type, background, $bg-normal);
box-shadow: inset 0 0 0 1px ide-btn-var($btn-type, border, $border-normal);
&:hover,
&:focus {
background-color: ide-btn-var($btn-type, background, $bg-hover);
}
&:hover {
box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-hover),
0 2px 2px 0 $box-shadow-hover;
}
&:focus {
box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-focus),
ide-btn-var($btn-type, focus-box-shadow, $box-shadow-focus);
}
&:active:focus {
background-color: ide-btn-var($btn-type, background, $bg-active);
box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-active),
ide-btn-var($btn-type, focus-box-shadow, $box-shadow-focus);
}
}
.btn-default.gl-button.gl-button {
color: var(--ide-input-color, $gl-text-color);
@include ide-gl-button(default, $white, $gray-50, $gray-100, $gray-200, $gray-300, $gray-300, $gray-400);
}
.btn-success.gl-button.gl-button {
@include ide-gl-button(success, $green-500, $green-600, $green-800, $green-600, $green-800, $green-800, $green-900);
}
.btn-info.gl-button.gl-button,
.btn-primary.gl-button.gl-button {
@include ide-gl-button(primary, $blue-500, $blue-600, $blue-800, $blue-600, $blue-800, $blue-800, $blue-900);
}
.btn-danger.btn-danger-secondary.gl-button.gl-button {
color: var(--ide-input-color, $red-500);
@include ide-gl-button(danger-secondary, $white, $red-50, $red-100, $red-500, $red-600, $red-600, $red-700);
}
.btn[disabled].gl-button.gl-button {
color: var(--ide-btn-disabled-color, $gl-text-color-disabled);
@include ide-gl-button(disabled, $gray-10, $gray-10, $gray-10, $gray-100, $gray-100, $gray-100, $gray-100, 1px, transparent, transparent);
}
.md table:not(.code) tbody {
background-color: var(--ide-border-color, $white);
}
......
app/assets/stylesheets/page_bundles/ide_themes/_dark.scss
View file @ 0bac6eab
......@@ -20,20 +20,28 @@
--ide-btn-default-background: transparent;
--ide-btn-default-border: #bfbfbf;
--ide-btn-default-hover-border: #d8d8d8;
--ide-btn-default-hover-border-width: 2px;
--ide-btn-default-focus-box-shadow: 0 0 0 1px #bfbfbf;
--ide-btn-primary-background: #1068bf;
--ide-btn-primary-border: #428fdc;
--ide-btn-primary-hover-border: #63a6e9;
--ide-btn-primary-hover-border-width: 2px;
--ide-btn-primary-focus-box-shadow: 0 0 0 1px #63a6e9;
--ide-btn-success-background: #217645;
--ide-btn-success-border: #108548;
--ide-btn-success-hover-border: #2da160;
--ide-btn-success-hover-border-width: 2px;
--ide-btn-success-focus-box-shadow: 0 0 0 1px #2da160;
--ide-btn-disabled-background: transparent;
--ide-btn-disabled-border: rgba(223, 223, 223, 0.24);
--ide-btn-disabled-hover-border: rgba(223, 223, 223, 0.24);
--ide-btn-disabled-hover-border-width: 1px;
--ide-btn-disabled-focus-box-shadow: 0 0 0 0 transparent;
--ide-btn-disabled-color: rgba(145, 145, 145, 0.48);
--ide-btn-hover-border-width: 2px;
--ide-dropdown-background: #404040;
--ide-dropdown-hover-background: #525252;
......
app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss
View file @ 0bac6eab
......@@ -18,22 +18,30 @@
--ide-input-color: #fff;
--ide-btn-default-background: transparent;
--ide-btn-default-border: var(--ide-input-border);
--ide-btn-default-border: #d8d8d8;
--ide-btn-default-hover-border: #d8d8d8;
--ide-btn-default-hover-border-width: 2px;
--ide-btn-default-focus-box-shadow: 0 0 0 1px #d8d8d8;
--ide-btn-primary-background: #1068bf;
--ide-btn-primary-border: #428fdc;
--ide-btn-primary-hover-border: #63a6e9;
--ide-btn-primary-hover-border-width: 2px;
--ide-btn-primary-focus-box-shadow: 0 0 0 1px #63a6e9;
--ide-btn-success-background: #217645;
--ide-btn-success-border: #108548;
--ide-btn-success-hover-border: #2da160;
--ide-btn-success-hover-border-width: 2px;
--ide-btn-success-focus-box-shadow: 0 0 0 1px #2da160;
--ide-btn-disabled-background: transparent;
--ide-btn-disabled-border: rgba(223, 223, 223, 0.24);
--ide-btn-disabled-hover-border: rgba(223, 223, 223, 0.24);
--ide-btn-disabled-hover-border-width: 1px;
--ide-btn-disabled-focus-box-shadow: transparent;
--ide-btn-disabled-color: rgba(145, 145, 145, 0.48);
--ide-btn-hover-border-width: 2px;
--ide-dropdown-background: #004c61;
--ide-dropdown-hover-background: #00617a;
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7