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.scss3
-rw-r--r--app/assets/stylesheets/framework/awards.scss108
-rw-r--r--app/assets/stylesheets/framework/blocks.scss2
-rw-r--r--app/assets/stylesheets/framework/buttons.scss47
-rw-r--r--app/assets/stylesheets/framework/common.scss5
-rw-r--r--app/assets/stylesheets/framework/diffs.scss24
-rw-r--r--app/assets/stylesheets/framework/dropdowns.scss59
-rw-r--r--app/assets/stylesheets/framework/forms.scss14
-rw-r--r--app/assets/stylesheets/framework/header.scss15
-rw-r--r--app/assets/stylesheets/framework/lists.scss2
-rw-r--r--app/assets/stylesheets/framework/mixins.scss18
-rw-r--r--app/assets/stylesheets/framework/modal.scss1
-rw-r--r--app/assets/stylesheets/framework/secondary_navigation_elements.scss8
-rw-r--r--app/assets/stylesheets/framework/selects.scss288
-rw-r--r--app/assets/stylesheets/framework/tables.scss43
-rw-r--r--app/assets/stylesheets/framework/toggle.scss8
-rw-r--r--app/assets/stylesheets/framework/typography.scss11
-rw-r--r--app/assets/stylesheets/framework/variables.scss1
18 files changed, 168 insertions, 489 deletions
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 196fb3a7088..a93c70c75d3 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -103,7 +103,8 @@
@include transition(color);
}
-a {
+a,
+.notification-dot {
@include transition(background-color, color, border);
}
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index 4f09f1a394b..d9ad4992458 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -253,3 +253,111 @@
vertical-align: middle;
}
}
+
+
+// The following encompasses the "add reaction" button redesign to
+// align properly within GitLab UI's gl-button. The implementation
+// above will be deprecated once all instances of "award emoji" are
+// migrated to Vue.
+
+.gl-button .award-emoji-block gl-emoji {
+ top: -1px;
+ margin-top: -1px;
+ margin-bottom: -1px;
+}
+
+.add-reaction-button {
+ position: relative;
+
+ // This forces the height and width of the inner content to match
+ // other gl-buttons despite all child elements being set to
+ // `position:absolute`
+ &::after {
+ content: '\a0';
+ width: 1em;
+ }
+
+ .reaction-control-icon {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+
+ // center the icon vertically and horizontally within the button
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ @include transition(opacity, transform);
+
+ .gl-icon {
+ height: $default-icon-size;
+ width: $default-icon-size;
+ }
+ }
+
+ .reaction-control-icon-neutral {
+ opacity: 1;
+ }
+
+ .reaction-control-icon-positive,
+ .reaction-control-icon-super-positive {
+ opacity: 0;
+ }
+
+ &:hover,
+ &.active,
+ &:active,
+ &.is-active {
+ // extra specificty added to override another selector
+ .reaction-control-icon .gl-icon {
+ color: $blue-500;
+ transform: scale(1.15);
+ }
+
+ .reaction-control-icon-neutral {
+ opacity: 0;
+ }
+ }
+
+ &:hover {
+ .reaction-control-icon-positive {
+ opacity: 1;
+ }
+ }
+
+ &.active,
+ &:active,
+ &.is-active {
+ .reaction-control-icon-positive {
+ opacity: 0;
+ }
+
+ .reaction-control-icon-super-positive {
+ opacity: 1;
+ }
+ }
+
+ &.disabled {
+ cursor: default;
+
+ &:hover,
+ &:focus,
+ &:active {
+ .reaction-control-icon .gl-icon {
+ color: inherit;
+ transform: scale(1);
+ }
+
+ .reaction-control-icon-neutral {
+ opacity: 1;
+ }
+
+ .reaction-control-icon-positive,
+ .reaction-control-icon-super-positive {
+ opacity: 0;
+ }
+ }
+ }
+}
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index f42e500efa8..bfa4a640fe2 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -73,7 +73,7 @@
&.content-component-block {
padding: 11px 0;
- background-color: $white;
+ background-color: $body-bg;
}
.title {
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index a8cc685d880..182c58c3931 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -166,8 +166,7 @@
line-height: $gl-btn-xs-line-height;
}
- &.btn-success,
- &.btn-register {
+ &.btn-success {
@include btn-green;
}
@@ -176,7 +175,6 @@
@include btn-outline($white, $green-600, $green-500, $green-100, $green-700, $green-500, $green-200, $green-600, $green-800);
}
- &.btn-remove,
&.btn-danger {
@include btn-outline($white, $red-500, $red-500, $red-100, $red-700, $red-500, $red-200, $red-600, $red-800);
}
@@ -200,18 +198,11 @@
@include btn-orange;
}
- &.btn-close,
- &.btn-close-color {
+ &.btn-close {
@include btn-outline($white, $orange-500, $orange-500, $orange-50, $orange-600, $orange-600, $orange-100, $orange-700, $orange-700);
}
- &.btn-spam {
- @include btn-outline($white, $red-500, $red-500, $red-100, $red-700, $red-500, $red-200, $red-600, $red-800);
- }
-
- &.btn-danger,
- &.btn-remove,
- &.btn-red {
+ &.btn-danger {
@include btn-red;
}
@@ -219,11 +210,6 @@
float: right;
}
- &.btn-reopen,
- .btn-reopen-color {
- /* should be same as parent class for now */
- }
-
&.btn-grouped {
@include btn-with-margin;
}
@@ -232,17 +218,6 @@
color: $gray-700;
}
- .fa-caret-down,
- .fa-chevron-down {
- margin-left: 5px;
- }
-
- &.dropdown-toggle {
- .fa-caret-down {
- margin-left: 3px;
- }
- }
-
&.btn-text-field {
width: 100%;
text-align: left;
@@ -276,11 +251,8 @@
width: 15px;
}
- svg,
- .fa {
- &:not(:last-child) {
- margin-right: 5px;
- }
+ svg:not(:last-child) {
+ margin-right: 5px;
}
}
@@ -370,24 +342,15 @@
.btn-loading {
&:not(.disabled) {
- .fa,
.spinner {
display: none;
}
}
-
- .fa {
- margin-right: 5px;
- }
}
.btn-build {
margin-left: 10px;
- i {
- color: $gl-text-color-secondary;
- }
-
svg {
fill: $gl-text-color-secondary;
}
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index deb2d6c4641..3b59c028437 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -135,7 +135,6 @@ hr {
text-overflow: ellipsis;
white-space: nowrap;
- > div:not(.block):not(.select2-display-none),
.str-truncated {
display: inline;
}
@@ -389,11 +388,7 @@ img.emoji {
🚨 Do not use these classes — they are deprecated and being removed. 🚨
See https://gitlab.com/gitlab-org/gitlab/-/issues/217418 for more details.
**/
-.prepend-top-15 { margin-top: 15px; }
.prepend-top-20 { margin-top: 20px; }
-.prepend-left-15 { margin-left: 15px; }
-.prepend-left-20 { margin-left: 20px; }
-.append-right-20 { margin-right: 20px; }
.append-bottom-20 { margin-bottom: 20px; }
.ml-10 { margin-left: 4.5rem; }
.inline { display: inline-block; }
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index e16ab5ee72f..cf9363b77be 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -2,10 +2,6 @@
.diff-file {
margin-bottom: $gl-padding;
- &.conflict {
- border-top: 1px solid $border-color;
- }
-
&.has-body {
.file-title {
box-shadow: 0 -2px 0 0 var(--white);
@@ -60,7 +56,7 @@
left: -11px;
width: 10px;
height: calc(100% + 1px);
- background: $white;
+ background: $body-bg;
pointer-events: none;
}
@@ -601,10 +597,6 @@ table.code {
.diff-grid-right {
display: grid;
grid-template-columns: 50px 8px 1fr;
-
- .diff-td:nth-child(2) {
- display: none;
- }
}
.diff-grid-comments {
@@ -635,20 +627,6 @@ table.code {
.diff-grid-left,
.diff-grid-right {
grid-template-columns: 50px 50px 8px 1fr;
-
- .diff-td:nth-child(2) {
- display: block;
- }
- }
-
- .diff-grid-left .old:nth-child(1) [data-linenumber],
- .diff-grid-right .new:nth-child(2) [data-linenumber] {
- display: inline;
- }
-
- .diff-grid-left .old:nth-child(2) [data-linenumber],
- .diff-grid-right .new:nth-child(1) [data-linenumber] {
- display: none;
}
}
}
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 2094c824286..e2335c184b0 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -16,12 +16,6 @@
}
}
-@mixin chevron-active {
- .fa-chevron-down {
- color: $gray-darkest;
- }
-}
-
@mixin set-visible {
transform: translateY(0);
display: block;
@@ -56,7 +50,6 @@
.dropdown-toggle,
.dropdown-menu-toggle {
- @include chevron-active;
border-color: $gray-darkest;
}
@@ -114,20 +107,11 @@
color: $gray-darkest;
}
- .fa-chevron-down {
- font-size: $dropdown-chevron-size;
- position: relative;
- top: -2px;
- margin-left: 5px;
- }
-
&:hover {
- @include chevron-active;
border-color: $gray-darkest;
}
&:focus:active {
- @include chevron-active;
border-color: $dropdown-toggle-active-border-color;
outline: 0;
}
@@ -143,18 +127,6 @@
.fa {
position: absolute;
-
- &.fa-spinner {
- font-size: 16px;
- margin-top: -3px;
- }
- }
-
- .fa-chevron-down,
- .fa-spinner {
- position: absolute;
- top: 11px;
- right: 8px;
}
.spinner {
@@ -369,7 +341,8 @@
}
.droplab-dropdown {
- .dropdown-toggle > i {
+ .dropdown-toggle > i,
+ .dropdown-toggle > svg {
pointer-events: none;
}
@@ -532,29 +505,27 @@
&.is-active {
color: $gl-text-color;
- &::before {
- position: absolute;
- left: 16px;
- top: 16px;
- transform: translateY(-50%);
- font: normal normal normal 14px/1 FontAwesome;
- font-size: inherit;
- text-rendering: auto;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
&.dropdown-menu-user-link::before {
top: 50%;
}
}
&.is-indeterminate::before {
- content: '\f068';
+ position: absolute;
+ left: 16px;
+ top: 16px;
+ transform: translateY(-50%);
+ font-style: normal;
+ font-size: inherit;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: '—';
}
- &.is-active::before {
- content: '\f00c';
+ &.is-active {
+ /* stylelint-disable-next-line function-url-quotes */
+ background: url(asset_path('checkmark.png')) no-repeat 14px 8px;
}
}
}
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 7be676ed83c..6e47fef02d5 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -133,11 +133,6 @@ label {
}
.input-group {
- .select2-container {
- display: table-cell;
- max-width: 180px;
- }
-
.input-group-prepend,
.input-group-append {
background-color: $input-group-addon-bg;
@@ -213,15 +208,6 @@ label {
position: relative;
}
-.select-wrapper > .fa-chevron-down {
- position: absolute;
- font-size: 10px;
- right: 10px;
- top: 12px;
- color: $gray-darkest;
- pointer-events: none;
-}
-
.input-icon-wrapper > .input-icon-right {
position: absolute;
right: 0.8em;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 52319d9658b..a6a01c7b090 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -384,6 +384,10 @@
text-overflow: ellipsis;
flex: 0 1 auto;
}
+
+ &:last-of-type > .breadcrumbs-list-angle {
+ display: none;
+ }
}
}
@@ -556,12 +560,17 @@
border: 1px solid $gray-normal;
}
-.header-user-notification-dot {
+.notification-dot {
background-color: $orange-300;
height: 12px;
width: 12px;
- right: 8px;
- top: -8px;
+ margin-top: -15px;
+ pointer-events: none;
+ visibility: hidden;
+}
+
+.with-notifications .notification-dot {
+ visibility: visible;
}
.with-performance-bar .navbar-gitlab {
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 2464ea3607b..b0334da6943 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -234,6 +234,8 @@ ul.content-list {
}
}
+ul.content-list.issuable-list > li,
+ul.content-list.todos-list > li,
.card > .content-list > li {
padding: $gl-padding-top $gl-padding;
}
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 20d44b71bf6..7ba9236b833 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -146,7 +146,11 @@
}
@mixin green-status-color {
- @include status-color($green-100, $green-500, $green-700);
+ @include status-color(
+ var(--green-100, $green-100),
+ var(--green-500, $green-500),
+ var(--green-700, $green-700)
+ );
}
@mixin fade($gradient-direction, $gradient-color) {
@@ -169,7 +173,6 @@
transition-duration: 0.3s;
}
- .fa,
svg {
position: relative;
top: 5px;
@@ -255,9 +258,9 @@
@mixin build-trace-bar($height) {
height: $height;
min-height: $height;
- background: $gray-light;
- border: 1px solid $border-color;
- color: $gl-text-color;
+ background: var(--gray-50, $gray-50);
+ border: 1px solid var(--border-color, $border-color);
+ color: var(--gl-text-color, $gl-text-color);
padding: $grid-size;
}
@@ -361,11 +364,6 @@
color: $gray-400;
fill: $gray-400;
- .fa {
- position: relative;
- font-size: 16px;
- }
-
svg {
@include btn-svg;
margin: 0;
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index 372e3bed6e0..2dbeacb0f8c 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -91,6 +91,7 @@
body.modal-open {
overflow: hidden;
+ padding-right: 0 !important;
}
.modal-no-backdrop {
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 3e218de6af9..2ad9a9d2dff 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -276,7 +276,7 @@
@include fade(left, $gray-light);
right: -5px;
- .fa {
+ svg {
right: -7px;
}
}
@@ -286,7 +286,7 @@
left: -5px;
text-align: center;
- .fa {
+ svg {
left: -7px;
}
}
@@ -337,7 +337,7 @@
@include fade(left, $white);
right: -5px;
- .fa {
+ svg {
right: -7px;
}
}
@@ -346,7 +346,7 @@
@include fade(right, $white);
left: -5px;
- .fa {
+ svg {
left: -7px;
}
}
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 86a5aa1a16e..d8ce6826fc1 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -1,275 +1,3 @@
-/** Select2 selectbox style override **/
-.select2-container {
- width: 100% !important;
-
- &.input-md,
- &.input-lg {
- display: block;
- }
-}
-
-.select2-container,
-.select2-container.select2-drop-above {
- .select2-choice {
- background: $white;
- color: $gl-text-color;
- border-color: $input-border;
- height: 34px;
- padding: $gl-vert-padding $gl-input-padding;
- font-size: $gl-font-size;
- line-height: 1.42857143;
- border-radius: $border-radius-base;
-
- .select2-arrow {
- background-image: none;
- background-color: transparent;
- border: 0;
- padding-top: 12px;
- padding-right: 20px;
- font-size: 10px;
-
- b {
- display: none;
- }
-
- &::after {
- content: '\f078';
- position: absolute;
- z-index: 1;
- text-align: center;
- pointer-events: none;
- box-sizing: border-box;
- color: $gray-darkest;
- display: inline-block;
- font: normal normal normal 14px/1 FontAwesome;
- font-size: inherit;
- text-rendering: auto;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- }
-
- .select2-chosen {
- margin-right: 15px;
- }
-
- &:hover {
- border-color: $gray-darkest;
- color: $gl-text-color;
- }
- }
-
- // Essentially we’re doing @include form-control-focus here (from
- // bootstrap/scss/mixins/_forms.scss), except that the bootstrap mixin adds a
- // `&:focus` selector and we’re never actually focusing the .select2-choice
- // link nor the .select2-container, the Select2 library focuses an off-screen
- // .select2-focusser element instead.
- &.select2-container-active:not(.select2-dropdown-open) {
- .select2-choice {
- color: $input-focus-color;
- background-color: $input-focus-bg;
- border-color: $input-focus-border-color;
- outline: 0;
- }
-
- // Reusable focus “glow” box-shadow
- @mixin form-control-focus-glow {
- @if $enable-shadows {
- box-shadow: $input-box-shadow, $input-focus-box-shadow;
- } @else {
- box-shadow: $input-focus-box-shadow;
- }
- }
-
- // Apply the focus “glow” shadow to the .select2-container if it also has
- // the .block-truncated class as that applies an overflow: hidden, thereby
- // hiding the glow of the nested .select2-choice element.
- &.block-truncated {
- @include form-control-focus-glow;
- }
-
- // Apply the glow directly to the .select2-choice link if we’re not
- // block-truncating the container.
- &:not(.block-truncated) .select2-choice {
- @include form-control-focus-glow;
- }
- }
-
- &.is-invalid {
- ~ .invalid-feedback {
- display: block;
- }
-
- .select2-choices,
- .select2-choice {
- border-color: $red-500;
- }
- }
-}
-
-.select2-drop,
-.select2-drop.select2-drop-above {
- background: $white;
- box-shadow: 0 2px 4px $dropdown-shadow-color;
- border-radius: $border-radius-base;
- border: 1px solid $border-color;
- min-width: 175px;
- color: $gl-text-color;
- z-index: 999;
-
- .modal-open & {
- z-index: $zindex-modal + 200;
- }
-}
-
-.select2-drop-mask {
- z-index: 998;
-
- .modal-open & {
- z-index: $zindex-modal + 100;
- }
-}
-
-.select2-drop.select2-drop-above.select2-drop-active {
- border-top: 1px solid $border-color;
- margin-top: -6px;
-}
-
-.select2-container-active {
- .select2-choice,
- .select2-choices {
- box-shadow: none;
- }
-}
-
-.select2-dropdown-open,
-.select2-dropdown-open.select2-drop-above {
- .select2-choice {
- border-color: $gray-darkest;
- outline: 0;
- }
-}
-
-.select2-container-multi {
- .select2-choices {
- border-radius: $border-radius-default;
- border-color: $input-border;
- background: none;
-
- .select2-search-field input {
- padding: 5px $gl-input-padding;
- height: auto;
- font-family: inherit;
- font-size: inherit;
- }
-
- .select2-search-choice {
- margin: 5px 0 0 8px;
- box-shadow: none;
- border-color: $input-border;
- color: $gl-text-color;
- line-height: 15px;
- background-color: $gray-light;
- background-image: none;
- padding: 3px 18px 3px 5px;
-
- .select2-search-choice-close {
- top: 5px;
- left: initial;
- right: 3px;
- }
-
- &.select2-search-choice-focus {
- border-color: $gl-text-color;
- }
- }
- }
-}
-
-.select2-drop-active {
- margin-top: $dropdown-vertical-offset;
- font-size: 14px;
-
- .select2-results {
- max-height: 350px;
- }
-}
-
-.select2-search {
- padding: $grid-size;
-
- .select2-drop-auto-width & {
- padding: $grid-size;
- }
-
- input {
- padding: $grid-size;
- background: transparent image-url('select2.png');
- color: $gl-text-color;
- background-clip: content-box;
- background-origin: content-box;
- background-repeat: no-repeat;
- background-position: right 0 bottom 0 !important;
- border: 1px solid $input-border;
- border-radius: $border-radius-default;
- line-height: 16px;
- transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-
- &:focus {
- border-color: $blue-300;
- }
-
- &.select2-active {
- background-color: $white;
- background-image: image-url('select2-spinner.gif') !important;
- background-origin: content-box;
- background-repeat: no-repeat;
- background-position: right 6px center !important;
- background-size: 16px 16px !important;
- }
- }
-
- + .select2-results {
- padding-top: 0;
- }
-}
-
-.select2-results {
- margin: 0;
- padding: #{$gl-padding / 2} 0;
-
- .select2-no-results,
- .select2-searching,
- .select2-ajax-error,
- .select2-selection-limit {
- background: transparent;
- padding: #{$gl-padding / 2} $gl-padding;
- }
-
- .select2-result-label,
- .select2-more-results {
- padding: #{$gl-padding / 2} $gl-padding;
- }
-
- .select2-highlighted {
- background: transparent;
- color: $gl-text-color;
-
- .select2-result-label {
- background: $gray-darker;
- }
- }
-
- .select2-result {
- padding: 0 1px;
- }
-
- li.select2-result-with-children > .select2-result-label {
- font-weight: $gl-font-weight-bold;
- color: $gl-text-color;
- }
-}
-
.ajax-users-select {
width: 400px;
@@ -282,14 +10,6 @@
}
}
-.select2-highlighted {
- .group-result {
- .group-path {
- color: $gray-700;
- }
- }
-}
-
.group-result {
.group-image {
float: left;
@@ -345,11 +65,3 @@
.ajax-users-dropdown {
min-width: 250px !important;
}
-
-.select2-result-selectable,
-.select2-result-unselectable {
- .select2-match {
- font-weight: $gl-font-weight-bold;
- text-decoration: none;
- }
-}
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 39d9e9a77f9..89713fdbbea 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -184,46 +184,3 @@ table {
border-top: 0;
}
}
-
-.vulnerability-list {
- @media (min-width: $breakpoint-sm) {
- .checkbox {
- padding-left: $gl-spacing-scale-4;
- padding-right: 0;
- width: 1px;
-
- + td,
- + th {
- padding-left: $gl-spacing-scale-4;
- }
- }
-
- .detected {
- width: 9%;
- }
-
- .status {
- width: 8%;
- }
-
- .severity {
- width: 10%;
- }
-
- .description {
- max-width: 0;
- }
-
- .identifier {
- width: 16%;
- }
-
- .scanner {
- width: 10%;
- }
-
- .activity {
- width: 5%;
- }
- }
-}
diff --git a/app/assets/stylesheets/framework/toggle.scss b/app/assets/stylesheets/framework/toggle.scss
index 054280f3321..fd888fdec65 100644
--- a/app/assets/stylesheets/framework/toggle.scss
+++ b/app/assets/stylesheets/framework/toggle.scss
@@ -4,22 +4,22 @@
* @usage
* ### Active and Inactive text should be provided as data attributes:
* <button type="button" class="project-feature-toggle" data-enabled-text="Enabled" data-disabled-text="Disabled">
-* <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
+* <span class="gl-spinner loading-icon hidden" aria-label="Loading"></span>
* </button>
* ### Checked should have `is-checked` class
* <button type="button" class="project-feature-toggle is-checked" data-enabled-text="Enabled" data-disabled-text="Disabled">
-* <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
+* <span class="gl-spinner loading-icon hidden" aria-label="Loading"></span>
* </button>
* ### Disabled should have `is-disabled` class
* <button type="button" class="project-feature-toggle is-disabled" data-enabled-text="Enabled" data-disabled-text="Disabled" disabled="true">
-* <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
+* <span class="gl-spinner loading-icon hidden" aria-label="Loading"></span>
* </button>
* ### Loading should have `is-loading` and an icon with `loading-icon` class
* <button type="button" class="project-feature-toggle is-loading" data-enabled-text="Enabled" data-disabled-text="Disabled">
-* <i class="fa fa-spinner fa-spin loading-icon"></i>
+* <span class="gl-spinner loading-icon" aria-label="Loading"></span>
* </button>
*/
.project-feature-toggle {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 3d09edfe181..1a568bb41a5 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -1,3 +1,6 @@
+// Custom Fontawesome icons
+@import 'fontawesome_custom';
+
/**
* Apply Markup (Markdown/AsciiDoc) typography
*
@@ -432,11 +435,11 @@
&::before {
margin-right: 4px;
- font: normal normal normal 14px/1 FontAwesome;
+ font-style: normal;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
- content: '\f0c6';
+ content: '📎';
}
&.no-attachment-icon {
@@ -573,10 +576,6 @@ body {
font-size: 1.25em;
font-weight: $gl-font-weight-bold;
- &:last-child {
- margin-bottom: 0;
- }
-
&.with-button {
line-height: 34px;
}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index f0b1e859139..808813599c5 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -468,7 +468,6 @@ $gl-line-height-20: 20px;
$gl-line-height-24: 24px;
$gl-line-height-14: 14px;
-$issue-box-upcoming-bg: #8f8f8f;
$pages-group-name-color: #4c4e54;
/*