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/animations.scss2
-rw-r--r--app/assets/stylesheets/framework/asciidoctor.scss27
-rw-r--r--app/assets/stylesheets/framework/buttons.scss128
-rw-r--r--app/assets/stylesheets/framework/dropdowns.scss24
-rw-r--r--app/assets/stylesheets/framework/lists.scss1
-rw-r--r--app/assets/stylesheets/framework/modal.scss51
-rw-r--r--app/assets/stylesheets/framework/typography.scss65
-rw-r--r--app/assets/stylesheets/framework/variables.scss8
8 files changed, 194 insertions, 112 deletions
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 6f5a2e561af..6bc5632365f 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -104,7 +104,7 @@
}
.btn {
- @include transition(background-color, border-color, color, box-shadow);
+ @include transition(border-color);
}
.dropdown-menu-toggle,
diff --git a/app/assets/stylesheets/framework/asciidoctor.scss b/app/assets/stylesheets/framework/asciidoctor.scss
deleted file mode 100644
index 1586265d40e..00000000000
--- a/app/assets/stylesheets/framework/asciidoctor.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.admonitionblock td.icon {
- width: 1%;
-
- [class^='fa icon-'] {
- @extend .fa-2x;
- }
-
- .icon-note {
- @extend .fa-thumb-tack;
- }
-
- .icon-tip {
- @extend .fa-lightbulb-o;
- }
-
- .icon-warning {
- @extend .fa-exclamation-triangle;
- }
-
- .icon-caution {
- @extend .fa-fire;
- }
-
- .icon-important {
- @extend .fa-exclamation-circle;
- }
-}
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 767832e242c..e0b6da31261 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -24,12 +24,11 @@
border-radius: $border-radius-default;
font-size: $gl-font-size;
font-weight: $gl-font-weight-normal;
- padding: $gl-vert-padding $gl-btn-padding;
+ padding: $gl-bordered-btn-vert-padding $gl-bordered-btn-horz-padding;
&:focus,
&:active {
background-color: $btn-active-gray;
- box-shadow: $gl-btn-active-background;
}
}
@@ -50,77 +49,89 @@
color: $text;
}
- &:hover,
- &:focus {
- background-color: $hover-background;
- border-color: $hover-border;
- color: $hover-text;
+ &:not(:disabled):not(.disabled) {
+ &:hover {
+ box-shadow: inset 0 0 0 1px $hover-border, 0 2px 2px 0 $gl-btn-hover-shadow-light;
+ }
- > .icon {
- color: $hover-text;
+ &:focus {
+ box-shadow: inset 0 0 0 1px $hover-border, 0 0 4px 1px $blue-300;
}
- }
- &:focus {
- box-shadow: 0 0 4px 1px $blue-300;
- }
+ &:hover,
+ &:focus {
+ background-color: $hover-background;
+ border-color: $hover-border;
+ color: $hover-text;
- &:active {
- background-color: $active-background;
- border-color: $active-border;
- box-shadow: inset 0 2px 4px 0 rgba($black, 0.2);
- color: $active-text;
+ > .icon {
+ color: $hover-text;
+ }
+ }
- > .icon {
+ &:active,
+ &:active:focus {
+ background-color: $active-background;
+ border-color: $active-border;
+ box-shadow: inset 0 0 0 1px $hover-border, inset 0 2px 4px 0 rgba($black, 0.2);
color: $active-text;
- }
- &:focus {
- box-shadow: inset 0 2px 4px 0 rgba($black, 0.2);
+ > .icon {
+ color: $active-text;
+ }
}
}
}
-@mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color) {
+@mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color, $hover-shadow-color: $gl-btn-hover-shadow-dark) {
background-color: $light;
border-color: $border-light;
color: $color;
- &:hover,
- &:focus {
- background-color: $normal;
- border-color: $border-normal;
- color: $color;
- }
+ &:not(:disabled):not(.disabled) {
+ &:hover {
+ box-shadow: inset 0 0 0 1px $border-normal, 0 2px 2px 0 $hover-shadow-color;
+ }
- &:active,
- &.active {
- box-shadow: $gl-btn-active-background;
+ &:focus {
+ box-shadow: inset 0 0 0 1px $border-normal, 0 0 4px 1px $blue-300;
+ }
- background-color: $dark;
- border-color: $border-dark;
- color: $color;
+ &:hover,
+ &:focus {
+ background-color: $normal;
+ border-color: $border-normal;
+ color: $color;
+ }
+
+ &:active,
+ &.active {
+ box-shadow: inset 0 2px 4px 0 $gl-btn-hover-shadow-dark;
+ background-color: $dark;
+ border-color: $border-dark;
+ color: $color;
+ }
}
}
@mixin btn-green {
- @include btn-color($green-500, $green-600, $green-600, $green-700, $green-700, $green-800, $white-light);
+ @include btn-color($green-500, $green-600, $green-500, $green-700, $green-600, $green-800, $white-light);
}
@mixin btn-blue {
- @include btn-color($blue-500, $blue-600, $blue-600, $blue-700, $blue-700, $blue-800, $white-light);
+ @include btn-color($blue-500, $blue-600, $blue-500, $blue-700, $blue-600, $blue-800, $white-light);
}
@mixin btn-orange {
- @include btn-color($orange-500, $orange-600, $orange-600, $orange-700, $orange-700, $orange-800, $white-light);
+ @include btn-color($orange-500, $orange-600, $orange-500, $orange-700, $orange-600, $orange-800, $white-light);
}
@mixin btn-red {
- @include btn-color($red-500, $red-600, $red-600, $red-700, $red-700, $red-800, $white-light);
+ @include btn-color($red-500, $red-600, $red-500, $red-700, $red-600, $red-800, $white-light);
}
@mixin btn-white {
- @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-gray-dark, $gl-text-color);
+ @include btn-color($white-light, $gray-400, $gray-200, $gray-400, $gl-gray-200, $gray-500, $gl-text-color, $gl-btn-hover-shadow-light);
}
@mixin btn-with-margin {
@@ -149,23 +160,22 @@
color: $gl-text-color;
white-space: nowrap;
+ line-height: $gl-btn-line-height;
&:focus:active {
outline: 0;
}
- &.btn-sm {
- padding: 4px 10px;
- font-size: $gl-btn-small-font-size;
- line-height: $gl-btn-small-line-height;
- }
-
&.btn-xs {
- padding: 2px $gl-btn-padding;
font-size: $gl-btn-xs-font-size;
line-height: $gl-btn-xs-line-height;
}
+ &.btn-sm,
+ &.btn-xs {
+ padding: 3px $gl-bordered-btn-vert-padding;
+ }
+
&.btn-success,
&.btn-register {
@include btn-green;
@@ -239,7 +249,7 @@
&.dropdown-toggle {
.fa-caret-down {
- margin-left: 3px;
+ margin: 0;
}
}
@@ -272,10 +282,7 @@
}
svg {
- height: 15px;
- width: 15px;
- position: relative;
- top: 2px;
+ @include btn-svg;
}
svg,
@@ -330,6 +337,12 @@
&.btn-grouped {
@include btn-with-margin;
}
+
+ .btn {
+ border-radius: $border-radius-default;
+ font-size: $gl-font-size;
+ line-height: $gl-btn-line-height;
+ }
}
.btn-clipboard {
@@ -487,18 +500,25 @@
&:active,
&:focus {
color: $gl-text-color-secondary;
+ border: 1px solid $border-gray-normal-dashed;
background-color: $white-normal;
}
}
-.btn-svg svg {
- @include btn-svg;
+.btn-svg {
+ padding: $gl-bordered-btn-vert-padding;
+
+ svg {
+ @include btn-svg;
+ display: block;
+ }
}
// All disabled buttons, regardless of color, type, etc
%disabled {
background-color: $gray-light !important;
border-color: $gray-200 !important;
+ box-shadow: none;
color: $gl-text-color-disabled !important;
opacity: 1 !important;
cursor: default !important;
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index a12029d2419..05afcecca05 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -8,12 +8,6 @@
}
}
-@mixin chevron-active {
- .fa-chevron-down {
- color: $gray-darkest;
- }
-}
-
@mixin set-visible {
transform: translateY(0);
display: block;
@@ -49,7 +43,6 @@
.dropdown-toggle,
.dropdown-menu-toggle {
- @include chevron-active;
border-color: $gray-darkest;
}
@@ -63,13 +56,14 @@
margin-top: 11px;
}
-.dropdown-toggle {
- padding: 6px 8px 6px 10px;
+.dropdown-toggle,
+.confidential-merge-request-fork-group .dropdown-toggle {
+ padding: $gl-bordered-btn-vert-padding $gl-bordered-btn-horz-padding;
background-color: $white-light;
color: $gl-text-color;
font-size: 14px;
+ line-height: $gl-btn-line-height;
text-align: left;
- border: 1px solid $border-color;
border-radius: $border-radius-base;
white-space: nowrap;
@@ -102,10 +96,6 @@
padding-right: 25px;
}
- .fa {
- color: $gray-darkest;
- }
-
.fa-chevron-down {
font-size: $dropdown-chevron-size;
position: relative;
@@ -114,12 +104,10 @@
}
&:hover {
- @include chevron-active;
border-color: $gray-darkest;
}
&:focus:active {
- @include chevron-active;
border-color: $dropdown-toggle-active-border-color;
outline: 0;
}
@@ -287,8 +275,8 @@
list-style: none;
padding: 0 1px;
- a:not(.help-link),
- button:not(.btn),
+ a,
+ button,
.menu-item {
@include dropdown-link;
}
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 954551fef97..460d9ea9526 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -265,7 +265,6 @@ ul.controls {
}
.issuable-pipeline-broken a,
- .issuable-pipeline-status a,
.author-link {
display: flex;
}
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index f75e5b55506..fd9a75bc5b6 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -19,23 +19,31 @@
}
}
- // leave enough space for the close icon
.modal-title {
+ line-height: $gl-line-height-24;
+
+ // leave enough space for the close icon
&.mw-100,
&.w-100 {
- // after upgrading to Bootstrap 4.2 we can use $modal-header-padding-x here
- // https://github.com/twbs/bootstrap/pull/26976
- margin-right: -28px;
- padding-right: 28px;
+ margin-right: -$modal-header-padding-x;
+ padding-right: $modal-header-padding-x;
}
}
+
+ .close {
+ font-weight: $gl-font-weight-normal;
+ line-height: $gl-line-height;
+ color: $gray-900;
+ opacity: 1;
+ }
}
.modal-body {
background-color: $modal-body-bg;
line-height: $line-height-base;
position: relative;
- padding: #{3 * $grid-size} #{2 * $grid-size};
+ min-height: $modal-body-height;
+ padding: #{2 * $grid-size} #{6 * $grid-size} #{2 * $grid-size} #{2 * $grid-size};
text-align: left;
white-space: normal;
@@ -52,12 +60,20 @@
display: flex;
flex-direction: row;
+ .btn {
+ margin: 0;
+ }
+
.btn + .btn:not(.dropdown-toggle-split),
.btn + .btn-group,
.btn-group + .btn {
margin-left: $grid-size;
}
+ .btn-group .btn + .btn {
+ margin-left: -1px;
+ }
+
@include media-breakpoint-down(xs) {
flex-direction: column;
@@ -67,6 +83,11 @@
margin-left: 0;
margin-top: $grid-size;
}
+
+ .btn-group .btn + .btn {
+ margin-left: -1px;
+ margin-top: 0;
+ }
}
}
@@ -85,9 +106,23 @@ body.modal-open {
.modal {
background-color: $black-transparent;
- @include media-breakpoint-up(md) {
+ .modal-content {
+ border-radius: $modal-border-radius;
+
+ > :first-child {
+ border-top-left-radius: $modal-border-radius;
+ border-top-right-radius: $modal-border-radius;
+ }
+
+ > :last-child {
+ border-bottom-left-radius: $modal-border-radius;
+ border-bottom-right-radius: $modal-border-radius;
+ }
+ }
+
+ @include media-breakpoint-up(sm) {
.modal-dialog {
- margin: 30px auto;
+ margin: 64px auto;
}
}
}
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 7baab478034..c201605e83d 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -1,5 +1,5 @@
/**
- * Apply Markdown typography
+ * Apply Markup (Markdown/AsciiDoc) typography
*
*/
.md:not(.use-csslab) {
@@ -245,6 +245,21 @@
}
}
+ ul.checklist,
+ ul.none,
+ ol.none,
+ ul.no-bullet,
+ ol.no-bullet,
+ ol.unnumbered,
+ ul.unstyled,
+ ol.unstyled {
+ list-style-type: none;
+
+ li {
+ margin-left: 0;
+ }
+ }
+
li {
line-height: 1.6em;
margin-left: 25px;
@@ -321,6 +336,54 @@
visibility: visible;
}
}
+
+ .big {
+ font-size: larger;
+ }
+
+ .small {
+ font-size: smaller;
+ }
+
+ .underline {
+ text-decoration: underline;
+ }
+
+ .overline {
+ text-decoration: overline;
+ }
+
+ .line-through {
+ text-decoration: line-through;
+ }
+
+ .admonitionblock td.icon {
+ width: 1%;
+
+ [class^='fa icon-'] {
+ @extend .fa-2x;
+ }
+
+ .icon-note {
+ @extend .fa-thumb-tack;
+ }
+
+ .icon-tip {
+ @extend .fa-lightbulb-o;
+ }
+
+ .icon-warning {
+ @extend .fa-exclamation-triangle;
+ }
+
+ .icon-caution {
+ @extend .fa-fire;
+ }
+
+ .icon-important {
+ @extend .fa-exclamation-circle;
+ }
+ }
}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index b6a24247d40..047a9799c3f 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -405,6 +405,8 @@ $tanuki-yellow: #fca326;
*/
$green-500-focus: rgba($green-500, 0.4);
$gl-btn-active-background: rgba(0, 0, 0, 0.16);
+$gl-btn-hover-shadow-dark: rgba($black, 0.2);
+$gl-btn-hover-shadow-light: rgba($black, 0.1);
$gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background;
/*
@@ -481,6 +483,8 @@ $gl-btn-padding: 10px;
$gl-btn-line-height: 16px;
$gl-btn-vert-padding: 8px;
$gl-btn-horz-padding: 12px;
+$gl-bordered-btn-vert-padding: $gl-btn-vert-padding - 1px;
+$gl-bordered-btn-horz-padding: $gl-btn-horz-padding - 1px;
$gl-btn-small-font-size: 13px;
$gl-btn-small-line-height: 18px;
$gl-btn-xs-font-size: 13px;
@@ -507,7 +511,6 @@ $toast-height: 48px;
$toast-max-width: 586px;
$toast-padding-right: 42px;
$toast-default-margin: 8px;
-$toast-action-margin-left: 16px;
$toast-background-opacity: 0.95;
/*
@@ -805,8 +808,9 @@ $border-color-settings: #e1e1e1;
/*
Modals
*/
-$modal-body-height: 134px;
+$modal-body-height: 80px;
$modal-border-color: #e9ecef;
+$modal-border-radius: 0.25rem;
$priority-label-empty-state-width: 114px;
View Lorry Controller Status