Skip to content

Commit a1ef248

Browse files
committed
refactor: update components examples styles
1 parent 78c888c commit a1ef248

File tree

4 files changed

+263
-119
lines changed

4 files changed

+263
-119
lines changed

src/pug/_mixins/example.pug

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
mixin example
1+
mixin example(script)
22
- var id = Math.floor(Math.random() * (15 - 1300) + 1300)
33
.example.mt-4
44
ul.nav.nav-tabs(role="tablist")
@@ -12,9 +12,22 @@ mixin example
1212
svg.icon.me-2
1313
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code")
1414
| Code
15-
.tab-content.border.border-top-0.rounded-bottom
15+
if script
16+
li.nav-item
17+
a.nav-link(data-coreui-toggle="tab" href="#js-"+id role="tab")
18+
svg.icon.me-2
19+
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-cog")
20+
| JavaScript
21+
.tab-content.rounded-bottom
1622
.tab-pane.p-3.active.preview(role="tabpanel" id="preview-"+id )
1723
block
1824
.tab-pane.pt-1(role="tabpanel" id="code-"+id )
1925
script.language-markup(type='text/plain')
20-
block
26+
if script
27+
block html
28+
else
29+
block
30+
if script
31+
.tab-pane.pt-1(role="tabpanel" id="js-"+id )
32+
script.language-js(type='text/plain')
33+
block js

src/scss/_custom.scss

Lines changed: 0 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1 @@
11
// Here you can add other styles
2-
3-
.language-markup {
4-
background-color: $light-50 !important;
5-
font-size: .875rem !important;
6-
}
7-
8-
.docs-example-modal {
9-
background-color: #fafafa;
10-
11-
.modal {
12-
position: static;
13-
display: block;
14-
}
15-
}
16-
17-
.example > .tab-content {
18-
background-color: $light-50 !important;
19-
}
20-
21-
.example + p {
22-
margin-top: 1.5rem
23-
}
24-
25-
// Scrollspy demo on fixed height div
26-
.scrollspy-example {
27-
position: relative;
28-
height: 200px;
29-
margin-top: .5rem;
30-
overflow: auto;
31-
}
32-
33-
.scrollspy-example-2 {
34-
position: relative;
35-
height: 350px;
36-
overflow: auto;
37-
}
38-
39-
.preview {
40-
+ p {
41-
margin-top: 2rem;
42-
}
43-
44-
> .form-control {
45-
+ .form-control {
46-
margin-top: .5rem;
47-
}
48-
}
49-
50-
> .nav + .nav,
51-
> .alert + .alert,
52-
> .navbar + .navbar,
53-
> .progress + .progress {
54-
margin-top: 1rem;
55-
}
56-
57-
> .dropdown-menu {
58-
position: static;
59-
display: block;
60-
}
61-
62-
> :last-child {
63-
margin-bottom: 0;
64-
}
65-
66-
// Images
67-
> svg + svg,
68-
> img + img {
69-
margin-left: .5rem;
70-
}
71-
72-
// Buttons
73-
> .btn,
74-
> .btn-group {
75-
margin: .25rem .125rem;
76-
}
77-
> .btn-toolbar + .btn-toolbar {
78-
margin-top: .5rem;
79-
}
80-
81-
// List groups
82-
> .list-group {
83-
max-width: 400px;
84-
}
85-
86-
> [class*="list-group-horizontal"] {
87-
max-width: 100%;
88-
}
89-
90-
// Navbars
91-
.fixed-top,
92-
.sticky-top {
93-
position: static;
94-
margin: -1rem -1rem 1rem;
95-
}
96-
97-
.fixed-bottom {
98-
position: static;
99-
margin: 1rem -1rem -1rem;
100-
}
101-
102-
@include media-breakpoint-up(sm) {
103-
.fixed-top,
104-
.sticky-top {
105-
margin: -1.5rem -1.5rem 1rem;
106-
}
107-
.fixed-bottom {
108-
margin: 1rem -1.5rem -1.5rem;
109-
}
110-
}
111-
112-
// Pagination
113-
.pagination {
114-
margin-top: .5rem;
115-
margin-bottom: .5rem;
116-
}
117-
}

