Skip to content
Snippets Groups Projects
Select Git revision
  • feature/vite
  • step-2484-peerreview
  • main default protected
  • biest/issue-5051
  • biest/4317-circular-dependencies-in-plugins
  • step-3263
  • tests/simplify-jsonapi-tests
  • fix/typo-in-1a70031
  • feature/broadcasting
  • database-seeders-and-factories
  • feature/peer-review-2
  • feature-feedback-jsonapi
  • feature/peerreview
  • feature/balloon-plus
  • feature/stock-images-unsplash
  • tic-2588
  • 5.0
  • 5.2
  • biest/unlock-blocks
  • biest-1514
20 results
Blame Permalink
Forked from Stud.IP / Stud.IP
1599 commits behind the upstream repository.
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
variables.scss 6.41 KiB 
@import "../mixins/misc.scss";
@import '../mixins/colors.scss';

// Typography
$text-color:              #000;

$font-family-base:        "Lato", sans-serif;

$font-size-base:          14px;
$font-size-large:         ceil($font-size-base * 1.25); // ~18px
$font-size-small:         ceil($font-size-base * 0.85); // ~12px

$font-size-h1:            floor($font-size-base * 1.4); // ~36px
$font-size-h2:            floor($font-size-base * 1.2); // ~30px
$font-size-h3:            ceil($font-size-base * 1.1); // ~24px
$font-size-h4:            $font-size-base; // ~18px
$font-size-h5:            $font-size-base;
$font-size-h6:            $font-size-base;

//** Unit-less `line-height` for use in components like buttons.
$line-height-base:        1.428571429; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
$line-height-computed:    floor($font-size-base * $line-height-base); // ~20px

//** By default, this inherits from the `<body>`.
$headings-font-family:    inherit;
$headings-font-weight:    700;
$headings-line-height:    1.1;
$headings-color:          #000;

// Design specific
$bar-bottom-container-height: 40px;
$header-height: 80px;

//Avatar sizes:
$avatar-small:  25px;
$avatar-medium: 100px;
$avatar-normal: 250px;

$sidebar-border-width: 1px;

$drag_and_drop_z_index: 1000;
$drag_and_drop_border: 1px solid $base-color;

$transition-duration: .3s;
$transition-duration-slow: .5s;

// Layout
$page-margin: 15px;

$sidebar-padding: 12px;
$sidebar-width: 270px;

$content-width: 400px;
$content-margin: 12px;
$max-content-width: 4 * $sidebar-width + $page-margin;

$footer-height: 32px;

$site-width: ($page-margin * 2 + $sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2 + $content-width + $content-margin * 2);
$page-width: ($sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2 + $content-width + $content-margin * 2);

$grid-gap: 0;

