SvenBudak

// https://material.angular.io/cdk/layout/overview#predefined-breakpoints
$res-xs: 0 !default; // Smartphone
$res-sm: 600px !default; // Tablet
$res-md: 960px !default; // Large Tablet
$res-lg: 1280px !default; // Large Tablet and Notebooks
$res-xl: 1920px !default; // Desktop +

$breakpoints: (
  'xs': $res-xs,
  'sm': $res-sm,

SvenBudak

.test {
    color:blue;
}

SvenBudak

$breakpoints: ('xs': 0, 'sm': 600px) !default;
@mixin media-min($var) {@media only screen and (min-width: $var) {@content;}}
@mixin media-max($var) {@media only screen and (max-width: $var - 1px) {@content;}}
@mixin media-from-to($var1, $var2) {@media only screen and (min-width: $var1) and (max-width: $var2 - 1px) {@content;}}



$spacings: (
  'margin': (
    'shorten-class-names': false,

SvenBudak

$breakpoints: ('xs': 0, 'sm': 600px) !default;
// $breakpoints: ('xs': 0,'sm': 600px,'md': 960px,'lg': 1280px,'xl': 1920px) !default;
$spacings: 4px, 8px !default;
// $spacings: 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 56px, 64px !default;
$types: 'margin', 'padding';
@mixin media-min($var) {@media only screen and (min-width: $var) {@content;}}

SvenBudak

$_browser-context: 16px; // Default
@function em($pixels, $context: $_browser-context) {
  @return ($pixels / $context);
}
@function rem($pixels, $context: $_browser-context) {
  @return ($pixels / $context) * 1rem;
}

SvenBudak

@use 'sass:map';
@use 'variables';
@use 'functions';
@use 'mixins';

// RFS Config (Defines from which resolution the fonts should not scale further)
$rfs-breakpoint: 1200px !default;
@import 'vendor/rfs'; // https://github.com/twbs/rfs/blob/main/scss.scss

// Defines which breakpoints should be created for typographies

SvenBudak

$headline-variants: (
  'h1': (
    'font-size': 64px,
    'font-weight': 700,
    'line-height': 70px,
  ),
  'h2': (
    'font-size': 44px,
    'font-weight': 700,
    'line-height': 52px,

SvenBudak

// https://material.angular.io/cdk/layout/overview#predefined-breakpoints
$res-xs: 0 !default; // Smartphone
$res-sm: 600px !default; // Tablet
$res-md: 960px !default; // Large Tablet
$res-lg: 1280px !default; // Large Tablet and Notebooks
$res-xl: 1920px !default; // Desktop +

@function em($pixels, $context: 16px) {
  @return ($pixels / $context);
}

SvenBudak

// https://material.angular.io/cdk/layout/overview#predefined-breakpoints
$res-xs: 0 !default;        // Smartphone
$res-sm: 600px !default;    // Tablet
$res-md: 960px !default;    // Large Tablet
$res-lg: 1280px !default;   // Large Tablet and Notebooks
$res-xl: 1920px !default;   // Desktop +


@function em($pixels, $context: 16px) {
  @return ($pixels / $context);

SvenBudak

// https://material.angular.io/cdk/layout/overview#predefined-breakpoints
$res-xs: 0 !default;        // Smartphone
$res-sm: 600px !default;    // Tablet
$res-md: 960px !default;    // Large Tablet
$res-lg: 1280px !default;   // Large Tablet and Notebooks
$res-xl: 1920px !default;   // Desktop +


@function em($pixels, $context: 16px) {
  @return ($pixels / $context);