Skip to content
This repository was archived by the owner on Jan 4, 2021. It is now read-only.

Commit 352e8a8

Browse files
RomainCscnRomainCscn
committed
[DEV] Examples index page styled
1 parent 86c8ef2 commit 352e8a8

File tree

7 files changed

+931
-158
lines changed

7 files changed

+931
-158
lines changed

‎docs/components/myscript-text-web/examples/examples.css

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,184 @@ myscript-text-web {
1010
myscript-text-candidates {
1111
font-size: x-large;
1212
}
13+
14+
/* Index page style */
15+
16+
.svg-icn {
17+
display: none;
18+
}
19+
20+
.index-background {
21+
background: #f5f5f5;
22+
}
23+
24+
@media screen and (min-width: 1024px) {
25+
.example-section {
26+
width: 1002px;
27+
margin-right: auto;
28+
margin-left: auto;
29+
padding-bottom: 48px;
30+
}
31+
32+
.example-section .btn {
33+
margin-left: 20px;
34+
padding: 0 .75em 2px 1.5em;
35+
}
36+
37+
.grid-wrapper {
38+
display: grid;
39+
grid-template-columns: repeat(2, 1fr);
40+
grid-gap: 10px;
41+
grid-auto-rows: minmax(100px, auto);
42+
}
43+
44+
.grid-column-one {
45+
grid-column: 1;
46+
grid-row: 1;
47+
margin-right: 24px;
48+
}
49+
50+
.grid-column-two {
51+
grid-column: 2;
52+
grid-row: 1;
53+
margin-left: 24px;
54+
}
55+
}
56+
57+
@media screen and (min-width: 768px) and (max-width:1023px) {
58+
.example-section {
59+
padding: 0 12px 48px;
60+
}
61+
.example-section .btn {
62+
padding: 0 .75em 2px 1.5em;
63+
}
64+
.grid-wrapper {
65+
display: grid;
66+
grid-template-columns: repeat(2, 1fr);
67+
grid-gap: 10px;
68+
grid-auto-rows: minmax(100px, auto);
69+
}
70+
71+
.grid-column-one {
72+
grid-column: 1;
73+
grid-row: 1;
74+
margin-right: 12px;
75+
}
76+
77+
.grid-column-two {
78+
grid-column: 2;
79+
grid-row: 1;
80+
margin-left: 12px;
81+
}
82+
}
83+
84+
@media screen and (max-width:768px) {
85+
.example-section {
86+
padding: 24px 12px 48px;
87+
}
88+
89+
.example-section .btn {
90+
padding: 0 .5em 2px 1em;
91+
}
92+
93+
}
94+
95+
.example-section {
96+
background: #f5f5f5;
97+
font-family: "Source Sans Pro",sans-serif;
98+
}
99+
100+
.example-section h1 {
101+
font-size: 36px;
102+
line-height: 48px;
103+
padding: 24px 0 24px;
104+
margin: 0;
105+
}
106+
107+
.example-section h2 {
108+
font-size: 24px;
109+
line-height: 24px;
110+
padding-top: 6px;
111+
padding-bottom: 6px;
112+
margin-bottom: 12px;
113+
}
114+
115+
.example-section a {
116+
text-decoration: none;
117+
color: #1a9fff;
118+
transition: all 125ms;
119+
}
120+
121+
.example-section li {
122+
margin-top: 15px;
123+
}
124+
125+
.example-section .btn {
126+
line-height: 43px;
127+
background-color: rgba(0,0,0,.08);
128+
display: inline-block;
129+
font-weight: 700;
130+
text-align: center;
131+
white-space: nowrap;
132+
color: #1a9fff;
133+
text-decoration: none;
134+
border: 2px solid transparent;
135+
border-radius: 3px;
136+
-ms-touch-action: manipulation;
137+
touch-action: manipulation;
138+
cursor: pointer;
139+
transition: all 125ms;
140+
}
141+
142+
.example-section .notice {
143+
padding: 12px 24px 12px 54px;
144+
margin-bottom: 24px;
145+
font-weight: 600;
146+
border-radius: 3px;
147+
}
148+
149+
.example-section .notice-warning {
150+
color: #cd1e3c;
151+
background: #fae6e8;
152+
}
153+
154+
.example-section .notice-info {
155+
color: #0065b8;
156+
background: #d8eefe;
157+
}
158+
159+
.notice .notice-txt {
160+
font-size: 16px;
161+
line-height: 24px;
162+
padding-top: 6px;
163+
padding-bottom: 6px;
164+
}
165+
166+
.icn {
167+
margin: 0 2px -4px -12px;
168+
width: 20px;
169+
height: 20px;
170+
}
171+
172+
.notice .icn {
173+
float: left;
174+
width: 18px;
175+
height: 18px;
176+
padding: 4px;
177+
margin: 6px 0 0 -36px;
178+
color: #fff;
179+
border-radius: 50%;
180+
}
181+
182+
.notice .icn-info {
183+
background: #0065b8;
184+
}
185+
186+
.notice .icn-warning {
187+
background: #cd1e3c;
188+
}
189+
190+
.center {
191+
margin: 20px 0 20px;
192+
text-align: center;
193+
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy