diff options
Diffstat (limited to 'app/assets/stylesheets')
46 files changed, 207 insertions, 188 deletions
diff --git a/app/assets/stylesheets/components/content_editor.scss b/app/assets/stylesheets/components/content_editor.scss index c654eb16af5..18043c503f7 100644 --- a/app/assets/stylesheets/components/content_editor.scss +++ b/app/assets/stylesheets/components/content_editor.scss @@ -202,7 +202,7 @@ padding-right: 10px; padding-left: 10px; - @include gl-text-secondary; + color: $gl-text-color-secondary; } > code::after { @@ -212,7 +212,7 @@ width: 20px; text-align: center; - @include gl-text-secondary; + color: $gl-text-color-secondary; } } @@ -369,7 +369,7 @@ li.focused div.gl-new-dropdown-item-content { @include gl-focus($inset: true); - @include gl-bg-gray-50; + background-color: $gray-50; } } diff --git a/app/assets/stylesheets/components/detail_page.scss b/app/assets/stylesheets/components/detail_page.scss index 98ed7f590ea..95987dbb08b 100644 --- a/app/assets/stylesheets/components/detail_page.scss +++ b/app/assets/stylesheets/components/detail_page.scss @@ -45,7 +45,7 @@ } .detail-page-header-meta { - @include gl-flex-basis-full; + flex-basis: 100%; } .detail-page-description { diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss index 4d53ae9ed4b..1cbd0faa900 100644 --- a/app/assets/stylesheets/components/related_items_list.scss +++ b/app/assets/stylesheets/components/related_items_list.scss @@ -160,7 +160,7 @@ $item-remove-button-space: 42px; line-height: 0; a:focus { - @include gl-rounded-full; + border-radius: $gl-border-radius-full; @include gl-focus; } } diff --git a/app/assets/stylesheets/components/severity/icons.scss b/app/assets/stylesheets/components/severity/icons.scss index 8ddf873196a..f58ad87a673 100644 --- a/app/assets/stylesheets/components/severity/icons.scss +++ b/app/assets/stylesheets/components/severity/icons.scss @@ -2,26 +2,26 @@ .incident-management-list, .alert-management-details { .icon-critical { - @include gl-text-red-800; + color: $red-800; } .icon-high { - @include gl-text-red-600; + color: $red-600; } .icon-medium { - @include gl-text-orange-400; + color: $orange-400; } .icon-low { - @include gl-text-orange-300; + color: $orange-300; } .icon-info { - @include gl-text-blue-400; + color: $blue-400; } .icon-unknown { - @include gl-text-gray-200; + color: $gray-200; } } diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss index 2f6c7c43fc9..e8ed4971ea5 100644 --- a/app/assets/stylesheets/components/whats_new.scss +++ b/app/assets/stylesheets/components/whats_new.scss @@ -17,7 +17,7 @@ align-items: stretch; .nav-item { - @include gl-flex-shrink-0; + flex-shrink: 0; a { height: 100%; @@ -38,7 +38,7 @@ &:hover, &:focus, &:active { - @include gl-text-gray-900; + color: $gray-900; } } diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 260ef0ae380..56e4b23e80d 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -354,14 +354,14 @@ fieldset[disabled] .btn, copy-code { position: absolute; @include gl-transition-medium; - @include gl-opacity-0; + opacity: 0; top: 7px; right: $input-horizontal-padding; .markdown-code-block:hover &, &:focus-within { - @include gl-opacity-10; + opacity: 1; } } diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss index 65e378a79f3..6fe114fe337 100644 --- a/app/assets/stylesheets/framework/calendar.scss +++ b/app/assets/stylesheets/framework/calendar.scss @@ -5,7 +5,7 @@ } &:focus { - @include gl-outline-none; + outline: none; stroke: $white; filter: drop-shadow(1px 0 0.5px $blue-400) drop-shadow(0 1px 0.5px $blue-400) drop-shadow(-1px 0 0.5px $blue-400) drop-shadow(0 -1px 0.5px $blue-400); } diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 66cb6a20ba5..9f0dc422795 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -527,7 +527,8 @@ li.note { } .border-section { - @include gl-py-6; + padding-top: $gl-spacing-scale-6; + padding-bottom: $gl-spacing-scale-6; margin: 0; border-top: 1px solid $border-color; @@ -562,8 +563,8 @@ See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details. // --- moved from labels.scss when moving to page_bundles --- // Fix scoped label padding in cases where old markdown uses the old label structure */ .gl-label-text + .gl-label-text { - @include gl-pl-2; - @include gl-pr-3; + padding-left: $gl-spacing-scale-2; + padding-right: $gl-spacing-scale-3; } // used in the Markdown rendering of labels diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 415d1532b15..f799683ba54 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -6,7 +6,7 @@ // need this style. // Issue for the refactoring: https://gitlab.com/gitlab-org/gitlab/-/issues/213327 &.gl-dropdown button.dropdown-toggle { - @include gl-display-inline-flex; + display: inline-flex; } .btn-link { @@ -664,7 +664,8 @@ min-height: 30px; padding-top: 0; padding-bottom: 0; - @include gl-px-3; + padding-left: $gl-spacing-scale-3; + padding-right: $gl-spacing-scale-3; color: $gray-700; line-height: 30px; border: 1px solid $gray-400; diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss index 9227028e3da..77956797817 100644 --- a/app/assets/stylesheets/framework/emojis.scss +++ b/app/assets/stylesheets/framework/emojis.scss @@ -26,7 +26,7 @@ gl-emoji { } .emoji-picker-category-header { - @include gl-sticky; + position: sticky; background: linear-gradient(to bottom, $white 50%, transparent 100%); } @@ -40,7 +40,7 @@ gl-emoji { &:hover, &:focus { - @include gl-z-index-2; + z-index: 2; transform: scale(1.3) !important; } diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index 2c01f650ae3..c99eaa6a8fa 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -413,12 +413,10 @@ span.idiff { } .version-link { - @include gl-display-inline-block; - @include gl-align-self-center; + align-self: center; margin-top: $gl-spacing-scale-2; - @include gl-w-5; - @include gl-h-5; - @include gl-float-left; + width: $gl-spacing-scale-5; + height: $gl-spacing-scale-5; background-color: $gray-400; mask-image: url('icons-stacked.svg#doc-versions'); mask-repeat: no-repeat; @@ -455,15 +453,15 @@ span.idiff { .blob-viewer[data-loading] .file-content.code .line:nth-of-type(69):not(:last-of-type), .blob-viewer[data-loading] .file-content.code .file-line-num:nth-of-type(69):not(:last-of-type) { &::after { - @include gl-display-block; - @include gl-font-weight-bold; + display: block; + font-weight: $gl-font-weight-bold; content: '\2026'; } } .blob-viewer[data-loading] .file-content.code .line:nth-of-type(69):not(:last-of-type) { &::after { - @include gl-text-center; + text-align: center; } } @@ -481,7 +479,7 @@ span.idiff { .tree-list-parent::before { @include gl-content-empty; position: absolute; - @include gl-z-index-1; + z-index: 1; pointer-events: none; top: -4px; @@ -570,7 +568,7 @@ span.idiff { border-radius: 0; .file-line-num { - @include gl-min-w-9; + min-width: $gl-spacing-scale-9; } } diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 7c24cd0385c..0634196e007 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -347,12 +347,12 @@ } .filtered-search-block .boards-switcher { - @include gl-mr-0; + margin-right: 0; margin-bottom: $gl-input-padding; .boards-selector-wrapper, .dropdown { - @include gl-display-block; + display: block; } } diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss index 259f806c315..a3e3b58e9c9 100644 --- a/app/assets/stylesheets/framework/flash.scss +++ b/app/assets/stylesheets/framework/flash.scss @@ -16,7 +16,7 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25); .flash-notice, .flash-success, .flash-warning { - @include gl-mb-4; + margin-bottom: $gl-spacing-scale-4; } } @@ -79,12 +79,14 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25); } .gl-alert { - @include gl-my-4; + margin-top: $gl-spacing-scale-4; + margin-bottom: $gl-spacing-scale-4; } &.flash-container-no-margin { .gl-alert { - @include gl-my-0; + margin-top:0; + margin-bottom: 0; } .flash-alert, diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index ddb13b73973..1f58964cfc0 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -123,9 +123,9 @@ padding: 6px 8px; height: 32px; border-radius: $border-radius-default; - @include gl-text-gray-100; + color: $gray-100; font-weight: $gl-font-weight-normal; - @include gl-font-base; + font-size: $gl-font-size; &:hover, &:focus, diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss index c499c9e9ffc..c15819e5b62 100644 --- a/app/assets/stylesheets/framework/highlight.scss +++ b/app/assets/stylesheets/framework/highlight.scss @@ -120,8 +120,8 @@ td.line-numbers { .file-line-num { @include gl-justify-content-end; - @include gl-flex-grow-1; - @include gl-pr-3; + flex-grow: 1; + padding-right: $gl-spacing-scale-3; } .file-line-blame { diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index 3399847c201..d5d29cb8217 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -47,7 +47,7 @@ // - app/assets/javascripts/vue_shared/components/ci_icon/ci_icon.vue // - app/helpers/ci/status_helper.rb .ci-icon-gl-icon-wrapper { - @include gl-rounded-full; + border-radius: $gl-border-radius-full; @include gl-line-height-0; } diff --git a/app/assets/stylesheets/framework/labels.scss b/app/assets/stylesheets/framework/labels.scss index 116d9c489eb..045c825ad07 100644 --- a/app/assets/stylesheets/framework/labels.scss +++ b/app/assets/stylesheets/framework/labels.scss @@ -19,7 +19,7 @@ &:focus:active { @include gl-reset-color; @include gl-shadow-none; - @include gl-outline-none; + outline: none; } .gl-label-text, diff --git a/app/assets/stylesheets/framework/new_card.scss b/app/assets/stylesheets/framework/new_card.scss index a244439d88e..821bda29e50 100644 --- a/app/assets/stylesheets/framework/new_card.scss +++ b/app/assets/stylesheets/framework/new_card.scss @@ -1,76 +1,82 @@ .gl-new-card { - @include gl-mt-5; + margin-top: $gl-spacing-scale-5; background-color: $gray-10; - @include gl-border-1; - @include gl-border-solid; - @include gl-border-gray-100; + border-width: $gl-border-size-1; + border-style: solid; + border-color: $gray-100; border-radius: $gl-border-radius-base; &-header { padding-left: $gl-spacing-scale-5; padding-right: $gl-spacing-scale-5; - @include gl-py-4; + padding-top: $gl-spacing-scale-4; + padding-bottom: $gl-spacing-scale-4; display: flex; - @include gl-justify-content-space-between; - @include gl-bg-white; - @include gl-border-b-1; - @include gl-border-b-solid; - @include gl-border-b-gray-100; - @include gl-rounded-top-base; + justify-content: space-between; + background-color: $white; + border-bottom-width: $gl-border-size-1; + border-bottom-style: solid; + border-bottom-color: $gray-100; + border-top-left-radius: $gl-border-radius-base; + border-top-right-radius: $gl-border-radius-base; } &[aria-expanded=false] &-header { - @include gl-border-bottom-0; + border-bottom: 0; border-radius: $gl-border-radius-base; } &-title-wrapper { display: flex; - @include gl-flex-grow-1; + flex-grow: 1; } &-title { display: flex; - @include gl-font-base; - @include gl-font-weight-bold; + font-size: $gl-font-size; + font-weight: $gl-font-weight-bold; position: relative; margin: 0; - @include gl-line-height-24; + line-height: $gl-line-height-24; } &-count { - @include gl-mx-3; - @include gl-font-base; - @include gl-font-weight-bold; - @include gl-text-gray-500; - @include gl-display-inline-flex; + margin-left: $gl-spacing-scale-3; + margin-right: $gl-spacing-scale-3; + font-size: $gl-font-size; + font-weight: $gl-font-weight-bold; + color: $gray-500; + display: inline-flex; align-items: center; } &-description { font-size: $gl-font-size-sm; - @include gl-text-gray-500; + color: $gray-500; margin: 0; } &-toggle { - @include gl-pl-3; + padding-left: $gl-spacing-scale-3; margin-left: $gl-spacing-scale-3; - @include gl-mr-n2; - @include gl-border-l-1; - @include gl-border-l-solid; - @include gl-border-l-gray-100; + margin-right: -$gl-spacing-scale-2; + border-left-width: $gl-border-size-1; + border-left-style: solid; + border-left-color: $gray-100; } &-body { - @include gl-rounded-bottom-base; - @include gl-px-3; + border-bottom-left-radius: $gl-border-radius-base; + border-bottom-right-radius: $gl-border-radius-base; + padding-left: $gl-spacing-scale-3; + padding-right: $gl-spacing-scale-3; padding-top: 0; padding-bottom: 0; } &-content { - @include gl-px-2; + padding-left: $gl-spacing-scale-2; + padding-right: $gl-spacing-scale-2; padding-top: $gl-spacing-scale-3; padding-bottom: $gl-spacing-scale-3; } @@ -78,20 +84,21 @@ &-empty { padding: $gl-spacing-scale-2; margin-bottom: 0; - @include gl-text-gray-500; + color: $gray-500; } &-footer { - @include gl-bg-white; + background-color: $white; } &-add-form { - @include gl-p-4; - @include gl-my-2; - @include gl-bg-white; - @include gl-border-1; - @include gl-border-solid; - @include gl-border-gray-100; + padding: $gl-spacing-scale-4; + margin-top: $gl-spacing-scale-2; + margin-bottom: $gl-spacing-scale-2; + background-color: $white; + border-width: $gl-border-size-1; + border-style: solid; + border-color: $gray-100; border-radius: $gl-border-radius-base; } } @@ -102,27 +109,27 @@ tbody > tr { &:first-of-type > td[data-label], &:first-of-type > td:first-of-type:last-of-type { - @include gl-border-t-0; + border-top-width: 0; } &:last-of-type td:not(:last-of-type) { - @include gl-border-b-1; + border-bottom-width: $gl-border-size-1; } > td[data-label] { - @include gl-border-left-0; - @include gl-border-l-none; - @include gl-border-right-0; - @include gl-border-r-none; + border-left: 0; + border-left-style: none; + border-right: 0; + border-right-style: none; } > th { - @include gl-border-t-1; - @include gl-border-b-0; + border-top-width: $gl-border-size-1; + border-bottom-width: 0; } &::after { - @include gl-bg-white; + background-color: $white; } &:last-child::after { @@ -136,11 +143,11 @@ margin-bottom: 0; tr:first-of-type th { - @include gl-border-t-0; + border-top-width: 0; } tr:last-of-type td { - @include gl-border-b-0; + border-bottom-width: 0; } } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 04799a6b8f8..53eb5b2fbd0 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -69,7 +69,7 @@ } .inline-block { - @include gl-display-inline-block; + display: inline-block; } &.right-sidebar-merge-requests { @@ -491,7 +491,8 @@ } .issuable-sidebar-header { - @include gl-py-5; + padding-top: $gl-spacing-scale-5; + padding-bottom: $gl-spacing-scale-5; } .value { diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss index edd07dbaafa..1f752e70a13 100644 --- a/app/assets/stylesheets/framework/snippets.scss +++ b/app/assets/stylesheets/framework/snippets.scss @@ -21,7 +21,7 @@ } + .snippet-file-content { - @include gl-mt-5; + margin-top: $gl-spacing-scale-5; } &:last-of-type { diff --git a/app/assets/stylesheets/framework/source_editor.scss b/app/assets/stylesheets/framework/source_editor.scss index 5a3863745ee..0d235e17191 100644 --- a/app/assets/stylesheets/framework/source_editor.scss +++ b/app/assets/stylesheets/framework/source_editor.scss @@ -3,7 +3,7 @@ display: flex; @include gl-justify-content-center; align-items: center; - @include gl-z-index-0; + z-index: 0; > * { filter: blur(5px); @@ -13,7 +13,7 @@ content: ''; @include spinner-deprecated(32px, 3px); position: absolute; - @include gl-z-index-1; + z-index: 1; } pre { @@ -30,8 +30,10 @@ .md { @include gl-overflow-scroll; - @include gl-px-6; - @include gl-py-4; + padding-left: $gl-spacing-scale-6; + padding-right: $gl-spacing-scale-6; + padding-top: $gl-spacing-scale-4; + padding-bottom: $gl-spacing-scale-4; width: 100%; } @@ -73,11 +75,11 @@ &::before { @include gl-visibility-hidden; - @include gl-align-self-center; - @include gl-bg-gray-400; - @include gl-mr-2; - @include gl-w-4; - @include gl-h-4; + align-self: center; + background-color: $gray-400; + margin-right: $gl-spacing-scale-2; + width: $gl-spacing-scale-4; + height: $gl-spacing-scale-4; mask-image: url('icons-stacked.svg#link'); mask-repeat: no-repeat; mask-size: cover; @@ -100,7 +102,7 @@ } .link-anchor { - @include gl-display-block; + display: block; position: absolute; width: 100%; height: 100%; @@ -115,6 +117,6 @@ } .active-line-text { - @include gl-bg-orange-600; + background-color: $orange-600; @include gl-opacity-3; } diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss index 4d0b22928cc..ba4e7b612ee 100644 --- a/app/assets/stylesheets/framework/super_sidebar.scss +++ b/app/assets/stylesheets/framework/super_sidebar.scss @@ -501,7 +501,8 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; max-height: 30rem; .gl-new-dropdown-item { - @include gl-px-3; + padding-left: $gl-spacing-scale-3; + padding-right: $gl-spacing-scale-3; } // Target groups diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 25eeadfad45..e20c97bdf40 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -81,7 +81,7 @@ word-wrap: break-word; overflow-wrap: break-word; word-break: keep-all; - @include gl-font-base; + font-size: $gl-font-size; } h1 { @@ -665,7 +665,7 @@ pre { display: block; padding: $gl-padding-8 $input-horizontal-padding; margin: 0 0 $gl-padding-8; - @include gl-font-base; + font-size: $gl-font-size; word-break: break-all; word-wrap: break-word; color: $gl-text-color; @@ -712,7 +712,7 @@ code { */ textarea.js-gfm-input { font-family: $monospace-font; - @include gl-font-base; + font-size: $gl-font-size; } h1, diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss index 3fd72904655..36b66f8d00d 100644 --- a/app/assets/stylesheets/highlight/common.scss +++ b/app/assets/stylesheets/highlight/common.scss @@ -113,10 +113,10 @@ @mixin line-link($color, $icon) { &::before { @include gl-visibility-hidden; - @include gl-align-self-center; - @include gl-mr-1; - @include gl-w-5; - @include gl-h-5; + align-self: center; + margin-right: $gl-spacing-scale-1; + width: $gl-spacing-scale-5; + height: $gl-spacing-scale-5; background-color: rgba($color, 0.3); mask-image: url('icons-stacked.svg##{$icon}'); mask-repeat: no-repeat; diff --git a/app/assets/stylesheets/page_bundles/alert_management_details.scss b/app/assets/stylesheets/page_bundles/alert_management_details.scss index 0890fefe910..bd81773d923 100644 --- a/app/assets/stylesheets/page_bundles/alert_management_details.scss +++ b/app/assets/stylesheets/page_bundles/alert_management_details.scss @@ -13,7 +13,7 @@ .dropdown-menu-toggle { &:hover { - @include gl-bg-white; + background-color: $white; } } @@ -25,7 +25,7 @@ } &::before { - @include gl-pt-8; + padding-top: $gl-spacing-scale-8; } .gl-dropdown-item-text-wrapper { diff --git a/app/assets/stylesheets/page_bundles/cluster_agents.scss b/app/assets/stylesheets/page_bundles/cluster_agents.scss index f458b5a626a..956a9f6adcc 100644 --- a/app/assets/stylesheets/page_bundles/cluster_agents.scss +++ b/app/assets/stylesheets/page_bundles/cluster_agents.scss @@ -8,6 +8,6 @@ } .timeline-entry::before { - @include gl-mt-4; + margin-top: $gl-spacing-scale-4; } } diff --git a/app/assets/stylesheets/page_bundles/clusters.scss b/app/assets/stylesheets/page_bundles/clusters.scss index 7c46b836ddc..09611098bed 100644 --- a/app/assets/stylesheets/page_bundles/clusters.scss +++ b/app/assets/stylesheets/page_bundles/clusters.scss @@ -16,7 +16,7 @@ .cluster-card-item { @include media-breakpoint-up(sm) { - @include gl-pt-2; + padding-top: $gl-spacing-scale-2; min-height: 372px; } } @@ -27,6 +27,6 @@ .select-agent-dropdown { .gl-button-text { - @include gl-flex-grow-1; + flex-grow: 1; } } diff --git a/app/assets/stylesheets/page_bundles/design_management.scss b/app/assets/stylesheets/page_bundles/design_management.scss index e206b5e5b8b..e17640167b7 100644 --- a/app/assets/stylesheets/page_bundles/design_management.scss +++ b/app/assets/stylesheets/page_bundles/design_management.scss @@ -81,7 +81,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16); @include gl-opacity-5; &:hover { - @include gl-opacity-10; + opacity: 1; } } } diff --git a/app/assets/stylesheets/page_bundles/escalation_policies.scss b/app/assets/stylesheets/page_bundles/escalation_policies.scss index 604533e199c..6e70a44a4e4 100644 --- a/app/assets/stylesheets/page_bundles/escalation_policies.scss +++ b/app/assets/stylesheets/page_bundles/escalation_policies.scss @@ -35,7 +35,7 @@ $stroke-size: 1px; .rule-condition { @media (min-width: $breakpoint-lg) { flex-basis: 25%; - @include gl-flex-shrink-0; + flex-shrink: 0; } @media (max-width: $breakpoint-lg) { diff --git a/app/assets/stylesheets/page_bundles/incident_management_list.scss b/app/assets/stylesheets/page_bundles/incident_management_list.scss index ecfc481bb44..4e3fcf5044a 100644 --- a/app/assets/stylesheets/page_bundles/incident_management_list.scss +++ b/app/assets/stylesheets/page_bundles/incident_management_list.scss @@ -6,7 +6,7 @@ } .gl-tabs-nav { - @include gl-border-b-0; + border-bottom-width: 0; .gl-tab-nav-item { color: var(--gray-500, $gray-500); diff --git a/app/assets/stylesheets/page_bundles/incidents.scss b/app/assets/stylesheets/page_bundles/incidents.scss index 4be4cac2075..974d89a1fa0 100644 --- a/app/assets/stylesheets/page_bundles/incidents.scss +++ b/app/assets/stylesheets/page_bundles/incidents.scss @@ -46,7 +46,7 @@ &:last-child { &::before { top: - #{$gl-spacing-scale-5} !important; // Override default positioning - @include gl-h-8; + height: $gl-spacing-scale-8; } &::after { @@ -57,10 +57,10 @@ .timeline-entry:not(:last-child) { .timeline-event-border { - @include gl-pb-3; + padding-bottom: $gl-spacing-scale-3; @include gl-border-gray-50; - @include gl-border-1; - @include gl-border-b-solid; + border-width: $gl-border-size-1; + border-bottom-style: solid; } } @@ -69,7 +69,7 @@ .create-timeline-event { .timeline-event-bottom-border { @include gl-border-b; - @include gl-pt-5; + 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 acf6e54efc8..8e885914d5e 100644 --- a/app/assets/stylesheets/page_bundles/issuable_list.scss +++ b/app/assets/stylesheets/page_bundles/issuable_list.scss @@ -90,9 +90,9 @@ .issuable-list li, .issuable-info-container .controls { .avatar-counter { - @include gl-pl-1; - @include gl-pr-2; - @include gl-h-5; + padding-left: $gl-spacing-scale-1; + padding-right: $gl-spacing-scale-2; + height: $gl-spacing-scale-5; @include gl-min-w-5; line-height: 14px; } @@ -101,7 +101,7 @@ .merge-request { .issuable-info-container .controls { .avatar-counter { - @include gl-line-height-normal; + line-height: $gl-line-height-16; border: 0; } } diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index 8c14075bec2..b26b26b7734 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -331,7 +331,7 @@ $tabs-holder-z-index: 250; width: 100% !important; // avoid sticky elements overlap header and other elements z-index: 1; - @include gl-mb-3; + margin-bottom: $gl-spacing-scale-3; } .tree-list-holder { @@ -814,7 +814,7 @@ $tabs-holder-z-index: 250; @include media-breakpoint-down(sm) { padding-top: $gl-spacing-scale-3; padding-bottom: $gl-spacing-scale-3; - @include gl-pr-3; + padding-right: $gl-spacing-scale-3; } } @@ -842,7 +842,7 @@ $tabs-holder-z-index: 250; // Adds a fix for the view app dropdown not showing up // correctly. position: relative; - @include gl-z-index-1; + z-index: 1; &.clickable:hover { background-color: var(--gray-50, $gray-50); @@ -856,9 +856,9 @@ $tabs-holder-z-index: 250; @include gl-left-50p; @include gl-top-half; @include gl-opacity-3; - @include gl-border-solid; + border-style: solid; @include gl-border-4; - @include gl-rounded-full; + border-radius: $gl-border-radius-full; width: 24px; height: 24px; @@ -868,7 +868,7 @@ $tabs-holder-z-index: 250; .mr-widget-extension-icon::after { @include gl-content-empty; position: absolute; - @include gl-rounded-full; + border-radius: $gl-border-radius-full; @include gl-left-50p; @include gl-top-half; @@ -1035,7 +1035,7 @@ $tabs-holder-z-index: 250; } p { - @include gl-font-base; + font-size: $gl-font-size; } li:not(:last-child) { @@ -1077,16 +1077,16 @@ $tabs-holder-z-index: 250; @include gl-bottom-0; @include gl-right-0; @include gl-opacity-3; - @include gl-rounded-full; - @include gl-border-solid; + border-radius: $gl-border-radius-full; + border-style: solid; @include gl-border-4; } .mr-widget-status-icon-level-1::after { @include gl-content-empty; position: absolute; - @include gl-rounded-full; - @include gl-border-solid; + border-radius: $gl-border-radius-full; + border-style: solid; @include gl-border-4; @include gl-left-2; @include gl-right-2; @@ -1208,7 +1208,7 @@ $tabs-holder-z-index: 250; margin: 0; @include gl-border-l-0; @include gl-border-r-0; - @include gl-border-b-0; + border-bottom-width: 0; @include gl-rounded-top-left-none; @include gl-rounded-top-right-none; } diff --git a/app/assets/stylesheets/page_bundles/ml_experiment_tracking.scss b/app/assets/stylesheets/page_bundles/ml_experiment_tracking.scss index 685719071b5..82fb631036c 100644 --- a/app/assets/stylesheets/page_bundles/ml_experiment_tracking.scss +++ b/app/assets/stylesheets/page_bundles/ml_experiment_tracking.scss @@ -7,7 +7,7 @@ table.ml-candidate-table { min-width: 100px; > * { - @include gl-display-block; + display: block; @include gl-text-truncate; } } diff --git a/app/assets/stylesheets/page_bundles/pipeline_editor.scss b/app/assets/stylesheets/page_bundles/pipeline_editor.scss index ae832f61086..9e09980200f 100644 --- a/app/assets/stylesheets/page_bundles/pipeline_editor.scss +++ b/app/assets/stylesheets/page_bundles/pipeline_editor.scss @@ -17,7 +17,7 @@ } .file-tree-includes-link:hover > svg { - @include gl-display-block; + display: block; top: 2px; } diff --git a/app/assets/stylesheets/page_bundles/projects.scss b/app/assets/stylesheets/page_bundles/projects.scss index c560740a742..f7c8961c2c6 100644 --- a/app/assets/stylesheets/page_bundles/projects.scss +++ b/app/assets/stylesheets/page_bundles/projects.scss @@ -280,7 +280,8 @@ .project-cell { @include gl-display-table-cell; @include gl-vertical-align-top; - @include gl-py-4; + padding-top: $gl-spacing-scale-4; + padding-bottom: $gl-spacing-scale-4; border-bottom: 1px solid var(--gray-50, $gray-50); } @@ -323,7 +324,7 @@ .controls { @include media-breakpoint-up(lg) { @include gl-justify-content-start; - @include gl-pr-9; + padding-right: $gl-spacing-scale-9; &:not(.with-pipeline-status) { .icon-wrapper:first-of-type { @@ -354,7 +355,7 @@ .icon-wrapper { @include media-breakpoint-down(md) { - @include gl-mr-0; + margin-right: 0; margin-left: $gl-spacing-scale-3; } @@ -397,7 +398,7 @@ .icon-wrapper { margin-left: $gl-spacing-scale-3; - @include gl-mr-0; + margin-right: 0; } .user-access-role { @@ -407,7 +408,7 @@ @include media-breakpoint-down(md) { .updated-note { - @include gl-mt-3; + margin-top: $gl-spacing-scale-3; @include gl-text-right; } } diff --git a/app/assets/stylesheets/page_bundles/todos.scss b/app/assets/stylesheets/page_bundles/todos.scss index 6fa92a2ea20..359d38bfa2d 100644 --- a/app/assets/stylesheets/page_bundles/todos.scss +++ b/app/assets/stylesheets/page_bundles/todos.scss @@ -37,7 +37,7 @@ } &:hover { - @include gl-border-t-1; + border-top-width: $gl-border-size-1; @include gl-border-t-transparent; @include gl-border-t-solid; } @@ -63,7 +63,7 @@ margin-right: 2.5rem; @include media-breakpoint-up(sm) { - @include gl-mr-0; + margin-right: 0; @include gl-text-overflow-ellipsis; @include gl-white-space-nowrap; @include gl-overflow-hidden; @@ -72,18 +72,19 @@ .todo-body { p { - @include gl-display-inline; + display: inline; color: var(--gl-text-color, $gl-text-color); } pre.code.highlight { padding-top: 0; - padding-bottom: 0; - @include gl-px-1; + padding-bottom: 0; + padding-left: $gl-spacing-scale-1; + padding-right: $gl-spacing-scale-1; margin: 0; @include gl-border-0; border-radius: $gl-border-radius-base; - @include gl-display-inline-flex; + display: inline-flex; background: var(--gray-50, $gray-50); color: var(--gl-text-color, $gl-text-color); } diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss index 102d2045af2..e0821b11bef 100644 --- a/app/assets/stylesheets/page_bundles/work_items.scss +++ b/app/assets/stylesheets/page_bundles/work_items.scss @@ -247,16 +247,16 @@ $disclosure-hierarchy-chevron-dimension: 1.2rem; } .disclosure-hierarchy-button { - @include gl-pl-4; + padding-left: $gl-spacing-scale-4; padding-top: $gl-spacing-scale-3; padding-bottom: $gl-spacing-scale-3; display: flex; position: relative; font-size: $gl-font-size-sm; border: 1px solid var(--gray-100, $gray-100); - @include gl-border-r-none; - @include gl-border-l-none; - @include gl-line-height-normal; + border-right-style: none; + border-left-style: none; + line-height: $gl-line-height-16; padding-right: $grid-size; max-width: $gl-spacing-scale-20; background: var(--gray-10, $white); @@ -288,7 +288,7 @@ $disclosure-hierarchy-chevron-dimension: 1.2rem; } .disclosure-hierarchy-item:first-child & { - @include gl-pl-3; + padding-left: $gl-spacing-scale-3; border-left: 1px solid var(--gray-100, $gray-100); @include gl-rounded-top-left-base; @include gl-rounded-bottom-left-base; @@ -306,7 +306,7 @@ $disclosure-hierarchy-chevron-dimension: 1.2rem; } .disclosure-hierarchy-item:last-child & { - @include gl-pr-4; + padding-right: $gl-spacing-scale-4; border-right: 1px solid var(--gray-100, $gray-100); @include gl-rounded-top-right-base; @include gl-rounded-bottom-right-base; @@ -343,7 +343,7 @@ $disclosure-hierarchy-chevron-dimension: 1.2rem; border-bottom: 1px solid var(--gray-400, $gray-400); @include hierarchy-active-item-color; z-index: 2; - @include gl-rounded-small; + border-radius: $gl-border-radius-small; &::before, &::after { box-shadow: 2px -2px 0 1px $blue-400; diff --git a/app/assets/stylesheets/pages/colors.scss b/app/assets/stylesheets/pages/colors.scss index ffc4e4992ab..5d3053a33b1 100644 --- a/app/assets/stylesheets/pages/colors.scss +++ b/app/assets/stylesheets/pages/colors.scss @@ -3,14 +3,14 @@ } .color-item-color { - @include gl-flex-shrink-0; - @include gl-mr-3; + flex-shrink: 0; + margin-right: $gl-spacing-scale-3; top: 0; } .right-sidebar-collapsed { .color-item { - @include gl-pt-3; + padding-top: $gl-spacing-scale-3; } .color-item-color { diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 58fe4e8504c..b0519119bd8 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -259,7 +259,7 @@ } .header-main-content & { - @include gl-mr-2; + margin-right: $gl-spacing-scale-2; } } diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index d01286bd209..91f123d7b26 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -91,7 +91,8 @@ table.pipeline-project-metrics tr td { } .user-access-role { - @include gl-px-3; + padding-left: $gl-spacing-scale-3; + padding-right: $gl-spacing-scale-3; display: inline-block; color: $gl-text-color-secondary; font-size: 12px; diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index f57a8519992..69fed5d59fe 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -198,7 +198,7 @@ ul.related-merge-requests > li gl-emoji { display: flex; .new-branch-col { - @include gl-pb-0; + padding-bottom: 0; align-self: flex-end; } } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 1494e95c922..a706c003c51 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -1032,7 +1032,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; &.is-active { svg { - @include gl-text-green-500; + color: $green-500; } &:hover, diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index 1548a63ef6e..0d8fbc744c9 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -61,7 +61,7 @@ .settings-section::after { content: ''; display: block; - @include gl-mb-7; + margin-bottom: $gl-spacing-scale-7; } .settings-section, @@ -71,11 +71,11 @@ // Fix for sticky header when there is no search bar. .flash-container + .settings-section { - @include gl-pt-3; + padding-top: $gl-spacing-scale-3; } .settings-section ~ .settings-section { - @include gl-pt-6; + padding-top: $gl-spacing-scale-6; } .settings-section:not(.settings-section-no-bottom) ~ .settings-section { @@ -83,10 +83,10 @@ } .settings-section-no-bottom::after { - @include gl-pb-0; + padding-bottom: 0; @include media-breakpoint-up(sm) { - @include gl-pb-5; + padding-bottom: $gl-spacing-scale-5; } } diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index 5fec8eb661d..27338c34741 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -134,7 +134,7 @@ } .gl-last-of-type-border-b-0:last-of-type { - @include gl-border-b-0; + border-bottom-width: 0; } .gl-md-h-9 { diff --git a/app/assets/stylesheets/vendors/atwho.scss b/app/assets/stylesheets/vendors/atwho.scss index 41f275ab8be..338ec571114 100644 --- a/app/assets/stylesheets/vendors/atwho.scss +++ b/app/assets/stylesheets/vendors/atwho.scss @@ -4,10 +4,10 @@ min-width: $gl-new-dropdown-min-width; max-width: $gl-new-dropdown-max-width; - @include gl-border-b-1; - @include gl-border-b-solid; - @include gl-border-b-gray-100; - @include gl-rounded-lg; + border-bottom-width: $gl-border-size-1; + border-bottom-style: solid; + border-bottom-color: $gray-100; + border-radius: $gl-border-radius-large; @include gl-shadow-md; @@ -41,17 +41,20 @@ // TODO: fallback to global style .atwho-view-ul { - @include gl-py-2; + padding-top: $gl-spacing-scale-2; + padding-bottom: $gl-spacing-scale-2; max-height: $gl-max-dropdown-max-height; li { border: 0; padding: $gl-padding-6; - @include gl-my-2; - @include gl-mx-3; - @include gl-rounded-small; - @include gl-line-height-normal; + margin-top: $gl-spacing-scale-2; + margin-bottom: $gl-spacing-scale-2; + margin-left: $gl-spacing-scale-3; + margin-right: $gl-spacing-scale-3; + border-radius: $gl-border-radius-small; + line-height: $gl-line-height-16; &.cur { @include gl-focus; @@ -78,7 +81,7 @@ } gl-emoji { - @include gl-mr-2; + margin-right: $gl-spacing-scale-2; vertical-align: text-top; img { @@ -90,7 +93,7 @@ .dropdown-label-box { position: relative; top: -1px; - @include gl-mr-2; + margin-right: $gl-spacing-scale-2; } } } |