Styles: Variables
This file defines the Handoff specific values for the key Bootstrap variables
These variables are defined in shared/common/_variables.scss
Bootstrap Variables
This definition is used in the ticker component to create a number roll effect.
1// Fonts
2$font-barlow-sans: 'Barlow', sans-serif;
3$font-inter-sans: 'Inter', sans-serif;
4
5//Font Sizes
6// TODO: Pull these from figma variables
7$font-size-base: 1.125rem;
8$h1-font-size: 76px;
9$h2-font-size: 60px;
10$h3-font-size: 50px;
11$h4-font-size: 42px;
12$h5-font-size: 36px;
13$h6-font-size: 30px;
14
15$font-size-base-mobile: 0.875rem;
16
17$h1-font-size-mobile: 46px;
18$h2-font-size-mobile: 34px;
19$h3-font-size-mobile: 34px;
20$h4-font-size-mobile: 26px;
21$h5-font-size-mobile: 22px;
22$h6-font-size-mobile: 20px;
23
24// font weight
25$font-weight-extra-light: 200;
26$font-weight-light: 300;
27$font-weight-normal: 400;
28$font-weight-medium: 500;
29$font-weight-semi-bold: 600;
30$font-weight-bold: 700;
31$font-weight-black: 900;
32
33// Definitional Colors
34$body-color: #262626;
35$body-bg: #fff;
36$link-color: #0077C8;
37$link-hover-color: #0B4D99;
38
39//Transition duration
40$default-transition-duration: 0.3s;
41$default-animation-duration: 1s;
42$md-animation-duration: 1.5s;
43
44//Z-indexs
45$notify-index: 99;
46
47$tab-slider-box-shadow: 0px 12px 25px 0px #0000001A;
48$box-shadow-contact: 0px 20px 60px 0px #0000001A;
49$box-shadow-contact-mobile: 0px 6px 23px 0px #0000001A;
50$shadow-1: 0px 5px 20px 0px #646F7933;
51$card-shadow:0px 20px 40px 0px rgba(0, 0, 0, 0.1);
52$cards-border:1px solid rgba(191, 191, 191, 0.5);
53$parallax-card-hover-icon-shadow: 0 -12px 47.5px 0 #00000045;
54
55//Images
56$image-base-path: 'intralinks/images/';
57$icon-sprite: '#{$image-base-path}icon-sprite.svg';
58$icon-cross: '#{$image-base-path}cross.svg';
59$footer-background: '#{$image-base-path}Ribbon-Global-Footer-Final.webp';
60$menu-icon: '#{$image-base-path}menu-icon.svg';
61$slider-icon: '#{$image-base-path}slider-icon.svg';
62$bracket-icon: '#{$image-base-path}bracket.svg';
63$bracket-lg: '#{$image-base-path}bracket-lg.svg';
64$background-mask: '#{$image-base-path}background-mask.svg';
65$play-icon: '#{$image-base-path}play-icon.png';
66$quote-icon: '#{$image-base-path}quote-icon.png';
67$gray-down-arrow: '#{$image-base-path}gray-down-arrow.svg';
68$pager-arrow: '#{$image-base-path}pager-arrow.svg';
69$search: '#{$image-base-path}search.svg';
70$star: '#{$image-base-path}star.svg';
71$search-grey: '#{$image-base-path}search-grey.svg';
72$the-choice: '#{$image-base-path}the-choice-bg.svg';
73$checked-status: '#{$image-base-path}blue-tick--system-status.png';
74$inr-bnr-blr: '#{$image-base-path}inr-bnr-blr.png';
75
76$grid-breakpoints: (
77 xs: 0,
78 sm: 480px,
79 md: 768px,
80 lg: 1024px
81);
82
83// Grid containers
84$container-max-widths: (
85 sm: 540px,
86 md: 720px,
87 lg: 960px,
88 xl: 1200px,
89);