gnezim
f8120c154f
- Copy 30+ global SCSS files to apps/react/src/styles/ - Copy 75+ component SCSS files to apps/react/src/styles/components/ - Organize by feature: online-board, schedule, flights-map, popular-requests, shared, toolkit - Organize pages styles: board, schedule, adaptive - Update main.tsx to import styles entry point
69 lines
1.5 KiB
SCSS
69 lines
1.5 KiB
SCSS
$border-radius: 3px;
|
|
|
|
/* Paddings and Margins */
|
|
$space-s: 5px;
|
|
$space-s2: 8px;
|
|
$space-m: 10px;
|
|
$space-m2: 12px;
|
|
$space-l: 15px;
|
|
$space-xl: 20px;
|
|
$space-xxl: 40px;
|
|
$space-xxxl: 80px;
|
|
|
|
$space-top-site: 32px;
|
|
|
|
// SITE WIDTH
|
|
$site-width: 1440px;
|
|
$left-aside-width: 285px;
|
|
$left-aside-width-desktop: 23.875%;
|
|
$column-spacing: 1.5%;
|
|
|
|
// MEDIA
|
|
// When changing the size of breakpoints, you also need to change in the file screen-size.service.ts
|
|
$media-breakpoint-desktop: 1300px;
|
|
$media-breakpoint-desktop-min: 1051px;
|
|
$media-breakpoint-tablet: 1050px;
|
|
$media-breakpoint-tablet-min: 769px;
|
|
$media-breakpoint-small-tablet: 768px;
|
|
$media-breakpoint-small-tablet-min: 641px;
|
|
$media-breakpoint-mobile: 640px;
|
|
|
|
//BUTTON
|
|
$button-height: 48px;
|
|
$button-height--mobile: 38px;
|
|
$button-sort-height: 12px;
|
|
$small-button-height: 35px;
|
|
$medium-button-height: 40px;
|
|
$standard-button-height: 48px;
|
|
$big-button-height: 56px;
|
|
$slider-handle-size: 16px;
|
|
$buttons-width: 32px;
|
|
|
|
// MEDIA
|
|
$desktopHeaderHeight: 103px;
|
|
$tabletHeaderHeight: 103px;
|
|
$mobileHeaderHeight: 103px;
|
|
|
|
// FLIGHT
|
|
$text-margin-bottom: 2px;
|
|
$flight-height: 40px;
|
|
$width-flight-number: 60px;
|
|
$width-background-company: 120px;
|
|
$width-dep-arr: 40%;
|
|
$width-status: 20%;
|
|
$width-flight-time: 75px;
|
|
$width-flight-day-change: 25px;
|
|
$button-expand-size: 32px;
|
|
$label-shift-width: 20px;
|
|
$label-shift-height: 18px;
|
|
$status-indicator-size: 8px;
|
|
$status-width: 100px;
|
|
$flight-details-fit: 2%;
|
|
//FLIGHT-DETAILS
|
|
$margin-details-title: 20%;
|
|
|
|
// FILTERS
|
|
$label-margin-bottom: 10px;
|
|
|
|
$scroll-width: 6px;
|