src/scss/_examples.scss

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
.example {
2+
.tab-content {
3+
background-color: $light-50 !important;
4+
5+
@at-root .dark-theme & {
6+
background-color: rgba(255, 255, 255, .1) !important;
7+
}
8+
}
9+
10+
code[class*="language-"],
11+
pre[class*="language-"] {
12+
font-size: .875rem !important;
13+
}
14+
15+
:not(pre) > code[class*="language-"],
16+
pre[class*="language-"] {
17+
background: transparent;
18+
}
19+
20+
& + p {
21+
margin-top: 1.5rem
22+
}
23+
24+
// Components examples
25+
.preview {
26+
+ p {
27+
margin-top: 2rem;
28+
}
29+
30+
> .form-control {
31+
+ .form-control {
32+
margin-top: .5rem;
33+
}
34+
}
35+
36+
> .nav + .nav,
37+
> .alert + .alert,
38+
> .navbar + .navbar,
39+
> .progress + .progress {
40+
margin-top: 1rem;
41+
}
42+
43+
> .dropdown-menu {
44+
position: static;
45+
display: block;
46+
}
47+
48+
> :last-child {
49+
margin-bottom: 0;
50+
}
51+
52+
// Images
53+
> svg + svg,
54+
> img + img {
55+
margin-left: .5rem;
56+
}
57+
58+
// Buttons
59+
> .btn,
60+
> .btn-group {
61+
margin: .25rem .125rem;
62+
}
63+
> .btn-toolbar + .btn-toolbar {
64+
margin-top: .5rem;
65+
}
66+
67+
// List groups
68+
> .list-group {
69+
max-width: 400px;
70+
}
71+
72+
> [class*="list-group-horizontal"] {
73+
max-width: 100%;
74+
}
75+
76+
// Navbars
77+
.fixed-top,
78+
.sticky-top {
79+
position: static;
80+
margin: -1rem -1rem 1rem;
81+
}
82+
83+
.fixed-bottom {
84+
position: static;
85+
margin: 1rem -1rem -1rem;
86+
}
87+
88+
@include media-breakpoint-up(sm) {
89+
.fixed-top,
90+
.sticky-top {
91+
margin: -1.5rem -1.5rem 1rem;
92+
}
93+
.fixed-bottom {
94+
margin: 1rem -1.5rem -1.5rem;
95+
}
96+
}
97+
98+
// Pagination
99+
.pagination {
100+
margin-top: .5rem;
101+
margin-bottom: .5rem;
102+
}
103+
}
104+
}
105+
106+
.dark-theme {
107+
code[class*="language-"],
108+
pre[class*="language-"] {
109+
color: #c5c8c6;
110+
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
111+
font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
112+
direction: ltr;
113+
text-align: left;
114+
white-space: pre;
115+
word-spacing: normal;
116+
word-break: normal;
117+
line-height: 1.5;
118+
119+
-moz-tab-size: 4;
120+
-o-tab-size: 4;
121+
tab-size: 4;
122+
123+
-webkit-hyphens: none;
124+
-moz-hyphens: none;
125+
-ms-hyphens: none;
126+
hyphens: none;
127+
}
128+
129+
/* Code blocks */
130+
pre[class*="language-"] {
131+
padding: 1em;
132+
margin: .5em 0;
133+
overflow: auto;
134+
border-radius: 0.3em;
135+
}
136+
137+
:not(pre) > code[class*="language-"],
138+
pre[class*="language-"] {
139+
background: transparent;
140+
}
141+
142+
/* Inline code */
143+
:not(pre) > code[class*="language-"] {
144+
padding: .1em;
145+
border-radius: .3em;
146+
}
147+
148+
.token.comment,
149+
.token.prolog,
150+
.token.doctype,
151+
.token.cdata {
152+
color: #7C7C7C;
153+
}
154+
155+
.token.punctuation {
156+
color: #c5c8c6;
157+
}
158+
159+
.namespace {
160+
opacity: .7;
161+
}
162+
163+
.token.property,
164+
.token.keyword,
165+
.token.tag {
166+
color: #96CBFE;
167+
}
168+
169+
.token.class-name {
170+
color: #FFFFB6;
171+
text-decoration: underline;
172+
}
173+
174+
.token.boolean,
175+
.token.constant {
176+
color: #99CC99;
177+
}
178+
179+
.token.symbol,
180+
.token.deleted {
181+
color: #f92672;
182+
}
183+
184+
.token.number {
185+
color: #FF73FD;
186+
}
187+
188+
.token.selector,
189+
.token.attr-name,
190+
.token.string,
191+
.token.char,
192+
.token.builtin,
193+
.token.inserted {
194+
color: #A8FF60;
195+
}
196+
197+
.token.variable {
198+
color: #C6C5FE;
199+
}
200+
201+
.token.operator {
202+
color: #EDEDED;
203+
}
204+
205+
.token.entity {
206+
color: #FFFFB6;
207+
cursor: help;
208+
}
209+
210+
.token.url {
211+
color: #96CBFE;
212+
}
213+
214+
.language-css .token.string,
215+
.style .token.string {
216+
color: #87C38A;
217+
}
218+
219+
.token.atrule,
220+
.token.attr-value {
221+
color: #F9EE98;
222+
}
223+
224+
.token.function {
225+
color: #DAD085;
226+
}
227+
228+
.token.regex {
229+
color: #E9C062;
230+
}
231+
232+
.token.important {
233+
color: #fd971f;
234+
}
235+
236+
.token.important,
237+
.token.bold {
238+
font-weight: bold;
239+
}
240+
241+
.token.italic {
242+
font-style: italic;
243+
}
244+
}

0 commit comments

Comments
 (0)