Covivo/mobicoop

View on GitHub
client/src/MobicoopBundle/Resources/assets/css/_variables.scss

Summary

Maintainability
Test Coverage
@import '~vuetify/src/styles/styles.sass';

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/Poppins-Black.woff2') format('woff2');
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Poppins-Bold.woff2') format('woff2');
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Poppins-Medium.woff2') format('woff2');
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Poppins-Regular.woff2') format('woff2');
}

$primary: var(--v-primary-base);
$secondary: var(--v-secondary-base);
$accent: var(--v-accent-base);

// Example : to change font everywhere in the app
// vuetify
// $body-font-family: 'Poppins', sans-serif;
// $heading-font-family: 'Poppins', sans-serif;

// Example : to change themes variables
// path to material light variables '~vuetify/src/styles/settings/_light.scss';
//$material-light: (
//  'status-bar': (
//    'regular': map-get($grey, 'lighten-2'),
//    'lights-out': rgba(map-get($shades, 'white'), 0.7)
//  ),
//  'app-bar': map-get($grey, 'lighten-4'),
//  'background': map-get($grey, 'lighten-5'),
//  'calendar': (
//    'background-color': map-get($shades, 'white'),
//    'outside-background-color': #F7F7F7,
//    'line-color': map-get($grey, 'lighten-2'),
//    'interval-color': map-get($grey, 'darken-3'),
//    'interval-line-color': map-get($grey, 'lighten-2'),
//    'text-color': map-get($shades, 'black'),
//    'past-color': rgba(map-get($shades, 'black'), 0.38)
//  ),
//  'cards': map-get($shades, 'white'),
//  'chips': #E0E0E0,
//  'dividers': rgba(map-get($shades, 'black'), 0.12),
//  'text': (
//    'theme': map-get($shades, 'white'),
//    'primary': rgba(map-get($shades, 'black'), 0.87),
//    'secondary': rgba(map-get($shades, 'black'), 0.54),
//    'disabled': rgba(map-get($shades, 'black'), 0.38),
//    'link': map-get($blue, 'darken-2'),
//    'link-hover': map-get($grey, 'darken-3')
//  ),
//  'icons': (
//    'active': rgba(map-get($shades, 'black'), 0.54),
//    'inactive': rgba(map-get($shades, 'black'), 0.38)
//  ),
//  'inputs': (
//    'box': rgba(map-get($shades, 'black'), 0.04),
//    'solo-inverted': rgba(map-get($shades, 'black'), 0.16),
//    'solo-inverted-focused': map-get($grey, 'darken-3'),
//    'solo-inverted-focused-text': map-get($shades, 'white')
//  ),
//  'buttons': (
//    'disabled': rgba(map-get($shades, 'black'), 0.26),
//    'focused': rgba(map-get($shades, 'black'), 0.12),
//    'focused-alt': rgba(map-get($shades, 'white'), 0.6),
//    'pressed': rgba(#999, 0.4)
//  ),
//  'expansion-panels': (
//    'focus': map-get($grey, 'lighten-3')
//  ),
//  'selection-controls': (
//    'thumb': (
//      'inactive': map-get($shades, 'white'),
//      'disabled': map-get($grey, 'lighten-5')
//    ),
//    'track': (
//      'inactive': rgba(map-get($shades, 'black'), 0.38),
//      'disabled': rgba(map-get($shades, 'black'), 0.12)
//    )
//  ),
//  'slider': (
//    'active': rgba(map-get($shades, 'black'), 0.38),
//    'inactive': rgba(map-get($shades, 'black'), 0.26),
//    'disabled': rgba(map-get($shades, 'black'), 0.26),
//    'discrete': map-get($shades, 'black')
//  ),
//  'skeleton': linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent),
//  'states': (
//    'hover': 0.04,
//    'focus': 0.12,
//    'selected': 0.08,
//    'activated': 0.12,
//    'pressed': 0.16,
//    'dragged': 0.08
//  ),
//  'tabs': rgba(0, 0, 0, 0.54),
//  'toggle-buttons': (
//    'color': map-get($shades, 'black')
//  ),
//  'text-fields': (
//    'filled': rgba(map-get($shades, 'black'), 0.06),
//    'filled-hover': rgba(map-get($shades, 'black'), 0.12),
//    'outlined': rgba(map-get($shades, 'black'), 0.24),
//    'outlined-hover': rgba(map-get($shades, 'black'), 0.86)
//  ),
//  'input-bottom-line': rgba(map-get($shades, 'black'), 0.42),
//  'stepper': (
//    'active': rgba(map-get($shades, 'white'), 1),
//    'completed': rgba(map-get($shades, 'black'), 0.87),
//    'hover': rgba(map-get($shades, 'black'), 0.54)
//  ),
//  'table': (
//    'active': map-get($grey, 'lighten-4'),
//    'hover': map-get($grey, 'lighten-3'),
//    'group': map-get($grey, 'lighten-3')
//  ),
//  'picker': (
//    'body': map-get($shades, 'white'),
//    'clock': map-get($grey, 'lighten-2'),
//    'indeterminateTime': map-get($grey, 'lighten-1'),
//    'title': map-get($grey, 'lighten-2')
//  ),
//  'color-picker': (
//    'checkerboard': rgba(map-get($shades, 'white'), 0)
//  ),
//  'bg-color': map-get($shades, 'white'),
//  'fg-color': map-get($shades, 'black'),
//  'text-color': map-get($shades, 'black'),
//  'primary-text-percent': 0.87,
//  'secondary-text-percent': 0.54,
//  'disabledORhints-text-percent': 0.38,
//  'divider-percent': 0.12,
//  'active-icon-percent': 0.54,
//  'inactive-icon-percent': 0.38
//);

