diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss
index e8ed4971ea5c1ace7331f5f8b027895ab8c6aaa8..04166eab32eaf0453869881b4de147fbd80b84e9 100644
--- a/app/assets/stylesheets/components/whats_new.scss
+++ b/app/assets/stylesheets/components/whats_new.scss
@@ -1,5 +1,5 @@
.whats-new-drawer {
- @include gl-shadow-none;
+ box-shadow: none;
overflow-y: hidden;
width: 500px;
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 07fdda61e40560eee5bef6b8f89ef46ac34ca636..3705a8d5064eac4b481ba88ad8a80b2f1ff1b625 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -478,7 +478,7 @@ span.idiff {
overflow: hidden;
.tree-list-parent::before {
- @include gl-content-empty;
+ content: '';
position: absolute;
z-index: 1;
pointer-events: none;
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 7187d2c399fa14f3666a0c478e77de73ffce7e6e..4ba7da46aa62d321584ff2942feaebdd23021983 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -296,7 +296,7 @@ label {
border-color: var(--gray-700, $gray-700);
input {
- @include gl-shadow-none;
+ box-shadow: none;
}
}
diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss
index aacc6667f17507ee449716a903da6c516cf1c9a9..4fdda1e6e27ce6681de7ffeb8e3326e76bbb8364 100644
--- a/app/assets/stylesheets/framework/highlight.scss
+++ b/app/assets/stylesheets/framework/highlight.scss
@@ -51,7 +51,7 @@
font-family: $monospace-font;
white-space: nowrap;
display: flex;
- @include gl-justify-content-end;
+ justify-content: flex-end;
i,
svg {
@@ -115,12 +115,12 @@ td.line-numbers {
.line-numbers:not(.line-links) a:focus-within::before,
.line-links:hover a::before,
.line-links:focus-within a::before {
- @include gl-visibility-visible;
+ visibility: visible;
}
.file-line-num {
- @include gl-justify-content-end;
+ justify-content: flex-end;
flex-grow: 1;
padding-right: $gl-spacing-scale-3;
}
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index d5d29cb82179d07e40bc6fbcd3c019aa2b9b1c90..6abaa6e8df53b9a57cd9e827c02674b16c139220 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -48,7 +48,7 @@
// - app/helpers/ci/status_helper.rb
.ci-icon-gl-icon-wrapper {
border-radius: $gl-border-radius-full;
- @include gl-line-height-0;
+ line-height: 0;
}
// Makes the borderless CI icons appear slightly bigger than the default 16px.
diff --git a/app/assets/stylesheets/framework/labels.scss b/app/assets/stylesheets/framework/labels.scss
index 045c825ad07ddc81fedc7f5f189e012274f7e1cb..9a9edbeb91a1980766f7a9ad4c09860c13764ed5 100644
--- a/app/assets/stylesheets/framework/labels.scss
+++ b/app/assets/stylesheets/framework/labels.scss
@@ -14,11 +14,11 @@
// GitLab UI's label component
.gl-label,
.gl-label-sm {
- @include gl-vertical-align-bottom;
+ vertical-align: bottom;
&:focus:active {
- @include gl-reset-color;
- @include gl-shadow-none;
+ color: inherit;
+ box-shadow: none;
outline: none;
}
@@ -51,6 +51,6 @@
}
.md code {
- @include gl-vertical-align-bottom;
+ vertical-align: bottom;
}
}
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index 4547d6a314f5313556f88bea5ac72ab4a6891f3e..f53e275c63d9cb0e3f8275bd8090362c5e0cd3ed 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -134,8 +134,8 @@ body {
.gl--flex-full {
display: flex;
- @include gl-align-items-stretch;
- @include gl-overflow-hidden;
+ align-items: stretch;
+ overflow: hidden;
}
.fullscreen-layout {
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index cd8c69f5be2783b734f221dca33074bf98f85314..44a52fedc6d4a54f5ee4f6f8d006c852d100d8ac 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -125,7 +125,7 @@
}
.suggestions.md > .markdown-code-block {
- @include gl-static;
+ position: static;
}
.md-suggestion-header {
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 3f3286cef1d9afe220a293810785de8fd1c17403..0b8d155b510ef04c7e0155ff8e5c2b24ec8b07a4 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -47,7 +47,7 @@
.dropdown-menu {
width: 100%;
- @include gl-max-w-none;
+ max-width: none;
}
.gl-dropdown-item-check-icon {
diff --git a/app/assets/stylesheets/framework/source_editor.scss b/app/assets/stylesheets/framework/source_editor.scss
index 0d235e17191328128467e6b0e845a1297fa1adc3..11edc220753970eeeddea91479097353f375f108 100644
--- a/app/assets/stylesheets/framework/source_editor.scss
+++ b/app/assets/stylesheets/framework/source_editor.scss
@@ -1,7 +1,7 @@
[data-editor-loading] {
position: relative;
display: flex;
- @include gl-justify-content-center;
+ justify-content: center;
align-items: center;
z-index: 0;
@@ -29,7 +29,7 @@
display: flex;
.md {
- @include gl-overflow-scroll;
+ overflow: scroll;
padding-left: $gl-spacing-scale-6;
padding-right: $gl-spacing-scale-6;
padding-top: $gl-spacing-scale-4;
@@ -38,7 +38,7 @@
}
.gl-source-editor {
- @include gl-order-n1;
+ order: -1;
border-radius: 0 0 $border-radius-default $border-radius-default;
}
}
@@ -70,11 +70,11 @@
.margin-view-overlays {
.line-numbers {
display: flex;
- @include gl-justify-content-end;
+ justify-content: flex-end;
position: relative;
&::before {
- @include gl-visibility-hidden;
+ visibility: hidden;
align-self: center;
background-color: $gray-400;
margin-right: $gl-spacing-scale-2;
@@ -88,16 +88,16 @@
}
&:hover {
- @include gl-text-decoration-underline;
+ text-decoration: underline;
cursor: pointer !important;
}
&:hover::before {
- @include gl-visibility-visible;
+ visibility: visible;
}
&:focus::before {
- @include gl-visibility-visible;
+ visibility: visible;
outline: auto;
}
@@ -112,11 +112,11 @@
// Remove custom focus from element
.inputarea {
- @include gl-shadow-none;
+ box-shadow: none;
}
}
.active-line-text {
background-color: $orange-600;
- @include gl-opacity-3;
+ opacity: 0.3;
}
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index ba4e7b612eedde64f12a1c6c1a862b523585b955..0343f8eb3d9c1ef1633c368d3bd3e4cd4b92e363 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -245,7 +245,7 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
.user-bar-dropdown-toggle {
padding: $gl-spacing-scale-2;
- @include gl-border-none;
+ border-style: none;
&[aria-expanded='true'] {
background-color: var(--super-sidebar-user-bar-button-hover-bg);
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index a0d27d682aec8d024c0698358b9548196af40d1b..714395efbc077332d2c5f85d49bf14f687a12e90 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -146,7 +146,7 @@
p {
line-height: 1.5;
- @include gl-reset-color;
+ color: inherit;
&:last-child {
margin: 0;
diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss
index 36b66f8d00da34d1db8be6d3e896bd513b2ddc85..d671b029e716aff0c42969a6e9b21c79696d12ab 100644
--- a/app/assets/stylesheets/highlight/common.scss
+++ b/app/assets/stylesheets/highlight/common.scss
@@ -112,7 +112,7 @@
@mixin line-link($color, $icon) {
&::before {
- @include gl-visibility-hidden;
+ visibility: hidden;
align-self: center;
margin-right: $gl-spacing-scale-1;
width: $gl-spacing-scale-5;
diff --git a/app/assets/stylesheets/page_bundles/alert_management_details.scss b/app/assets/stylesheets/page_bundles/alert_management_details.scss
index bd81773d923c28787efd111a4d75f8263bc1815d..e0025499aeb7c261c6c9671f646d32b8a32f7d83 100644
--- a/app/assets/stylesheets/page_bundles/alert_management_details.scss
+++ b/app/assets/stylesheets/page_bundles/alert_management_details.scss
@@ -8,7 +8,7 @@
}
.toggle-sidebar-mobile-button {
- @include gl-right-0;
+ right: 0;
}
.dropdown-menu-toggle {
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
index 1b9498000aeac5c59137ec6ffecec29179e9159e..c4746750cad6b161e62d4541f2de80941159cd2e 100644
--- a/app/assets/stylesheets/page_bundles/boards.scss
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -143,7 +143,7 @@
.user-avatar-link {
&:not(:last-of-type) {
- @include gl-mr-n3;
+ margin-right: -$gl-spacing-scale-3;
}
}
diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss
index 4f6321cf2cd5c103532b0452fba09178a53347f7..47b1f413e10472d49776cb4642c120bb729e3f8c 100644
--- a/app/assets/stylesheets/page_bundles/build.scss
+++ b/app/assets/stylesheets/page_bundles/build.scss
@@ -85,7 +85,7 @@
top: $calc-application-header-height;
@include media-breakpoint-up(lg) {
- @include gl-border-l-0;
+ border-left-width: 0;
}
&.right-sidebar-collapsed {
diff --git a/app/assets/stylesheets/page_bundles/design_management.scss b/app/assets/stylesheets/page_bundles/design_management.scss
index e17640167b77e92b795152aea15b1908c15bd774..4e95a1b26ff3b03f7478e42245c6180982aab41e 100644
--- a/app/assets/stylesheets/page_bundles/design_management.scss
+++ b/app/assets/stylesheets/page_bundles/design_management.scss
@@ -78,7 +78,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
}
&.inactive {
- @include gl-opacity-5;
+ opacity: 0.5;
&:hover {
opacity: 1;
diff --git a/app/assets/stylesheets/page_bundles/editor.scss b/app/assets/stylesheets/page_bundles/editor.scss
index 3e2084461478cd1bf8dbe8d11857564bd7db8f28..0632fbda967adb5e809ef7659d5b7d45f899741c 100644
--- a/app/assets/stylesheets/page_bundles/editor.scss
+++ b/app/assets/stylesheets/page_bundles/editor.scss
@@ -3,7 +3,7 @@
.file-editor {
#editor,
.editor {
- @include gl-border-0;
+ border-width: 0;
margin: 0;
padding: 0;
position: relative;
@@ -12,7 +12,7 @@
.editor-loading-content {
height: 100%;
- @include gl-border-0;
+ border-width: 0;
}
}
diff --git a/app/assets/stylesheets/page_bundles/escalation_policies.scss b/app/assets/stylesheets/page_bundles/escalation_policies.scss
index 6e70a44a4e4e948ec49f1fcac57b4f3f09f544d9..1d07f044e42eac43559f1d265aa4f1554518de8b 100644
--- a/app/assets/stylesheets/page_bundles/escalation_policies.scss
+++ b/app/assets/stylesheets/page_bundles/escalation_policies.scss
@@ -28,7 +28,7 @@ $stroke-size: 1px;
.escalation-rule-row {
@media (max-width: $breakpoint-lg) {
- @include gl-flex-wrap;
+ flex-wrap: wrap;
}
}
diff --git a/app/assets/stylesheets/page_bundles/incident_management_list.scss b/app/assets/stylesheets/page_bundles/incident_management_list.scss
index 4e3fcf5044a631d4928d10ea579ff80c75642ffc..9627f419ca0431df1669bba46241936515f1fa10 100644
--- a/app/assets/stylesheets/page_bundles/incident_management_list.scss
+++ b/app/assets/stylesheets/page_bundles/incident_management_list.scss
@@ -12,7 +12,7 @@
color: var(--gray-500, $gray-500);
> .gl-tab-counter-badge {
- @include gl-reset-color;
+ color: inherit;
font-size: $gl-font-size-sm;
background-color: var(--gray-50, $gray-50);
}
@@ -21,7 +21,7 @@
@include media-breakpoint-down(xs) {
.list-header {
- @include gl-flex-direction-column-reverse;
+ flex-direction: column-reverse;
}
.create-incident-button {
diff --git a/app/assets/stylesheets/page_bundles/incidents.scss b/app/assets/stylesheets/page_bundles/incidents.scss
index 974d89a1fa0a7832dd4f1d97cb6d72a04db81134..a8d1c5f7f269491ad985913199e6c5e3c34d19a0 100644
--- a/app/assets/stylesheets/page_bundles/incidents.scss
+++ b/app/assets/stylesheets/page_bundles/incidents.scss
@@ -58,7 +58,7 @@
.timeline-entry:not(:last-child) {
.timeline-event-border {
padding-bottom: $gl-spacing-scale-3;
- @include gl-border-gray-50;
+ border-color: $gray-50;
border-width: $gl-border-size-1;
border-bottom-style: solid;
}
@@ -68,7 +68,7 @@
.timeline-entry:last-child,
.create-timeline-event {
.timeline-event-bottom-border {
- @include gl-border-b;
+ border-bottom: solid $gl-border-size-1 $border-color;
padding-top: $gl-spacing-scale-5;
}
}
diff --git a/app/assets/stylesheets/page_bundles/issuable_list.scss b/app/assets/stylesheets/page_bundles/issuable_list.scss
index 8e885914d5e202c1d31d1e54930af046bc0454bc..c2955a8a2562fb6c65660e8343ccb94bc0bba70d 100644
--- a/app/assets/stylesheets/page_bundles/issuable_list.scss
+++ b/app/assets/stylesheets/page_bundles/issuable_list.scss
@@ -93,7 +93,7 @@
padding-left: $gl-spacing-scale-1;
padding-right: $gl-spacing-scale-2;
height: $gl-spacing-scale-5;
- @include gl-min-w-5;
+ min-width: $gl-spacing-scale-5;
line-height: 14px;
}
}
diff --git a/app/assets/stylesheets/page_bundles/merge_request.scss b/app/assets/stylesheets/page_bundles/merge_request.scss
index 393e21f79500135a30db1d5d9bc09e7ea0fd88b0..2cb29717764e966c2f39da0af97aa6299292b545 100644
--- a/app/assets/stylesheets/page_bundles/merge_request.scss
+++ b/app/assets/stylesheets/page_bundles/merge_request.scss
@@ -343,7 +343,7 @@ $comparison-empty-state-height: 62px;
}
.survey-slide-up-enter-active {
- @include gl-transition-slow;
+ transition: all $gl-transition-duration-slow ease;
}
.mr-compare-dropdown {
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 801c98361075303ff61d90222226fc97ea44483d..f932abb35ed121a1030c1b7e7790a41180454fcf 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -847,13 +847,13 @@ $tabs-holder-z-index: 250;
}
.mr-widget-extension-icon::before {
- @include gl-content-empty;
+ content: '';
position: absolute;
- @include gl-left-50p;
- @include gl-top-half;
- @include gl-opacity-3;
+ left: 50%;
+ top: 50%;
+ opacity: 0.3;
border-style: solid;
- @include gl-border-4;
+ border-width: $gl-border-size-4;
border-radius: $gl-border-radius-full;
width: 24px;
@@ -862,11 +862,11 @@ $tabs-holder-z-index: 250;
}
.mr-widget-extension-icon::after {
- @include gl-content-empty;
+ content: '';
position: absolute;
border-radius: $gl-border-radius-full;
- @include gl-left-50p;
- @include gl-top-half;
+ left: 50%;
+ top: 50%;
width: 16px;
height: 16px;
@@ -981,7 +981,8 @@ $tabs-holder-z-index: 250;
.detail-page-description,
.merge-request-tabs-container {
&.is-merge-request {
- @include gl-mx-auto;
+ margin-left: auto;
+ margin-right: auto;
max-width: $fixed-layout-width - ($container-margin-xl * 2);
}
}
@@ -989,8 +990,9 @@ $tabs-holder-z-index: 250;
.container-fluid.diffs-container-limited {
.flash-container {
- @include gl-mx-auto;
- @include gl-max-w-container-xl;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: $container-xl;
padding-left: $gl-spacing-scale-5;
padding-right: $gl-spacing-scale-5;
}
@@ -1042,7 +1044,7 @@ $tabs-holder-z-index: 250;
.mr-ready-merge-related-links a,
.mr-widget-merge-details a,
.mr-widget-author {
- @include gl-text-decoration-underline;
+ text-decoration: underline;
&:hover,
&:focus {
@@ -1066,28 +1068,28 @@ $tabs-holder-z-index: 250;
}
.mr-widget-status-icon-level-1::before {
- @include gl-content-empty;
+ content: '';
position: absolute;
left: 0;
top: 0;
- @include gl-bottom-0;
- @include gl-right-0;
- @include gl-opacity-3;
+ bottom: 0;
+ right: 0;
+ opacity: 0.3;
border-radius: $gl-border-radius-full;
border-style: solid;
- @include gl-border-4;
+ border-width: $gl-border-size-4;
}
.mr-widget-status-icon-level-1::after {
- @include gl-content-empty;
+ content: '';
position: absolute;
border-radius: $gl-border-radius-full;
border-style: solid;
- @include gl-border-4;
- @include gl-left-2;
- @include gl-right-2;
- @include gl-top-2;
- @include gl-bottom-2;
+ border-width: $gl-border-size-4;
+ left: $gl-spacing-scale-2;
+ right: $gl-spacing-scale-2;
+ top: $gl-spacing-scale-2;
+ bottom: $gl-spacing-scale-2;
}
.memory-graph-container {
@@ -1202,11 +1204,11 @@ $tabs-holder-z-index: 250;
.discussion-collapsible {
margin: 0;
- @include gl-border-l-0;
- @include gl-border-r-0;
+ border-left-width: 0;
+ border-right-width: 0;
border-bottom-width: 0;
- @include gl-rounded-top-left-none;
- @include gl-rounded-top-right-none;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
}
}
diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
index 8c00438a0b9a6d0a26579058d2bae49585874fc9..1e22cbe4ff9d39866a5850a0184dfb0805b71775 100644
--- a/app/assets/stylesheets/page_bundles/oncall_schedules.scss
+++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
@@ -66,7 +66,7 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi
.list-section .details-cell {
&::after {
height: 100%;
- @include gl-content-empty;
+ content: '';
position: absolute;
top: 0;
right: -$grid-size;
diff --git a/app/assets/stylesheets/page_bundles/operations.scss b/app/assets/stylesheets/page_bundles/operations.scss
index 497cb63033c6e1e6ba0ededdee1f47391d4b5f2a..f1f2464aa684e2d04b6af102d30f72245077df6d 100644
--- a/app/assets/stylesheets/page_bundles/operations.scss
+++ b/app/assets/stylesheets/page_bundles/operations.scss
@@ -6,7 +6,7 @@
}
.dashboard-card {
- @include gl-cursor-grab;
+ cursor: grab;
&-header {
&-warning {
diff --git a/app/assets/stylesheets/page_bundles/projects.scss b/app/assets/stylesheets/page_bundles/projects.scss
index 89d6ff8c463b02c0ecf58d6f7036c6b741e64da3..ebb4dffecee56bbdf76bf3e5e62d63c5a087445f 100644
--- a/app/assets/stylesheets/page_bundles/projects.scss
+++ b/app/assets/stylesheets/page_bundles/projects.scss
@@ -271,15 +271,15 @@
.projects-list {
@include basic-list;
- @include gl-display-table;
+ display: table;
.project-row {
- @include gl-display-table-row;
+ display: table-row;
}
.project-cell {
- @include gl-display-table-cell;
- @include gl-vertical-align-top;
+ display: table-cell;
+ vertical-align: top;
padding-top: $gl-spacing-scale-4;
padding-bottom: $gl-spacing-scale-4;
border-bottom: 1px solid var(--gray-50, $gray-50);
@@ -287,7 +287,7 @@
.project-row:last-of-type {
.project-cell {
- @include gl-border-none;
+ border-style: none;
}
}
@@ -303,7 +303,7 @@
}
.controls {
- @include gl-line-height-42;
+ line-height: $gl-line-height-42;
}
}
@@ -323,7 +323,7 @@
&:not(.compact) {
.controls {
@include media-breakpoint-up(lg) {
- @include gl-justify-content-start;
+ justify-content: flex-start;
padding-right: $gl-spacing-scale-9;
&:not(.with-pipeline-status) {
@@ -339,7 +339,7 @@
.project-details {
p,
.commit-row-message {
- @include gl-white-space-normal;
+ white-space: normal;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/* stylelint-disable-next-line value-no-vendor-prefix */
@@ -350,7 +350,7 @@
.controls {
@include media-breakpoint-up(sm) {
- @include gl-justify-content-end;
+ justify-content: flex-end;
}
.icon-wrapper {
@@ -376,8 +376,8 @@
&.compact {
.description {
width: 100%;
- @include gl-display-table;
- @include gl-table-layout-fixed;
+ display: table;
+ table-layout: fixed;
}
.avatar-container {
@@ -409,7 +409,7 @@
@include media-breakpoint-down(md) {
.updated-note {
margin-top: $gl-spacing-scale-3;
- @include gl-text-right;
+ text-align: right;
}
}
@@ -431,7 +431,7 @@
@include media-breakpoint-down(xs) {
.updated-note {
margin-top: 0;
- @include gl-text-left;
+ text-align: left;
}
}
}
diff --git a/app/assets/stylesheets/page_bundles/search.scss b/app/assets/stylesheets/page_bundles/search.scss
index 65a82d9aedb5cb698fe41ea1cc0ed1dcfb22bf8f..19fa49bbe821d522ad6b249f50f7a108c493fe30 100644
--- a/app/assets/stylesheets/page_bundles/search.scss
+++ b/app/assets/stylesheets/page_bundles/search.scss
@@ -325,7 +325,7 @@ $language-filter-max-height: 20rem;
pre {
padding: 0; // This overrides the existing style that will add space between each line.
.line {
- @include gl-word-break-word;
+ word-break: break-word;
white-space: break-spaces;
}
}
diff --git a/app/assets/stylesheets/page_bundles/todos.scss b/app/assets/stylesheets/page_bundles/todos.scss
index 359d38bfa2da7fa534a6c1a5b81fd7bc2b95aaa3..b0bc61fc4e91b87166e8bf82b7f183ff7c52de66 100644
--- a/app/assets/stylesheets/page_bundles/todos.scss
+++ b/app/assets/stylesheets/page_bundles/todos.scss
@@ -29,7 +29,7 @@
&.todo-pending.done-reversible {
.todo-item,
.todo-timestamp {
- @include gl-opacity-5;
+ opacity: 0.5;
}
.todo-avatar {
@@ -38,8 +38,8 @@
&:hover {
border-top-width: $gl-border-size-1;
- @include gl-border-t-transparent;
- @include gl-border-t-solid;
+ border-top-color: transparent;
+ border-top-style: solid;
}
}
}
@@ -49,12 +49,12 @@
.todo-label a::before {
// Make area of the todo item clickable by expanding the area around the todo link
- @include gl-content-empty;
+ content: '';
position: absolute;
left: 0;
- @include gl-right-0;
+ right: 0;
top: 0;
- @include gl-bottom-0;
+ bottom: 0;
z-index: 9;
}
}
@@ -64,9 +64,9 @@
@include media-breakpoint-up(sm) {
margin-right: 0;
- @include gl-text-overflow-ellipsis;
- @include gl-white-space-nowrap;
- @include gl-overflow-hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
}
}
@@ -82,7 +82,7 @@
padding-left: $gl-spacing-scale-1;
padding-right: $gl-spacing-scale-1;
margin: 0;
- @include gl-border-0;
+ border-width: 0;
border-radius: $gl-border-radius-base;
display: inline-flex;
background: var(--gray-50, $gray-50);
@@ -106,7 +106,7 @@
.todo-actions {
position: absolute;
- @include gl-right-0;
+ right: 0;
@include media-breakpoint-up(sm) {
position: relative;
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 69fed5d59fe2756c10abd4f8a369737c936baa31..511228a1e16a3e71668076cc1514325a470127d1 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -135,10 +135,10 @@ ul.related-merge-requests > li gl-emoji {
@include media-breakpoint-down(xs) {
.btn.btn-confirm {
- @include gl-justify-content-start;
+ justify-content: flex-start;
&.dropdown-toggle {
- @include gl-flex-grow-0;
+ flex-grow: 0;
}
}
}
diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss
index 81006c2ad8136678fd29512a11d8171639857461..f65fc7f254c00ba456138d6547ae4d622fbe453a 100644
--- a/app/assets/stylesheets/themes/dark_mode_overrides.scss
+++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss
@@ -130,7 +130,7 @@
}
.gl-avatar {
- @include gl-border-none;
+ border-style: none;
box-shadow: inset 0 0 0 1px rgba($gray-950, $gl-avatar-border-opacity);
}
diff --git a/ee/app/assets/stylesheets/components/ai_genie_chat.scss b/ee/app/assets/stylesheets/components/ai_genie_chat.scss
index 52b607cf4ab6e31d7bd610e79b5c58b6919bdd6a..e45b148450b31824215ce3b2e5ec23a71e70b8b2 100644
--- a/ee/app/assets/stylesheets/components/ai_genie_chat.scss
+++ b/ee/app/assets/stylesheets/components/ai_genie_chat.scss
@@ -42,8 +42,8 @@
pre code {
font-size: $gl-font-size-sm;
- @include gl-line-height-1;
- @include gl-bg-transparent;
+ line-height: 1;
+ background-color: transparent;
white-space: inherit;
}
@@ -132,8 +132,8 @@
&::after {
content: attr(data-value) ' ';
- @include gl-visibility-hidden;
- @include gl-white-space-pre-wrap;
+ visibility: hidden;
+ white-space: pre-wrap;
padding-top: $gl-spacing-scale-4;
padding-bottom: $gl-spacing-scale-4;
}
diff --git a/ee/app/assets/stylesheets/components/generic_vulnerability_report.scss b/ee/app/assets/stylesheets/components/generic_vulnerability_report.scss
index 9217e80d15f122d2280eed124a70031338bfd399..16fce09960a75a0b96340c538178f3409a432a53 100644
--- a/ee/app/assets/stylesheets/components/generic_vulnerability_report.scss
+++ b/ee/app/assets/stylesheets/components/generic_vulnerability_report.scss
@@ -1,5 +1,5 @@
.generic-report-container {
- @include gl-display-grid;
+ display: grid;
grid-template-columns: max-content auto;
}
@@ -38,7 +38,7 @@
li {
margin-left: 0;
margin-bottom: $gl-spacing-scale-2;
- @include gl-list-style-none;
+ list-style-type: none;
&:last-child {
margin-bottom: 0;
@@ -52,7 +52,7 @@
}
.generic-report-named-list {
- @include gl-display-grid;
+ display: grid;
grid-template-columns: max-content auto;
margin: 0 !important;
@@ -62,7 +62,7 @@
}
.generic-report-named-list-item {
- @include gl-list-style-none;
+ list-style-type: none;
margin: 0 !important;
.generic-report-named-list-label,
diff --git a/ee/app/assets/stylesheets/components/vulnerability_list.scss b/ee/app/assets/stylesheets/components/vulnerability_list.scss
index c270e653b1d5cf3c95a47d3b7f4da88a97f357db..40aa1b2cf2001aea858e278ba97f24981a09e948 100644
--- a/ee/app/assets/stylesheets/components/vulnerability_list.scss
+++ b/ee/app/assets/stylesheets/components/vulnerability_list.scss
@@ -57,7 +57,7 @@
}
.severity {
- @include gl-w-10p;
+ width: 10%;
}
.description {
@@ -69,7 +69,7 @@
}
.scanner {
- @include gl-w-10p;
+ width: 10%;
}
.activity {
@@ -82,7 +82,7 @@
thead th {
// The !important works around https://github.com/bootstrap-vue/bootstrap-vue/pull/6371.
position: sticky !important;
- @include gl-border-top-0;
+ border-top: 0;
// The checkboxes use z-index: 1, so we need to place the headers higher so that the checkboxes
// don't show on top of the headers when scrolling down.
z-index: 2;
@@ -118,7 +118,7 @@
}
tr:hover .vulnerability-title {
- @include gl-text-decoration-underline;
+ text-decoration: underline;
}
}
diff --git a/ee/app/assets/stylesheets/page_bundles/billings.scss b/ee/app/assets/stylesheets/page_bundles/billings.scss
index 9577613258261d049f83beb2533750ee4a931aa1..f16973dc03f5fe8083a4da03497001d4ddb43406 100644
--- a/ee/app/assets/stylesheets/page_bundles/billings.scss
+++ b/ee/app/assets/stylesheets/page_bundles/billings.scss
@@ -40,16 +40,14 @@ $badge-height: $gl-spacing-scale-7;
.card {
border-width: $gl-border-size-1;
border-style: solid;
- @include gl-rounded-top-left-none;
- @include gl-rounded-top-right-none;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
border-color: $highlight-color;
}
}
.card-badge {
- @include gl-rounded-top-left-base;
- @include gl-rounded-top-right-base;
font-weight: $gl-font-weight-bold;
padding-left: $gl-spacing-scale-5;
padding-right: $gl-spacing-scale-5;
@@ -117,7 +115,7 @@ $badge-height: $gl-spacing-scale-7;
@media (min-width: $breakpoint-md) {
.billing-plans {
display: flex;
- @include gl-flex-wrap;
+ flex-wrap: wrap;
justify-content: space-between;
> * + * {
@@ -154,7 +152,7 @@ $badge-height: $gl-spacing-scale-7;
.card-wrapper {
flex-grow: 1;
margin-bottom: 0;
- @include gl-overflow-hidden;
+ overflow: hidden;
}
}
}
diff --git a/ee/app/assets/stylesheets/page_bundles/pipelines.scss b/ee/app/assets/stylesheets/page_bundles/pipelines.scss
index da9203f3f5b856bb066493d5596d76c385e26860..89c337a3636e581bc36c95a6a3acf35ac08f1677 100644
--- a/ee/app/assets/stylesheets/page_bundles/pipelines.scss
+++ b/ee/app/assets/stylesheets/page_bundles/pipelines.scss
@@ -5,7 +5,7 @@
&:active,
&:focus,
&:focus:active {
- @include gl-bg-transparent;
+ background-color: transparent;
@include gl-focus;
}
diff --git a/ee/app/assets/stylesheets/page_bundles/remote_development.scss b/ee/app/assets/stylesheets/page_bundles/remote_development.scss
index 12d752e8b42ddce0e0b7fc8c1b2bf432011a6626..043d04b2872c8f96fbb320e3af32471a9fd5b79d 100644
--- a/ee/app/assets/stylesheets/page_bundles/remote_development.scss
+++ b/ee/app/assets/stylesheets/page_bundles/remote_development.scss
@@ -1,7 +1,7 @@
@import 'page_bundles/mixins_and_variables_and_functions';
.workspace-preview-link {
- @include gl-white-space-normal;
+ white-space: normal;
overflow: hidden;
// This property is necessary to implement line truncation.
// stylelint-disable-next-line
diff --git a/ee/app/assets/stylesheets/page_bundles/requirements.scss b/ee/app/assets/stylesheets/page_bundles/requirements.scss
index 8df3d8fc24afaa3900e6d9db6b78ab4b875e2927..d1c1849fdea915553829c4c1777722499da7e110 100644
--- a/ee/app/assets/stylesheets/page_bundles/requirements.scss
+++ b/ee/app/assets/stylesheets/page_bundles/requirements.scss
@@ -22,10 +22,10 @@
border-bottom-width: $gl-border-size-1;
display: flex;
padding-bottom: $gl-spacing-scale-3;
- @include gl-align-items-flex-start;
+ align-items: flex-start;
.title {
- @include gl-font-size-markdown-h2;
+ font-size: $gl-font-size-markdown-h2;
margin-bottom: 0;
padding-bottom: 0;
flex-grow: 1;
@@ -44,7 +44,7 @@
}
.detail-page-description {
- @include gl-border-none;
+ border-style: none;
}
.description {
diff --git a/ee/app/assets/stylesheets/pages/issuable_form.scss b/ee/app/assets/stylesheets/pages/issuable_form.scss
index 3f9075457a045240a385a289845c3093e46b4f18..c086f1584e1a196ddb20729a6449c592ef2a7a9e 100644
--- a/ee/app/assets/stylesheets/pages/issuable_form.scss
+++ b/ee/app/assets/stylesheets/pages/issuable_form.scss
@@ -1,7 +1,7 @@
.labels-select-wrapper.is-embedded {
.labels-select-dropdown-button {
background-color: $white;
- @include gl-font-regular;
+ font-family: $gl-regular-font;
font-size: $gl-font-size;
line-height: $gl-line-height-16;
padding-top: $gl-spacing-scale-3;
@@ -9,11 +9,11 @@
padding-left: $gl-spacing-scale-4;
padding-right: $gl-spacing-scale-4;
height: auto;
- @include gl-text-left;
- @include gl-border-none;
+ text-align: left;
+ border-style: none;
@include gl-inset-border-1-gray-200;
border-radius: $gl-border-radius-base;
- @include gl-white-space-nowrap;
+ white-space: nowrap;
.gl-button-text {
color: $gray-500;
@@ -36,7 +36,7 @@
max-height: none;
a:not(.btn) {
- @include gl-reset-color;
+ color: inherit;
}
}
diff --git a/ee/app/assets/stylesheets/pages/security/vulnerability_report.scss b/ee/app/assets/stylesheets/pages/security/vulnerability_report.scss
index 3536d577fd43187e2f7c12fc795aafdb42c317d6..3241794babbdac5bfe8fab96d2c2040daf7d8a29 100644
--- a/ee/app/assets/stylesheets/pages/security/vulnerability_report.scss
+++ b/ee/app/assets/stylesheets/pages/security/vulnerability_report.scss
@@ -1,11 +1,11 @@
.vulnerability-report-filters {
- @include gl-display-grid;
+ display: grid;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
grid-gap: $gl-spacing-scale-5;
}
.vulnerability-counts {
- @include gl-display-grid;
+ display: grid;
grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
grid-gap: $gl-spacing-scale-7;
}