21b1bf81b9
Instead of redefining font-weights, we override the BS variables and add one extra font-weight in the newly-introduced extended utilities file. After this change all the variables needed replacing and some tweaking was needed to get the same or closely similar result as before this change. By doing so the font-weight classes in the typography file were obsolete and hence removed. Some other font-weight issues which were already there have been fixed in this commit too.
104 lines
5.0 KiB
SCSS
104 lines
5.0 KiB
SCSS
//
|
|
// BS Variables
|
|
//
|
|
/* $enable-responsive-font-sizes: true; */
|
|
|
|
// Colors
|
|
$white: #FFFFFF;
|
|
$gray-100: #F8F8F8 !default;
|
|
$gray-200: #F2F2F2 !default;
|
|
$gray-300: #DEE2E6 !default;
|
|
$gray-400: #D5D5D5 !default;
|
|
$gray-500: #ADB5BD !default;
|
|
$gray-600: #888888 !default;
|
|
$gray-700: #707070 !default;
|
|
$gray-800: #343A40 !default;
|
|
$gray-900: #282F33 !default;
|
|
|
|
$blue: #77b5d1;
|
|
$purple: #714B67;
|
|
$cyan: #0dcaf0;
|
|
$red: #D9534F;
|
|
$orange: #f39c1e;
|
|
$green: #519161;
|
|
$teal: #017e84;
|
|
|
|
$primary: $teal;
|
|
$secondary: $purple;
|
|
$light: $gray-100;
|
|
$dark: $gray-600;
|
|
$success: $green;
|
|
$info: $blue;
|
|
$warning: $orange;
|
|
$danger: $red;
|
|
|
|
// Fonts
|
|
// Font, line-height, and color for body text, headings, and more.
|
|
$font-family-sans-serif: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !default;
|
|
|
|
// Change scale from Major Third to Major Second (ref: https://type-scale.com/)
|
|
$font-size-base: 1rem;
|
|
$h1-font-size: $font-size-base * 1.802 !default;
|
|
$h2-font-size: $font-size-base * 1.602 !default;
|
|
$h3-font-size: $font-size-base * 1.424 !default;
|
|
$h4-font-size: $font-size-base * 1.266 !default;
|
|
$h5-font-size: $font-size-base * 1.125 !default;
|
|
$h6-font-size: $font-size-base !default;
|
|
|
|
|
|
$font-weight-lighter: 200;
|
|
$font-weight-light: 300;
|
|
$font-weight-normal: 400;
|
|
$font-weight-bold: 600;
|
|
$font-weight-bolder: 700;
|
|
|
|
// Images
|
|
|
|
$thumbnail-padding: .5rem;
|
|
|
|
// Buttons
|
|
// For each of Bootstrap's buttons, define text, background, and border color.
|
|
|
|
$btn-font-size: .875rem;
|
|
$btn-font-weight: 500;
|
|
$btn-close-focus-shadow: 0 0 0 0 transparent;
|
|
$btn-close-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" fill="#000000"><path d="M15,16c-.27,0-.54-.11-.73-.31l-4.21-4.44c-.38-.4-.36-1.03,.04-1.41s1.03-.36,1.41,.04l3.48,3.67,3.42-3.67c.38-.4,1.01-.42,1.41-.05,.4,.38,.42,1.01,.05,1.41l-4.15,4.44c-.19,.2-.45,.32-.73,.32h0Z"/><path d="M10.79,20.44c-.25,0-.49-.09-.69-.27-.4-.38-.42-1.01-.04-1.41l4.21-4.45c.19-.2,.45-.31,.73-.31h0c.28,0,.54,.12,.73,.32l4.15,4.45c.38,.4,.35,1.04-.05,1.41-.41,.38-1.04,.35-1.41-.05l-3.42-3.67-3.48,3.67c-.2,.21-.46,.31-.73,.31Z"/><path d="M15,28.37c-7.37,0-13.37-6-13.37-13.37S7.63,1.63,15,1.63s13.37,6,13.37,13.37-6,13.37-13.37,13.37Zm0-24.74C8.73,3.63,3.63,8.73,3.63,15s5.1,11.37,11.37,11.37,11.37-5.1,11.37-11.37S21.27,3.63,15,3.63Z"/></svg>');
|
|
$btn-close-width: 2rem;
|
|
|
|
// Dropdowns
|
|
$dropdown-min-width: 4.5rem;
|
|
|
|
// Modals
|
|
$modal-backdrop-opacity: .7;
|
|
|
|
$modal-content-bg: transparent;
|
|
$modal-content-border-color: transparent;
|
|
$modal-content-border-width: 0;
|
|
|
|
$modal-header-padding: 0;
|
|
|
|
$modal-sm: fit-content;
|
|
$modal-md: fit-content;
|
|
$modal-lg: fit-content;
|
|
$modal-xl: fit-content;
|
|
|
|
// Accordion
|
|
$accordion-body-padding-y: 0 !default;
|
|
$accordion-body-padding-x: 0 !default;
|
|
$accordion-color: shade-color($gray-200, 60%) !default;
|
|
$accordion-bg: $gray-200;
|
|
|
|
$accordion-button-color: $accordion-color !default;
|
|
$accordion-button-active-color: $accordion-button-color !default;
|
|
$accordion-button-bg: $accordion-bg !default;
|
|
$accordion-button-active-bg: $accordion-button-bg !default;
|
|
$accordion-button-focus-box-shadow: transparent;
|
|
$accordion-icon-transform: rotate(0deg) !default;
|
|
|
|
//Alert
|
|
$alert-border-width: 3px;
|
|
$alert-border-scale: 0;
|
|
$alert-border-radius: 0 3px 3px 0;
|
|
$alert-bg-scale: -87%;
|
|
$alert-color-scale: 40%;
|