github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-29 02:43:40 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #17904 from overleaf/td-bs5-button-focus-style

Browse source 
Bootstrap 5: fixes to button focus ring and background colour

GitOrigin-RevId: d89077e975c2aeb7fea385e0b8c34c92c104cc2b
This commit is contained in:
Rebeka Dekany 2024-04-16 16:56:43 +02:00 committed by Copybot
parent 4a68a5f8bc
commit f6d5152a37
2 changed files with 89 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss
View file

@ -44,88 +44,3 @@
border-color: var(--bs-btn-border-color); border-color: var(--bs-btn-border-color);
} }
} }
.btn {
// Focus style for all buttons
--bs-btn-focus-box-shadow: 0 0 0 2px var(--border-active-dark);
// Sizes
// Default size
@include ol-button-size(
$font-size: var(--font-size-03),
$line-height: var(--line-height-03),
$padding-y: var(--spacing-03)
);
&.btn-lg {
@include ol-button-size(
$font-size: var(--font-size-03),
$line-height: var(--line-height-03),
$padding-y: var(--spacing-05)
);
}
&.btn-sm {
@include ol-button-size(
$font-size: var(--font-size-02),
$line-height: var(--line-height-02),
$padding-y: var(--spacing-01),
$padding-x: var(--spacing-05)
);
}
// Variants
&.btn-primary {
@include ol-button-variant(
$color: var(--content-primary-dark),
$background: var(--bg-accent-01),
$hover-background: var(--bg-accent-02),
$hover-border: var(--bg-accent-02)
);
}
&.btn-secondary {
@include ol-button-variant(
$color: var(--content-primary),
$background: var(--bg-light-primary),
$border: var(--border-primary),
$hover-background: var(--bg-light-tertiary),
$hover-border: var(--border-primary),
$borderless: false
);
}
&.btn-ghost {
@include ol-button-variant(
$color: var(--content-primary),
$background: var(--bg-light-primary),
$hover-background: var(--bg-light-tertiary)
);
}
&.btn-danger {
@include ol-button-variant(
$color: var(--content-primary-dark),
$background: var(--bg-danger-01),
$border: var(--bg-danger-01),
$hover-background: var(--bg-danger-02)
);
}
&.btn-danger-ghost {
@include ol-button-variant(
$color: var(--content-danger),
$background: var(--bg-light-primary),
$hover-background: var(--bg-danger-03)
);
}
&.btn-premium {
@include ol-button-variant(
$color: var(--content-primary-dark),
$background: var(--blue-70)
);
background: var(--premium-gradient);
}
}

89
services/web/frontend/stylesheets/bootstrap-5/components/button.scss
View file

@ -1,3 +1,92 @@
.btn {
// Focus style for all buttons
--bs-btn-focus-box-shadow: 0 0 0 2px var(--border-active-dark);
&:focus-visible {
background-color: var(--bs-btn-bg);
}
// Sizes
// Default size
@include ol-button-size(
$font-size: var(--font-size-03),
$line-height: var(--line-height-03),
$padding-y: var(--spacing-03)
);
&.btn-lg {
@include ol-button-size(
$font-size: var(--font-size-03),
$line-height: var(--line-height-03),
$padding-y: var(--spacing-05)
);
}
&.btn-sm {
@include ol-button-size(
$font-size: var(--font-size-02),
$line-height: var(--line-height-02),
$padding-y: var(--spacing-01),
$padding-x: var(--spacing-05)
);
}
// Variants
&.btn-primary {
@include ol-button-variant(
$color: var(--content-primary-dark),
$background: var(--bg-accent-01),
$hover-background: var(--bg-accent-02),
$hover-border: var(--bg-accent-02)
);
}
&.btn-secondary {
@include ol-button-variant(
$color: var(--content-primary),
$background: var(--bg-light-primary),
$border: var(--border-primary),
$hover-background: var(--bg-light-tertiary),
$hover-border: var(--border-primary),
$borderless: false
);
}
&.btn-ghost {
@include ol-button-variant(
$color: var(--content-primary),
$background: var(--bg-light-primary),
$hover-background: var(--bg-light-tertiary)
);
}
&.btn-danger {
@include ol-button-variant(
$color: var(--content-primary-dark),
$background: var(--bg-danger-01),
$border: var(--bg-danger-01),
$hover-background: var(--bg-danger-02)
);
}
&.btn-danger-ghost {
@include ol-button-variant(
$color: var(--content-danger),
$background: var(--bg-light-primary),
$hover-background: var(--bg-danger-03)
);
}
&.btn-premium {
@include ol-button-variant(
$color: var(--content-primary-dark),
$background: var(--blue-70)
);
background: var(--premium-gradient);
}
}
.button-loading { .button-loading {
align-items: center; align-items: center;
display: inline-grid; display: inline-grid;