diff options
Diffstat (limited to 'app/assets/stylesheets/framework')
18 files changed, 111 insertions, 98 deletions
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, |