:root {
    // The special handling for -- as #{"--"} seems to be neccessary to make
    // scss evaluate the color variables
    #{"--"}text-color: $text-color;
    #{"--"}active-color: $active-color;
    #{"--"}activity-color: $activity-color;
    #{"--"}activity-color-20: $activity-color-20;
    #{"--"}activity-color-40: $activity-color-40;
    #{"--"}activity-color-60: $activity-color-60;
    #{"--"}activity-color-80: $activity-color-80;
    #{"--"}base-color: $base-color;
    #{"--"}base-color-20: $base-color-20;
    #{"--"}base-color-40: $base-color-40;
    #{"--"}base-color-60: $base-color-60;
    #{"--"}base-color-80: $base-color-80;
    #{"--"}base-gray: $base-gray;
    #{"--"}black: $black;
    #{"--"}brand-color-dark: $brand-color-dark;
    #{"--"}brand-color-darker: $brand-color-darker;
    #{"--"}brand-color-light: $brand-color-light;
    #{"--"}brand-color-lighter: $brand-color-lighter;
    #{"--"}brown: $brown;
    #{"--"}brown-20: $brown-20;
    #{"--"}brown-40: $brown-40;
    #{"--"}brown-60: $brown-60;
    #{"--"}brown-80: $brown-80;
    #{"--"}content-color: $content-color;
    #{"--"}content-color-10: $content-color-10;
    #{"--"}content-color-20: $content-color-20;
    #{"--"}content-color-40: $content-color-40;
    #{"--"}content-color-60: $content-color-60;
    #{"--"}content-color-80: $content-color-80;
    #{"--"}contrast-content-gray: $contrast-content-gray;
    #{"--"}contrast-content-hovergray: $contrast-content-hovergray;
    #{"--"}contrast-content-white: $contrast-content-white;
    #{"--"}dark-gray-color: $dark-gray-color;
    #{"--"}dark-gray-color-10: $dark-gray-color-10;
    #{"--"}dark-gray-color-15: $dark-gray-color-15;
    #{"--"}dark-gray-color-20: $dark-gray-color-20;
    #{"--"}dark-gray-color-30: $dark-gray-color-30;
    #{"--"}dark-gray-color-40: $dark-gray-color-40;
    #{"--"}dark-gray-color-45: $dark-gray-color-45;
    #{"--"}dark-gray-color-5: $dark-gray-color-5;
    #{"--"}dark-gray-color-60: $dark-gray-color-60;
    #{"--"}dark-gray-color-75: $dark-gray-color-75;
    #{"--"}dark-gray-color-80: $dark-gray-color-80;
    #{"--"}dark-green: $dark-green;
    #{"--"}dark-green-20: $dark-green-20;
    #{"--"}dark-green-40: $dark-green-40;
    #{"--"}dark-green-60: $dark-green-60;
    #{"--"}dark-green-80: $dark-green-80;
    #{"--"}dark-violet: $dark-violet;
    #{"--"}dark-violet-20: $dark-violet-20;
    #{"--"}dark-violet-40: $dark-violet-40;
    #{"--"}dark-violet-60: $dark-violet-60;
    #{"--"}dark-violet-80: $dark-violet-80;
    #{"--"}fieldset-border: $fieldset-border;
    #{"--"}fieldset-header: $fieldset-header;
    #{"--"}green: $green;
    #{"--"}green-20: $green-20;
    #{"--"}green-40: $green-40;
    #{"--"}green-60: $green-60;
    #{"--"}green-80: $green-80;
    #{"--"}light-gray-color: $light-gray-color;
    #{"--"}light-gray-color-20: $light-gray-color-20;
    #{"--"}light-gray-color-40: $light-gray-color-40;
    #{"--"}light-gray-color-60: $light-gray-color-60;
    #{"--"}light-gray-color-80: $light-gray-color-80;
    #{"--"}orange: $orange;
    #{"--"}orange-20: $orange-20;
    #{"--"}orange-40: $orange-40;
    #{"--"}orange-60: $orange-60;
    #{"--"}orange-80: $orange-80;
    #{"--"}origin-base-color: $origin-base-color;
    #{"--"}petrol: $petrol;
    #{"--"}petrol-20: $petrol-20;
    #{"--"}petrol-40: $petrol-40;
    #{"--"}petrol-60: $petrol-60;
    #{"--"}petrol-80: $petrol-80;
    #{"--"}public-course-bgcolor: $public-course-bgcolor;
    #{"--"}red: $red;
    #{"--"}red-20: $red-20;
    #{"--"}red-40: $red-40;
    #{"--"}red-60: $red-60;
    #{"--"}red-80: $red-80;
    #{"--"}table-footer-color: $table-footer-color;
    #{"--"}table-header-color: $table-header-color;
    #{"--"}violet: $violet;
    #{"--"}violet-20: $violet-20;
    #{"--"}violet-40: $violet-40;
    #{"--"}violet-60: $violet-60;
    #{"--"}violet-80: $violet-80;
    #{"--"}white: $white;
    #{"--"}yellow: $yellow;
    #{"--"}yellow-20: $yellow-20;
    #{"--"}yellow-40: $yellow-40;
    #{"--"}yellow-60: $yellow-60;
    #{"--"}yellow-80: $yellow-80;

    #{"--"}group-color-0: $dark-violet;
    #{"--"}group-color-1: $violet;
    #{"--"}group-color-2: $red;
    #{"--"}group-color-3: $orange;
    #{"--"}group-color-4: $yellow;
    #{"--"}group-color-5: $green;
    #{"--"}group-color-6: $dark-green;
    #{"--"}group-color-7: $petrol;
    #{"--"}group-color-8: $brown;

    #{"--"}transition-duration: $transition-duration;
    #{"--"}transition-duration-slow: $transition-duration-slow;

    @media (prefers-reduced-motion) {
        #{"--"}transition-duration: 0s;
        #{"--"}transition-duration-slow: 0s;
    }
}