1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
// Boxes on the home page and similar.
.td-box {}
// box-variant creates the main style for a colored section used on the site.
@mixin box-variant($parent, $color-name, $color-value) {
$text-color: color-yiq($color-value);
$link-color: mix($blue, $text-color, lightness($color-value));
$link-hover-color: rgba($link-color, 0.5) !default;
#{$parent} {
&--#{$color-name} {
color: $text-color;
background-color: #{$color-value};
.td-arrow-down {
&::before {
left: 50%;
margin-left: -30px;
bottom: -25px;
border: {
style: solid;
width: 25px 30px 0 30px;
color: #{$color-value} transparent transparent transparent;
};
z-index: 3;
position: absolute;
content: "";
}
}
}
}
// Improve contrast for the links in paragraphs.
@include link-variant("#{$parent}--#{$color-name} p > a", $link-color, $link-hover-color, false);
@if $enable-gradients {
@include bg-gradient-variant("#{$parent}--1#{$color-name}#{$parent}--gradient", $color-value);
}
}
// Common min-height modifiers used for boxes.
@mixin td-box-height-modifiers($parent) {
#{$parent} {
&--height-auto {}
&--height-min {
min-height: 300px;
}
&--height-med {
min-height: 400px;
}
&--height-max {
min-height: 500px;
}
&--height-full {
min-height: 100vh;
}
@include media-breakpoint-up(md) {
&--height-min {
min-height: 450px;
}
&--height-med {
min-height: 500px;
}
&--height-max {
min-height: 650px;
}
}
}
}
@include td-box-height-modifiers(".td-box");
// Styling for section boxes
.td-box {
.row.section {
padding-left: 5rem;
padding-right: 5rem;
flex-direction: column;
> table {
@extend .table-striped;
@extend .table-responsive;
@extend .table;
}
}
.row {
padding-left: 5rem;
padding-right: 5rem;
flex-direction: row;
}
}
// Styling for community page link boxes
.td-box.linkbox {
padding: 5rem;
}
// This allows "painting by numbers"
@for $i from 1 through length($td-box-colors) {
$c: nth($td-box-colors, $i);
$name: $i - 1;
@include box-variant(".td-box", $name, $c);
}
// Same as above with all the theme color names.
@each $color, $value in $colors {
@include box-variant(".td-box", $color, $value);
}
@each $color, $value in $theme-colors {
@include box-variant(".td-box", $color, $value);
}
@each $color, $value in $grays {
@include box-variant(".td-box", $color, $value);
}
|
