Skip to content

Commit b0e8088

Browse files
rakieta2015rakieta2015
committed
Add two theme views
1 parent 3977cbd commit b0e8088

File tree

5 files changed

+298
-12
lines changed

5 files changed

+298
-12
lines changed

‎src/_nav.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,18 @@ export default [
1313
// _name: 'CNavTitle',
1414
// name: 'Theme'
1515
// },
16-
// {
17-
// _name: 'CNavItem',
18-
// name: 'Colors',
19-
// to: '/theme/colors',
20-
// icon: 'cil-drop'
21-
// },
22-
// {
23-
// _name: 'CNavItem',
24-
// name: 'Typography',
25-
// to: '/theme/typography',
26-
// icon: 'cil-pencil'
27-
// },
16+
{
17+
_name: 'CNavItem',
18+
name: 'Colors',
19+
to: '/theme/colors',
20+
icon: 'cil-drop'
21+
},
22+
{
23+
_name: 'CNavItem',
24+
name: 'Typography',
25+
to: '/theme/typography',
26+
icon: 'cil-pencil'
27+
},
2828
// {
2929
// _name: 'CNavTitle',
3030
// name: 'Components'

‎src/router/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,16 @@ const routes = [
2222
component: () =>
2323
import(/* webpackChunkName: "dashboard" */ "@/views/Dashboard.vue"),
2424
},
25+
{
26+
path: "/theme/colors",
27+
name: "Colors",
28+
component: () => import("@/views/theme/Colors.vue"),
29+
},
30+
{
31+
path: "/theme/typography",
32+
name: "Typography",
33+
component: () => import("@/views/theme/Typography.vue"),
34+
},
2535
{
2636
path: "/base",
2737
name: "Base",

‎src/views/theme/ColorTheme.vue

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<CCol xl="2" md="4" sm="6" xs="12" class="mb-4">
3+
<div
4+
:class="['theme-color w-75 rounded mb-3', color]"
5+
style="padding-top:75%;"
6+
></div>
7+
<slot></slot>
8+
<ColorView/>
9+
</CCol>
10+
</template>
11+
12+
<script>
13+
//import ColorView from './ColorView'
14+
export default {
15+
name: 'ColorTheme',
16+
// components: { ColorView },
17+
props: {
18+
color: String,
19+
}
20+
}
21+
</script>

‎src/views/theme/Colors.vue

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<CRow>
3+
<CCol>
4+
<CCard>
5+
<CCardHeader>
6+
<CIcon name="cil-drop"/> Theme colors
7+
</CCardHeader>
8+
<CCardBody>
9+
<CRow>
10+
<ColorTheme color="bg-primary">
11+
<h6>Brand Primary Color</h6>
12+
</ColorTheme>
13+
<ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
14+
<ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
15+
<ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
16+
<ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
17+
<ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
18+
<ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
19+
<ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
20+
</CRow>
21+
</CCardBody>
22+
</CCard>
23+
</CCol>
24+
</CRow>
25+
</template>
26+
27+
<script>
28+
import ColorTheme from './ColorTheme'
29+
export default {
30+
name: "Colors",
31+
components: { ColorTheme }
32+
};
33+
</script>

‎src/views/theme/Typography.vue

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
<template>
2+
<CRow>
3+
<CCol>
4+
<CCard>
5+
<CCardHeader>
6+
Headings
7+
</CCardHeader>
8+
<CCardBody>
9+
<p>Documentation and examples for Bootstrap typography,
10+
including global settings, headings, body text, lists, and more.</p>
11+
<CTable>
12+
<CTableHead>
13+
<CTableRow>
14+
<CTableHeaderCell>Heading</CTableHeaderCell>
15+
<CTableHeaderCell>Example</CTableHeaderCell>
16+
</CTableRow>
17+
</CTableHead>
18+
<CTableBody>
19+
<CTableRow>
20+
<CTableDataCell>
21+
<p>
22+
<code class="highlighter-rouge">
23+
&lt;h1&gt;&lt;/h1&gt;
24+
</code>
25+
</p>
26+
</CTableDataCell>
27+
<CTableDataCell><span class="h1">h1. Bootstrap heading</span></CTableDataCell>
28+
</CTableRow>
29+
<CTableRow>
30+
<CTableDataCell>
31+
<p>
32+
<code class="highlighter-rouge">
33+
&lt;h2&gt;&lt;/h2&gt;
34+
</code>
35+
</p>
36+
</CTableDataCell>
37+
<CTableDataCell><span class="h2">h2. Bootstrap heading</span></CTableDataCell>
38+
</CTableRow>
39+
<CTableRow>
40+
<CTableDataCell>
41+
<p>
42+
<code class="highlighter-rouge">
43+
&lt;h3&gt;&lt;/h3&gt;
44+
</code>
45+
</p>
46+
</CTableDataCell>
47+
<CTableDataCell><span class="h3">h3. Bootstrap heading</span></CTableDataCell>
48+
</CTableRow>
49+
<CTableRow>
50+
<CTableDataCell>
51+
<p>
52+
<code class="highlighter-rouge">
53+
&lt;h4&gt;&lt;/h4&gt;
54+
</code>
55+
</p>
56+
</CTableDataCell>
57+
<CTableDataCell><span class="h4">h4. Bootstrap heading</span></CTableDataCell>
58+
</CTableRow>
59+
<CTableRow>
60+
<CTableDataCell>
61+
<p>
62+
<code class="highlighter-rouge">
63+
&lt;h5&gt;&lt;/h5&gt;
64+
</code>
65+
</p>
66+
</CTableDataCell>
67+
<CTableDataCell><span class="h5">h5. Bootstrap heading</span></CTableDataCell>
68+
</CTableRow>
69+
<CTableRow>
70+
<CTableDataCell>
71+
<p>
72+
<code class="highlighter-rouge">
73+
&lt;h6&gt;&lt;/h6&gt;
74+
</code>
75+
</p>
76+
</CTableDataCell>
77+
<CTableDataCell><span class="h6">h6. Bootstrap heading</span></CTableDataCell>
78+
</CTableRow>
79+
</CTableBody>
80+
</CTable>
81+
</CCardBody>
82+
</CCard>
83+
<CCard>
84+
<CCardHeader>
85+
Headings
86+
</CCardHeader>
87+
<CCardBody>
88+
<p>
89+
<code class="highlighter-rouge">.h1</code> through
90+
<code class="highlighter-rouge">.h6</code>
91+
classes are also available, for when you want to match the font
92+
styling of a heading but cannot use the associated HTML element.
93+
</p>
94+
<div class="bd-example">
95+
<p class="h1">h1. Bootstrap heading</p>
96+
<p class="h2">h2. Bootstrap heading</p>
97+
<p class="h3">h3. Bootstrap heading</p>
98+
<p class="h4">h4. Bootstrap heading</p>
99+
<p class="h5">h5. Bootstrap heading</p>
100+
<p class="h6">h6. Bootstrap heading</p>
101+
</div>
102+
</CCardBody>
103+
</CCard>
104+
<CCard>
105+
<CCardHeader>
106+
Display headings
107+
</CCardHeader>
108+
<CCardBody>
109+
<p>
110+
Traditional heading elements are designed to work best in the meat
111+
of your page content. When you need a heading to stand out,
112+
consider using a <strong>display heading</strong>—a larger,
113+
slightly more opinionated heading style.
114+
</p>
115+
<div class="bd-example bd-example-type">
116+
<CTable>
117+
<CTableBody>
118+
<CTableRow>
119+
<CTableDataCell><span class="display-1">Display 1</span></CTableDataCell>
120+
</CTableRow>
121+
<CTableRow>
122+
<CTableDataCell><span class="display-2">Display 2</span></CTableDataCell>
123+
</CTableRow>
124+
<CTableRow>
125+
<CTableDataCell><span class="display-3">Display 3</span></CTableDataCell>
126+
</CTableRow>
127+
<CTableRow>
128+
<CTableDataCell><span class="display-4">Display 4</span></CTableDataCell>
129+
</CTableRow>
130+
</CTableBody>
131+
</CTable>
132+
</div>
133+
</CCardBody>
134+
</CCard>
135+
<CCard>
136+
<CCardHeader>
137+
Inline text elements
138+
</CCardHeader>
139+
<CCardBody>
140+
<p>
141+
Traditional heading elements are designed to work best in the meat
142+
of your page content. When you need a heading to stand out,
143+
consider using a <strong>display heading</strong>—a larger,
144+
slightly more opinionated heading style.
145+
</p>
146+
<div class="bd-example">
147+
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
148+
<p><del>
149+
This line of text is meant to be treated as deleted text.
150+
</del></p>
151+
<p><s>
152+
This line of text is meant to be treated as no longer accurate.
153+
</s></p>
154+
<p><ins>
155+
This line of text is meant to be treated as an addition to the document.
156+
</ins></p>
157+
<p><u>This line of text will render as underlined</u></p>
158+
<p><small>
159+
This line of text is meant to be treated as fine print.
160+
</small></p>
161+
<p><sCTableRowong>This line rendered as bold text.</sCTableRowong></p>
162+
<p><em>This line rendered as italicized text.</em></p>
163+
</div>
164+
</CCardBody>
165+
</CCard>
166+
<CCard>
167+
<CCardHeader>
168+
Description list alignment
169+
</CCardHeader>
170+
<CCardBody>
171+
<p>
172+
Align terms and descriptions horizontally by using our grid system’s
173+
predefined classes (or semantic mixins). For longer terms, you can
174+
optionally add a <code class="highlighter-rouge">.text-truncate</code>
175+
class to truncate the text with an ellipsis.
176+
</p>
177+
<div class="bd-example">
178+
<dl class="row">
179+
<dt class="col-sm-3">Description lists</dt>
180+
<dd class="col-sm-9">
181+
A description list is perfect for defining terms.
182+
</dd>
183+
184+
<dt class="col-sm-3">Euismod</dt>
185+
<dd class="col-sm-9">
186+
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
187+
<p>Donec id elit non mi porta gravida at eget metus.</p>
188+
</dd>
189+
190+
<dt class="col-sm-3">Malesuada porta</dt>
191+
<dd class="col-sm-9">
192+
Etiam porta sem malesuada magna mollis euismod.
193+
</dd>
194+
195+
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
196+
<dd class="col-sm-9">
197+
Fusce dapibus, tellus ac cursus commodo, tortor mauris
198+
condimentum nibh, ut fermentum massa justo sit amet risus.
199+
</dd>
200+
201+
<dt class="col-sm-3">Nesting</dt>
202+
<dd class="col-sm-9">
203+
<dl class="row">
204+
<dt class="col-sm-4">Nested definition list</dt>
205+
<dd class="col-sm-8">
206+
Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
207+
</dd>
208+
</dl>
209+
</dd>
210+
</dl>
211+
</div>
212+
</CCardBody>
213+
</CCard>
214+
</CCol>
215+
</CRow>
216+
</template>
217+
218+
<script>
219+
export default {
220+
name: "Typography",
221+
};
222+
</script>

0 commit comments

Comments
 (0)