// path to material dark variables '~vuetify/src/styles/settings/_dark.scss';
//$material-dark: (
//  'status-bar': (
//    'regular': map-get($shades, 'black'),
//    'lights-out': rgba(map-get($shades, 'black'), 0.2)
//  ),
//  'app-bar': map-get($grey, 'darken-4'),
//  'background': #303030,
//  'calendar': (
//    'background-color': #303030,
//    'outside-background-color': #202020,
//    'line-color': map-get($grey, 'base'),
//    'interval-color': map-get($grey, 'lighten-3'),
//    'interval-line-color': map-get($grey, 'darken-2'),
//    'text-color': map-get($shades, 'white'),
//    'past-color': rgba(map-get($shades, 'white'), 0.5)
//  ),
//  'cards': map-get($grey, 'darken-3'),
//  'chips': #555,
//  'dividers': rgba(map-get($shades, 'white'), 0.12),
//  'text': (
//    'theme': map-get($shades, 'white'),
//    'primary': map-get($shades, 'white'),
//    'secondary': rgba(map-get($shades, 'white'), 0.7),
//    'disabled': rgba(map-get($shades, 'white'), 0.5),
//    'link': map-get($blue, 'accent-1'),
//    'link-hover': map-get($grey, 'lighten-3')
//  ),
//  'icons': (
//    'active': map-get($shades, 'white'),
//    'inactive': rgba(map-get($shades, 'white'), 0.5)
//  ),
//  'inputs': (
//    'box': map-get($shades, 'white'),
//    'solo-inverted': rgba(map-get($shades, 'white'), 0.16),
//    'solo-inverted-focused': map-get($shades, 'white'),
//    'solo-inverted-focused-text': map-get(map-get($material-light, 'text'), 'primary')
//  ),
//  'buttons': (
//    'disabled': rgba(map-get($shades, 'white'), 0.3),
//    'focused': rgba(map-get($shades, 'white'), 0.12),
//    'focused-alt': rgba(map-get($shades, 'white'), 0.1),
//    'pressed': rgba(#CCC, 0.25)
//  ),
//  'expansion-panels': (
//    'focus': #494949
//  ),
//  'selection-controls': (
//    'thumb': (
//      'inactive': map-get($grey, 'lighten-1'),
//      'disabled': map-get($grey, 'darken-3')
//    ),
//    'track': (
//      'inactive': rgba(map-get($shades, 'white'), 0.3),
//      'disabled': rgba(map-get($shades, 'white'), 0.1)
//    )
//  ),
//  'slider': (
//    'active': rgba(map-get($shades, 'white'), 0.3),
//    'inactive': rgba(map-get($shades, 'white'), 0.2),
//    'disabled': rgba(map-get($shades, 'white'), 0.2),
//    'discrete': map-get($shades, 'white')
//  ),
//  'skeleton': linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent),
//  'states': (
//    'hover': 0.08,
//    'focus': 0.24,
//    'selected': 0.16,
//    'activated': 0.24,
//    'pressed': 0.32,
//    'dragged': 0.16
//  ),
//  'tabs': rgba(map-get($shades, 'white'), 0.6),
//  'toggle-buttons': (
//    'color': map-get($shades, 'white')
//  ),
//  'text-fields': (
//    'filled': rgba(map-get($shades, 'black'), 0.1),
//    'filled-hover': rgba(map-get($shades, 'black'), 0.2)
//  ),
//  'input-bottom-line': rgba(map-get($shades, 'white'), 0.7),
//  'stepper': (
//    'active': rgba(map-get($shades, 'white'), 1),
//    'completed': rgba(map-get($shades, 'white'), 0.87),
//    'hover': rgba(map-get($shades, 'white'), 0.75)
//  ),
//  'table': (
//    'active': #505050,
//    'hover': map-get($grey, 'darken-2'),
//    'group': map-get($grey, 'darken-2')
//  ),
//  'picker': (
//    'body': map-get($grey, 'darken-3'),
//    'clock': map-get($grey, 'darken-2'),
//    'indeterminateTime': map-get($grey, 'darken-1'),
//    'title': map-get($grey, 'darken-2')
//  ),
//  'color-picker': (
//    'checkerboard': rgba(map-get($shades, 'white'), 0.12)
//  ),
//  'bg-color': #303030,
//  'fg-color': map-get($shades, 'white'),
//  'text-color': map-get($shades, 'white'),
//  'primary-text-percent': 1,
//  'secondary-text-percent': 0.7,
//  'disabledORhints-text-percent': 0.5,
//  'divider-percent': 0.12,
//  'active-icon-percent': 1,
//  'inactive-icon-percent': 0.5
//);