Skip to content

G
gitlab-ce
Commit 1fa19510 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas
Browse files
Options

Merge branch 'ps-improve-enhanced-notify-css-size' into 'master' 

Reduce compile size of notify_enhanced

See merge request gitlab-org/gitlab!84430
parents 6958716d f73978fa
Show whitespace changes
Inline Side-by-side
Showing with 393 additions and 357 deletions
app/assets/stylesheets/bootstrap_migration.scss
View file @ 1fa19510
$text-color: $gl-text-color;
$brand-primary: $blue-500;
$brand-success: $green-500;
$brand-info: $blue-500;
$brand-warning: $orange-500;
$brand-danger: $red-500;
$border-radius-base: $gl-border-radius-base;
$modal-body-bg: $white;
$input-border: $border-color;
$padding-base-vertical: $gl-vert-padding;
$padding-base-horizontal: $gl-padding;
/*
* Scss to help with bootstrap 3 to 4 migration
*/
body,
.form-control,
.search form {
// Override default font size used in non-csslab UI
// Use rem to keep default font-size at 14px on body so 1rem still
// fits 8px grid, but also allow users to change browser font size
font-size: 0.875rem;
}
legend {
border-bottom: 1px solid $border-color;
margin-bottom: 20px;
}
button,
html [type='button'],
[type='reset'],
[type='submit'],
[role='button'] {
// Override bootstrap reboot
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-appearance: inherit;
cursor: pointer;
}
h1,
.h1,
h2,
.h2,
h3,
.h3 {
margin-top: 20px;
margin-bottom: 10px;
}
h4,
.h4,
h5,
.h5,
h6,
.h6 {
margin-top: 10px;
margin-bottom: 10px;
}
/* Our adjustments to hx & .hx above add unnecessary margins to modal-title
and page-title in modals, so we set them to 0 in order to have properly
formatted modal headers. */
.modal-header {
.modal-title,
.page-title {
margin-top: 0;
margin-bottom: 0;
}
}
h5,
.h5 {
font-size: $gl-font-size;
}
input[type='file'] {
// Bootstrap 4 file input height is taller by default
// which makes them look ugly
line-height: 1;
}
b,
strong {
font-weight: bold;
}
a {
color: $blue-600;
}
hr {
overflow: hidden;
}
.form-group.row .col-form-label {
// Bootstrap 4 aligns labels to the left
// for horizontal forms
@include media-breakpoint-up(md) {
text-align: right;
}
}
code {
padding: 2px 4px;
color: $code-color;
background-color: $gray-50;
border-radius: $border-radius-default;
.code > &,
.build-log & {
background-color: inherit;
padding: unset;
}
}
table {
// Remove any table border lines
border-spacing: 0;
}
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.d#{$infix}-table-header-group {
display: table-header-group !important;
}
}
}
.text-secondary {
// Override Bootstrap's light secondary color
// We have to use !important because bootstrap has that set as well
color: $gl-text-color-secondary !important;
}
.bg-success,
.bg-primary,
.bg-info,
.bg-danger,
.bg-warning {
.card-header {
color: $white;
}
}
// Polyfill deprecated selectors
.hidden {
display: none !important;
visibility: hidden !important;
}
.hide {
display: none;
}
.dropdown-toggle::after,
.dropright .dropdown-menu-toggle::after {
// Remove bootstrap's dropdown caret
display: none;
}
// Add to .label so that old system notes that are saved to the db
// will still receive the correct styling
.badge:not(.gl-badge),
.label {
padding: 4px 5px;
font-size: 12px;
font-style: normal;
font-weight: $gl-font-weight-normal;
display: inline-block;
&.badge-gray {
background-color: $label-gray-bg;
color: $gl-text-color;
text-shadow: none;
}
&.badge-inverse {
background-color: $label-inverse-bg;
}
}
.divider {
// copied rules from node_modules/bootstrap/scss/_dropdown.scss:116
// this might be safe to just remove instead
// most places that use divider add overrides to undo these things
// there is also a probably-unintentional use in deprecated_dropdown_divider.scss
// so we would end up with .gl-dropdown .dropdown-divider
height: 0;
margin: 4px 0;
overflow: hidden;
border-top: 1px solid $border-color;
}
.info-well {
background: $gray-10;
color: $gl-text-color;
border: 1px solid $border-color;
border-radius: 4px;
margin-bottom: 16px;
.well-segment {
padding: 16px;
&:not(:last-of-type) {
border-bottom: 1px solid $well-inner-border;
}
p,
ol,
ul,
.form-group {
&:last-of-type {
margin-bottom: 0;
}
}
}
.badge.badge-gray {
background-color: $well-expand-item;
}
}
.card {
&.card-without-border,
&.bg-light {
border: 0 !important;
}
}
.nav-tabs {
// Override bootstrap's default border
border-bottom: 0;
.nav-link {
border-top: 0;
border-left: 0;
border-right: 0;
}
.nav-item {
margin-bottom: 0;
}
}
pre code {
white-space: pre-wrap;
}
.alert {
border-radius: 0;
}
.alert-success {
background-color: $green-500;
border-color: $green-500;
}
.alert-info {
background-color: $blue-500;
border-color: $blue-500;
}
.alert-warning {
background-color: $orange-500;
border-color: $orange-500;
}
.alert-danger {
background-color: $red-500;
border-color: $red-500;
}
.alert-success,
.alert-info,
.alert-warning,
.alert-danger {
color: $white;
h4,
.alert-link {
color: $white;
}
}
input[type=color].form-control {
height: $input-height;
}
.toggle-sidebar-button {
.collapse-text,
.icon-chevron-double-lg-left,
.icon-chevron-double-lg-right {
color: $gl-text-color-secondary;
}
}
.project-templates-buttons {
.btn {
vertical-align: unset;
}
}
/*
Bootstrap 4.1.2 introduced a new default vertical alignment which breaks our icons,
so we need to reset the vertical alignment to the default value. See:
- https://gitlab.com/gitlab-org/gitlab-foss/issues/51362
*/
svg {
vertical-align: baseline;
}
// ---
// Scss to help with bootstrap 3 to 4 migration
// ---
@import 'bootstrap_migration_variables';
@import 'bootstrap_migration_reset';
@import 'bootstrap_migration_components';
app/assets/stylesheets/bootstrap_migration_components.scss 0 → 100644
View file @ 1fa19510
// ---
// Scss to help with bootstrap 3 to 4 migration of bootstrap components
// ---
.form-control,
.search form {
// Override default font size used in non-csslab UI
// Use rem to keep default font-size at 14px on body so 1rem still
// fits 8px grid, but also allow users to change browser font size
font-size: 0.875rem;
}
/* Our adjustments to hx & .hx above add unnecessary margins to modal-title
and page-title in modals, so we set them to 0 in order to have properly
formatted modal headers. */
.modal-header {
.modal-title,
.page-title {
margin-top: 0;
margin-bottom: 0;
}
}
input[type='file'] {
// Bootstrap 4 file input height is taller by default
// which makes them look ugly
line-height: 1;
}
.form-group.row .col-form-label {
// Bootstrap 4 aligns labels to the left
// for horizontal forms
@include media-breakpoint-up(md) {
text-align: right;
}
}
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.d#{$infix}-table-header-group {
display: table-header-group !important;
}
}
}
.text-secondary {
// Override Bootstrap's light secondary color
// We have to use !important because bootstrap has that set as well
color: $gl-text-color-secondary !important;
}
.bg-success,
.bg-primary,
.bg-info,
.bg-danger,
.bg-warning {
.card-header {
color: $white;
}
}
// Polyfill deprecated selectors
.hidden {
display: none !important;
visibility: hidden !important;
}
.hide {
display: none;
}
.dropdown-toggle::after,
.dropright .dropdown-menu-toggle::after {
// Remove bootstrap's dropdown caret
display: none;
}
// Add to .label so that old system notes that are saved to the db
// will still receive the correct styling
.badge:not(.gl-badge),
.label {
padding: 4px 5px;
font-size: 12px;
font-style: normal;
font-weight: $gl-font-weight-normal;
display: inline-block;
&.badge-gray {
background-color: $label-gray-bg;
color: $gl-text-color;
text-shadow: none;
}
&.badge-inverse {
background-color: $label-inverse-bg;
}
}
.divider {
// copied rules from node_modules/bootstrap/scss/_dropdown.scss:116
// this might be safe to just remove instead
// most places that use divider add overrides to undo these things
// there is also a probably-unintentional use in deprecated_dropdown_divider.scss
// so we would end up with .gl-dropdown .dropdown-divider
height: 0;
margin: 4px 0;
overflow: hidden;
border-top: 1px solid $border-color;
}
.info-well {
background: $gray-10;
color: $gl-text-color;
border: 1px solid $border-color;
border-radius: 4px;
margin-bottom: 16px;
.well-segment {
padding: 16px;
&:not(:last-of-type) {
border-bottom: 1px solid $well-inner-border;
}
p,
ol,
ul,
.form-group {
&:last-of-type {
margin-bottom: 0;
}
}
}
.badge.badge-gray {
background-color: $well-expand-item;
}
}
.card {
&.card-without-border,
&.bg-light {
border: 0 !important;
}
}
.nav-tabs {
// Override bootstrap's default border
border-bottom: 0;
.nav-link {
border-top: 0;
border-left: 0;
border-right: 0;
}
.nav-item {
margin-bottom: 0;
}
}
.alert {
border-radius: 0;
}
.alert-success {
background-color: $green-500;
border-color: $green-500;
}
.alert-info {
background-color: $blue-500;
border-color: $blue-500;
}
.alert-warning {
background-color: $orange-500;
border-color: $orange-500;
}
.alert-danger {
background-color: $red-500;
border-color: $red-500;
}
.alert-success,
.alert-info,
.alert-warning,
.alert-danger {
color: $white;
h4,
.alert-link {
color: $white;
}
}
input[type=color].form-control {
height: $input-height;
}
.toggle-sidebar-button {
.collapse-text,
.icon-chevron-double-lg-left,
.icon-chevron-double-lg-right {
color: $gl-text-color-secondary;
}
}
.project-templates-buttons {
.btn {
vertical-align: unset;
}
}
app/assets/stylesheets/bootstrap_migration_reset.scss 0 → 100644
View file @ 1fa19510
// ---
// Scss to help with bootstrap 3 to 4 migration of core elements
// ---
body {
// Override default font size used in non-csslab UI
// Use rem to keep default font-size at 14px on body so 1rem still
// fits 8px grid, but also allow users to change browser font size
font-size: 0.875rem;
}
legend {
border-bottom: 1px solid $border-color;
margin-bottom: 20px;
}
button,
html [type='button'],
[type='reset'],
[type='submit'],
[role='button'] {
// Override bootstrap reboot
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-appearance: inherit;
cursor: pointer;
}
h1,
.h1,
h2,
.h2,
h3,
.h3 {
margin-top: 20px;
margin-bottom: 10px;
}
h4,
.h4,
h5,
.h5,
h6,
.h6 {
margin-top: 10px;
margin-bottom: 10px;
}
h5,
.h5 {
font-size: $gl-font-size;
}
b,
strong {
font-weight: bold;
}
a {
color: $blue-600;
}
hr {
overflow: hidden;
}
code {
padding: 2px 4px;
color: $code-color;
background-color: $gray-50;
border-radius: $border-radius-default;
.code > &,
.build-log & {
background-color: inherit;
padding: unset;
}
}
table {
// Remove any table border lines
border-spacing: 0;
}
pre code {
white-space: pre-wrap;
}
/*
Bootstrap 4.1.2 introduced a new default vertical alignment which breaks our icons,
so we need to reset the vertical alignment to the default value. See:
- https://gitlab.com/gitlab-org/gitlab-foss/issues/51362
*/
svg {
vertical-align: baseline;
}
app/assets/stylesheets/bootstrap_migration_variables.scss 0 → 100644
View file @ 1fa19510
$text-color: $gl-text-color;
$brand-primary: $blue-500;
$brand-success: $green-500;
$brand-info: $blue-500;
$brand-warning: $orange-500;
$brand-danger: $red-500;
$border-radius-base: $gl-border-radius-base;
$modal-body-bg: $white;
$input-border: $border-color;
$padding-base-vertical: $gl-vert-padding;
$padding-base-horizontal: $gl-padding;
app/assets/stylesheets/notify_base.scss
View file @ 1fa19510
@import 'framework/mixins';
@import 'framework/variables';
@import 'framework/variables_overrides';
@import 'framework/mixins';
img {
max-width: 100%;
......
app/assets/stylesheets/notify_enhanced.scss
View file @ 1fa19510
......@@ -2,20 +2,30 @@
// keep parts that affect elements that can appear in emails;
// omit Bootstrap Reboot since it adds unnecessary styles to every element.
@import 'notify_base';
// bootstrap variables, mixins, functions
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
// bootstrap styles
@import 'bootstrap/scss/code';
// @gitlab/ui variables, mixins, functions
@import '@gitlab/ui/src/scss/variables';
@import '@gitlab/ui/src/scss/utility-mixins/index';
@import '@gitlab/ui/src/scss/components';
@import 'bootstrap_migration';
@import 'framework/common';
// @gitlab/ui styles
@import '@gitlab/ui/src/components/base/icon/icon';
@import '@gitlab/ui/src/components/base/label/label';
// gitlab styles
@import 'bootstrap_migration_variables';
@import 'bootstrap_migration_reset';
@import 'framework/gfm';
@import 'framework/kbd';
@import 'framework/tables';
@import 'framework/typography';
@import 'framework/emojis';
body {
font-family: $regular-font;
......
app/assets/stylesheets/startup/startup-dark.scss
View file @ 1fa19510
......@@ -543,9 +543,7 @@ a.gl-badge.badge-warning:active {
padding-right: 2rem;
padding-left: 1.75rem;
}
body,
.form-control,
.search form {
body {
font-size: 0.875rem;
}
button,
......@@ -563,6 +561,13 @@ strong {
a {
color: #63a6e9;
}
svg {
vertical-align: baseline;
}
.form-control,
.search form {
font-size: 0.875rem;
}
.hidden {
display: none !important;
visibility: hidden !important;
......@@ -587,9 +592,6 @@ a {
.toggle-sidebar-button .icon-chevron-double-lg-left {
color: #999;
}
svg {
vertical-align: baseline;
}
html {
overflow-y: scroll;
}
......
app/assets/stylesheets/startup/startup-general.scss
View file @ 1fa19510
......@@ -529,9 +529,7 @@ a.gl-badge.badge-warning:active {
padding-right: 2rem;
padding-left: 1.75rem;
}
body,
.form-control,
.search form {
body {
font-size: 0.875rem;
}
button,
......@@ -549,6 +547,13 @@ strong {
a {
color: #1068bf;
}
svg {
vertical-align: baseline;
}
.form-control,
.search form {
font-size: 0.875rem;
}
.hidden {
display: none !important;
visibility: hidden !important;
......@@ -573,9 +578,6 @@ a {
.toggle-sidebar-button .icon-chevron-double-lg-left {
color: #666;
}
svg {
vertical-align: baseline;
}
html {
overflow-y: scroll;
}
......
app/assets/stylesheets/startup/startup-signin.scss
View file @ 1fa19510
......@@ -369,8 +369,7 @@ fieldset:disabled a.btn {
outline: none;
background-color: #0b5cad;
}
body,
.form-control {
body {
font-size: 0.875rem;
}
[type="submit"] {
......@@ -387,6 +386,12 @@ a {
hr {
overflow: hidden;
}
svg {
vertical-align: baseline;
}
.form-control {
font-size: 0.875rem;
}
.hidden {
display: none !important;
visibility: hidden !important;
......@@ -394,9 +399,6 @@ hr {
.hide {
display: none;
}
svg {
vertical-align: baseline;
}
html {
overflow-y: scroll;
}
......
ee/app/assets/stylesheets/startup/startup-dark.scss
View file @ 1fa19510
......@@ -543,9 +543,7 @@ a.gl-badge.badge-warning:active {
padding-right: 2rem;
padding-left: 1.75rem;
}
body,
.form-control,
.search form {
body {
font-size: 0.875rem;
}
button,
......@@ -563,6 +561,13 @@ strong {
a {
color: #63a6e9;
}
svg {
vertical-align: baseline;
}
.form-control,
.search form {
font-size: 0.875rem;
}
.hidden {
display: none !important;
visibility: hidden !important;
......@@ -587,9 +592,6 @@ a {
.toggle-sidebar-button .icon-chevron-double-lg-left {
color: #999;
}
svg {
vertical-align: baseline;
}
html {
overflow-y: scroll;
}
......
ee/app/assets/stylesheets/startup/startup-general.scss
View file @ 1fa19510
......@@ -529,9 +529,7 @@ a.gl-badge.badge-warning:active {
padding-right: 2rem;
padding-left: 1.75rem;
}
body,
.form-control,
.search form {
body {
font-size: 0.875rem;
}
button,
......@@ -549,6 +547,13 @@ strong {
a {
color: #1068bf;
}
svg {
vertical-align: baseline;
}
.form-control,
.search form {
font-size: 0.875rem;
}
.hidden {
display: none !important;
visibility: hidden !important;
......@@ -573,9 +578,6 @@ a {
.toggle-sidebar-button .icon-chevron-double-lg-left {
color: #666;
}
svg {
vertical-align: baseline;
}
html {
overflow-y: scroll;
}
......
ee/app/assets/stylesheets/startup/startup-signin.scss
View file @ 1fa19510
......@@ -369,8 +369,7 @@ fieldset:disabled a.btn {
outline: none;
background-color: #0b5cad;
}
body,
.form-control {
body {
font-size: 0.875rem;
}
[type="submit"] {
......@@ -387,6 +386,12 @@ a {
hr {
overflow: hidden;
}
svg {
vertical-align: baseline;
}
.form-control {
font-size: 0.875rem;
}
.hidden {
display: none !important;
visibility: hidden !important;
......@@ -394,9 +399,6 @@ hr {
.hide {
display: none;
}
svg {
vertical-align: baseline;
}
html {
overflow-y: scroll;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7