forked from thingsboard/thingsboard.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathguides.sass
171 lines (168 loc) · 4.5 KB
/
guides.sass
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
#docsContent
.guides
.filter-panel
#searchGuideBox
position: relative
width: 250px
height: 44px
line-height: 44px
#searchGuideInput
-webkit-appearance: none
-moz-appearance: none
appearance: none
padding: 0 16px
width: 100%
height: 44px
line-height: 30px
font-size: 18px
vertical-align: middle
border: 1px solid #ebebeb
background-color: transparent
border-radius: 4px
color: #212529
box-shadow: none
+placeholder
color: #212529
opacity: 0.6
&:hover
border: 2px solid #000
padding: 1px 15px
cursor: pointer
&:focus
cursor: initial
border: 2px solid #2a7dec
padding: 1px 15px
color: #212529
+placeholder
opacity: 0.2
.searchButton
position: absolute
padding: 0
top: 10px
right: 12px
display: inline-block
vertical-align: middle
background-size: contain
background: url(/images/search.svg) no-repeat
filter: brightness(350%)
width: 24px
height: 24px
&:focus
outline: none
&.focused
.searchButton
filter: none
.guides-block
&:before
display: block
content: " "
visibility: hidden
margin-top: -210px
height: 210px
&.hidden
display: none
.guides-title-panel
margin-top: 48px
margin-bottom: 24px
.guides-title
margin-bottom: 4px
font-size: 24px
line-height: 42px
font-weight: 500
color: #000
.guides-subtitle
font-size: 16px
font-weight: 300
line-height: 24px
color: #000
ul.guides-list
padding: 0
margin: 0
display: flex
flex-wrap: wrap
li.guide-container
position: relative
cursor: pointer
display: inline-block
width: 100%
margin-right: 13px
margin-bottom: 12px
&.hidden
display: none
a
border: 1px solid #EBEBEB
border-radius: 6px
padding: 24px
display: flex
flex-direction: row
height: 100%
&:hover
text-decoration: none
padding: 21px
border: 4px solid var(--tb-main-color)
.guide-text
flex: 1
.guide-title
margin-right: 50px
font-weight: 600
font-size: 18px
line-height: 28px
color: var(--tb-main-color)
.guide-subtitle
margin-top: 12px
font-weight: 300
font-size: 16px
line-height: 24px
color: #212529
.guide-keywords
display: none
.guide-icons
position: absolute
top: 24px
right: 24px
span
position: absolute
&:after
display: inline-block
position: absolute
top: 0
right: 0
&.video
top: 0
right: 0
&:after
content: url('/images/guide-video.svg')
filter: var(--tb-main-color-filter)
width: 24px
height: 24px
&.pe
top: 0
right: 30px
&:after
content: "PE"
font-size: 16px
font-weight: bold
line-height: 24px
color: var(--tb-main-color)
@media screen and (min-width: 750px)
#docsContent
.guides
.filter-panel
#searchGuideBox
width: 450px
@media screen and (min-width: 1025px)
#docsContent
.guides
.guides-block
ul.guides-list
li.guide-container
width: calc(50% - 20px)
@media screen and (min-width: 1700px)
#docsContent
.guides
.guides-block
ul.guides-list
li.guide-container
width: calc(100% / 3 - 20px)
li.guide-container.wide
width: calc(50% - 20px)