Skip to content

Commit 4e2db7f

Browse files
BipinKalraBipinKalra
authored
Merge pull request #447 from BipinKalra/main_website
Main website
2 parents 7134d35 + 7622c1a commit 4e2db7f

File tree

8 files changed

+192
-44
lines changed

8 files changed

+192
-44
lines changed

‎sass/styles/applications/coding-blocks/_application.scss

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
.a-cbm {
2-
@import "buttons.scss";
3-
}
2+
@import "buttons.scss";
3+
@import "heading.scss";
4+
@import "font.scss";
5+
@import "color.scss";
6+
}

‎sass/styles/applications/coding-blocks/_settings.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
@import "settings/colors.scss";
2+
@import "settings/font.scss";

‎sass/styles/applications/coding-blocks/buttons.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727

2828
&.disabled,
2929
&:disabled {
30-
background: $lighter-grey;
30+
background: $grey-light-2;
3131
cursor: auto;
3232
}
3333
}
@@ -54,7 +54,7 @@
5454
&:disabled,
5555
&.disabled {
5656
border: 1px solid $light-grey;
57-
color: $light-grey;
57+
color: $grey-light-1;
5858
cursor: auto;
5959

6060
&:hover {
@@ -64,7 +64,7 @@
6464
}
6565

6666
.button-tertiary {
67-
color: $dark-orange;
67+
color: $orange-dark-1;
6868
font-size: $font-sm;
6969
transition: color 0.25s;
7070

@@ -78,7 +78,7 @@
7878

7979
&:disabled,
8080
&.disabled {
81-
color: $light-grey;
81+
color: $grey-light-1;
8282
cursor: auto;
8383
}
8484
}

‎sass/styles/applications/coding-blocks/color.scss

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// TEXT SOLIDS
2+
3+
@each $abbrev, $color in $solid-color-list {
4+
.text-#{$abbrev} {
5+
color: $color !important;
6+
}
7+
}
8+
9+
// TEXT GRADIENTS
10+
11+
@each $abbrev, $color in $gradient-color-list {
12+
.text-gradient-#{$abbrev} {
13+
-webkit-text-fill-color: transparent;
14+
-webkit-background-clip: text;
15+
background-clip: text;
16+
background-image: $color;
17+
}
18+
}
19+
20+
// BACKGROUND SOLIDS
21+
22+
@each $abbrev, $color in $solid-color-list {
23+
.bg-#{$abbrev} {
24+
background-color: $color !important;
25+
}
26+
}
27+
28+
// BACKGROUND GRADIENTS
29+
30+
@each $abbrev, $color in $gradient-color-list {
31+
.bg-gradient-#{$abbrev} {
32+
background: $color;
33+
}
34+
}

‎sass/styles/applications/coding-blocks/font.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@each $type, $size in $text-size-list {
2+
.#{$type} {
3+
font-size: $size !important;
4+
}
5+
}

‎sass/styles/applications/coding-blocks/heading.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// @each $number in (1, 2, 3, 4, 5, 6) {
2+
// h#{$number} {
3+
// font-size: $heading-#{$number} !important;
4+
// }
5+
// }
6+
7+
h1 {
8+
font-size: $heading-1;
9+
}
10+
11+
h2 {
12+
font-size: $heading-2;
13+
}
14+
15+
h3 {
16+
font-size: $heading-3;
17+
}
18+
19+
h4 {
20+
font-size: $heading-4;
21+
}
22+
23+
h5 {
24+
font-size: $heading-5;
25+
}
26+
27+
h6 {
28+
font-size: $heading-6;
29+
}

‎sass/styles/applications/coding-blocks/settings/colors.scss

Lines changed: 80 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,103 @@
11
// PALETTE SOLIDS
22

33
// Neutral colors
4-
$black: #08090C;
5-
$dark-grey: #191D24;
6-
$med-grey: #2A2F3C;
7-
$grey: #3B4254;
8-
$light-grey: #CCCCCC;
9-
$lighter-grey: #E0E0E0;
10-
$lightest-grey: #F5F5F5;
4+
$black: #08090c;
5+
$grey-dark-2: #191d24;
6+
$grey-dark-1: #2a2f3c;
7+
$grey: #3b4254;
8+
$grey-light-1: #cccccc;
9+
$grey-light-2: #e0e0e0;
10+
$grey-light-3: #f5f5f5;
1111

1212
// Greens
13-
$dark-green: #26A87C;
14-
$med-green: #55C25C;
15-
$green: #6CCE4B;
16-
$light-green: #83DB3B;
13+
$green-dark-2: #26a87c;
14+
$green-dark-1: #55c25c;
15+
$green: #6cce4b;
16+
$green-light-1: #83db3b;
1717

1818
// Blues
19-
$dark-blue: #1C40DE;
20-
$med-blue: #2167E3;
21-
$blue: #258EE8;
22-
$light-blue: #2AB5ED;
19+
$blue-dark-2: #1c40de;
20+
$blue-dark-1: #2167e3;
21+
$blue: #258ee8;
22+
$blue-light-1: #2ab5ed;
2323

2424
// Reds
25-
$red: #E74E4B;
26-
$dark-orange: #F26A3E;
27-
$orange: #FB8133;
28-
$yellow: #FFBA08;
25+
$red: #e74e4b;
26+
$orange-dark-1: #f26a3e;
27+
$orange: #fb8133;
28+
$yellow: #ffba08;
2929

3030
// Purples
31-
$dark-purple: #3A30D6;
32-
$med-purple: #4F33DA;
33-
$purple: #6536DE;
34-
$light-purple: #8F3CE5;
31+
$purple-dark-2: #3a30d6;
32+
$purple-dark-1: #4f33da;
33+
$purple: #6536de;
34+
$purple-light-1: #8f3ce5;
3535

