A11y: do not use px-based fontsizes

This commit is contained in:
Richard Schreiber
2025-04-22 19:47:20 +02:00
committed by GitHub
parent 025ee6710c
commit 515f79b206
2 changed files with 82 additions and 0 deletions

View File

@@ -31,6 +31,32 @@ a.btn, button.btn {
display: inline;
}
.form-horizontal {
/* Fix bootstrap using absolute px for fontsize-derived values based on rem */
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
padding-top: calc(#{$padding-base-vertical} + 1px);
}
.radio,
.checkbox {
min-height: calc(#{$line-height-computed} + #{$padding-base-vertical} + 1px);
}
@media (min-width: $screen-sm-min) {
.control-label {
padding-top: calc(#{$padding-base-vertical} + 1px);
}
}
}
output {
padding-top: $padding-base-vertical;
}
.form-control-static {
padding-top: calc(#{$padding-base-vertical} + 1px);
padding-bottom: calc(#{$padding-base-vertical} + 1px);
}
.form-control + .form-control-feedback {
/* Fix for https://github.com/FortAwesome/Font-Awesome/issues/4313 */
position: absolute;

View File

@@ -1,6 +1,40 @@
// before variables.scss because it only affects presale, not control
$body-bg: #f5f5f5 !default;
$font-size-base: 0.875rem !default;/* 14px/16px = 0.875rem */
$font-size-large: ($font-size-base * 1.25) !default;
$font-size-small: ($font-size-base * .85) !default;
$font-size-h1: ($font-size-base * 2.6) !default;
$font-size-h2: ($font-size-base * 2.15) !default;
$font-size-h3: ($font-size-base * 1.7) !default;
$font-size-h4: ($font-size-base * 1.25) !default;
$font-size-h5: $font-size-base !default;
$font-size-h6: ($font-size-base * .85) !default;
$line-height-base: 1.428571429 !default;
$line-height-computed: ($font-size-base * $line-height-base) !default;
$line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome
$line-height-small: 1.5 !default;
$padding-base-vertical: 0.4285714286rem !default;/* 6px / 14px */
$padding-base-horizontal: 0.8571428571rem !default;/* 12px / 14px */
$padding-large-vertical: 0.7142857143rem !default;/* 10px / 14px */
$padding-large-horizontal: 1.1428571429rem !default;/* 16px / 14px */
$padding-small-vertical: 0.3571428571rem !default;/* 5px / 14px */
$padding-small-horizontal: 0.7142857143rem !default;/* 10px / 14px */
$padding-xs-vertical: 0.07142857143rem !default;/* 1px / 14px */
$padding-xs-horizontal: 0.3571428571rem !default;/* 5px / 14px */
$navbar-height: 3.5714285714rem !default;/* 50px / 14px */
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 0.1428571429rem) !default; /* 2px@14px = 0.1428571429rem */
$input-height-large: ($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 0.1428571429rem !default;
$input-height-small: ($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 0.1428571429rem !default;
/* imports */
@import "../../pretixbase/scss/_theme_variables.scss";
@import "../../pretixbase/scss/bootstrap_vars.scss";
@@ -20,6 +54,28 @@ $body-bg: #f5f5f5 !default;
@import "_checkout.scss";
@import "../../pretixbase/scss/webfont.scss";
html {
font-size: 1em;
}
/* fixe for bootstrap using px-values for fontsize */
.panel-title {
font-size: ($font-size-base * 1.125);
}
.lead {
font-size: ($font-size-base * 1.15);
}
small, .small {
font-size: (100% * $font-size-small / $font-size-base);
}
pre {
padding: ($line-height-computed / 2);
font-size: $font-size-base;
}
/* See https://github.com/pretix/pretix/pull/761 */
.bootstrap-datetimepicker-widget table td span {
line-height: 1.8em;