3636
// Pinks
37-
$dark-pink: #A6076C;
38-
$med-pink: #BF1F68;
39-
$pink: #D93764;
40-
$light-pink: #F24F60;
37+
$pink-dark-2: #a6076c;
38+
$pink-dark-1: #bf1f68;
39+
$pink: #d93764;
40+
$pink-light-1: #f24f60;
4141

4242

4343
// PALETTE GRADIENTS
4444

45-
$gradient-orange-dark: linear-gradient(90deg, #E74E4B, #F26A3E);
46-
$gradient-orange: linear-gradient(90deg, #F26A3E, #FB8133);
47-
$gradient-orange-light: linear-gradient(90deg, #FB8133, #FFBA08);
45+
$gradient-orange-dark: linear-gradient(90deg, #e74e4b, #f26a3e);
46+
$gradient-orange: linear-gradient(90deg, #f26a3e, #fb8133);
47+
$gradient-orange-light: linear-gradient(90deg, #fb8133, #ffba08);
4848

49-
$gradient-green-dark: linear-gradient(90deg, #26A87C, #55C25C);
50-
$gradient-green: linear-gradient(90deg, #55C25C, #6CCE4B);
51-
$gradient-green-light: linear-gradient(90deg, #6CCE4B, #83DB3B);
52-
53-
$gradient-blue-dark: linear-gradient(90deg, #1C40DE, #2167E3);
54-
$gradient-blue: linear-gradient(90deg, #2167E3, #258EE8);
55-
$gradient-blue-light: linear-gradient(90deg, #258EE8, #2AB5ED);
49+
$gradient-green-dark: linear-gradient(90deg, #26a87c, #55c25c);
50+
$gradient-green: linear-gradient(90deg, #55c25c, #6cce4b);
51+
$gradient-green-light: linear-gradient(90deg, #6cce4b, #83db3b);
5652

53+
$gradient-blue-dark: linear-gradient(90deg, #1c40de, #2167e3);
54+
$gradient-blue: linear-gradient(90deg, #2167e3, #258ee8);
55+
$gradient-blue-light: linear-gradient(90deg, #258ee8, #2ab5ed);
5756

5857

5958
// BUTTON GRADIENTS
6059

61-
$button-gradient-orange: linear-gradient(90deg, #FB8133, #FFBA08, #FB8133)
60+
$button-gradient-orange: linear-gradient(90deg, #fb8133, #ffba08, #fb8133);
61+
62+
63+
$solid-color-list: (
64+
"black": $black,
65+
"grey-dark-2": $grey-dark-2,
66+
"grey-dark-1": $grey-dark-1,
67+
"grey": $grey,
68+
"grey-light-1": $grey-light-1,
69+
"grey-light-2": $grey-light-2,
70+
"grey-light-3": $grey-light-3,
71+
"green-dark-2": $green-dark-2,
72+
"green-dark-1": $green-dark-1,
73+
"green": $green,
74+
"green-light-1": $green-light-1,
75+
"blue-dark-2": $blue-dark-2,
76+
"blue-dark-1": $blue-dark-1,
77+
"blue": $blue,
78+
"blue-light-1": $blue-light-1,
79+
"red": $red,
80+
"orange-dark-1": $orange-dark-1,
81+
"orange": $orange,
82+
"yellow": $yellow,
83+
"purple-dark-2": $purple-dark-2,
84+
"purple-dark-1": $purple-dark-1,
85+
"purple": $purple,
86+
"purple-light-1": $purple-light-1,
87+
"pink-dark-2": $pink-dark-2,
88+
"pink-dark-1": $pink-dark-1,
89+
"pink": $pink,
90+
"pink-light-1": $pink-light-1,
91+
);
92+
93+
$gradient-color-list: (
94+
"orange-dark": $gradient-orange-dark,
95+
"orange": $gradient-orange,
96+
"orange-light": $gradient-orange-light,
97+
"green-dark": $gradient-green-dark,
98+
"green": $gradient-green,
99+
"green-light": $gradient-green-light,
100+
"blue-dark": $gradient-blue-dark,
101+
"blue": $gradient-blue,
102+
"blue-light": $gradient-blue-light,
103+
);

‎sass/styles/applications/coding-blocks/settings/font.scss

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// Font Sizes
2+
3+
$font-1: 0.75rem; // 10px
4+
$font-2: 0.875rem; // 12px
5+
$font-3: 1rem; // Standard font size - 14px
6+
$font-4: 1.143rem; // 16px
7+
$font-5: 1.286rem; // 18px
8+
9+
$heading-6: 1.428rem; // 20px
10+
$heading-5: 1.713rem; // 24px
11+
$heading-4: 2rem; // 28px
12+
$heading-3: 2.286rem; // 32px
13+
$heading-2: 2.571rem; // 36px
14+
$heading-1: 2.857rem; // 40px
15+
16+
17+
// Font Weights
18+
19+
$extra-bold: 900;
20+
21+
22+
$text-size-list: (
23+
"font-1": $font-1,
24+
"font-2": $font-2,
25+
"font-3": $font-3,
26+
"font-4": $font-4,
27+
"font-5": $font-5,
28+
"heading-6": $heading-6,
29+
"heading-5": $heading-5,
30+
"heading-4": $heading-4,
31+
"heading-3": $heading-3,
32+
"heading-2": $heading-2,
33+
"heading-1": $heading-1,
34+
)

0 commit comments

Comments
 (0)