Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit d68e5b0

Browse files
mrholekmrholek
committed
docs: migrate to Sass modules and enhance responsive behavior.
1 parent eac3a79 commit d68e5b0

File tree

15 files changed

+318
-226
lines changed

15 files changed

+318
-226
lines changed

‎packages/docs/.vuepress/client.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { defineClientConfig } from '@vuepress/client'
33
import { CIcon, CIconSvg } from '@coreui/icons-vue'
44
import CChartPlugin from '@coreui/vue-chartjs'
55
import CoreuiVue from '@coreui/vue/src/'
6-
import '@coreui/coreui/scss/coreui.scss'
76
import '@coreui/chartjs/scss/coreui-chartjs.scss'
87

98
import {
@@ -21,6 +20,7 @@ import {
2120
cilCheckCircle,
2221
cilCloudDownload,
2322
cilContrast,
23+
cilExternalLink,
2424
cilHandshake,
2525
cilInfo,
2626
cilLayers,
@@ -51,6 +51,7 @@ export const icons = {
5151
cilCheckCircle,
5252
cilCloudDownload,
5353
cilContrast,
54+
cilExternalLink,
5455
cilHandshake,
5556
cilInfo,
5657
cilLayers,

‎packages/docs/.vuepress/src/client/components/Header.vue

Lines changed: 53 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup lang="ts">
2+
import { RouterLink} from 'vue-router'
23
import { useColorModes } from '@coreui/vue/src'
34
45
const props = defineProps({
@@ -12,16 +13,60 @@ const { colorMode, setColorMode } = useColorModes('coreui-vue-docs-theme')
1213
<CHeaderToggler class="ms-md-3" @click="$emit('toggle-sidebar')">
1314
<CIcon icon="cil-menu" size="lg" />
1415
</CHeaderToggler>
15-
<div class="docs-search" id="docsearch"></div>
16-
<CHeaderNav class="ms-auto">
16+
<CHeaderBrand
17+
:as="RouterLink"
18+
class="d-lg-none"
19+
to="/"
20+
aria-label="Go to CoreUI for Vue.js documentation"
21+
>
22+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 102 116" height="32">
23+
<g fill="var(--cui-body-color, currentColor)" fillRule="nonzero">
24+
<path
25+
d="M96 25.091 57 2.574a12 12 0 0 0-12 0L6 25.091a12.034 12.034 0 0 0-6 10.392v45.034a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V35.483a12.034 12.034 0 0 0-6-10.392Zm-2 55.426a4 4 0 0 1-2 3.464l-39 22.516a4 4 0 0 1-4 0L10 83.981a4 4 0 0 1-2-3.464V35.483a4 4 0 0 1 2-3.464L49 9.502a4 4 0 0 1 4 0L92 32.02a4 4 0 0 1 2 3.464v45.034Z"
26+
></path>
27+
<path
28+
d="M74.022 71.038h-2.866a4 4 0 0 0-1.925.493L51.95 81.017 32 69.498V46.521l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.711a2 2 0 0 0-1.04-1.755L55.793 27.985a8.04 8.04 0 0 0-7.843.09L28 39.593a8.024 8.024 0 0 0-4 6.929v22.976a8 8 0 0 0 4 6.928l19.95 11.518a8.042 8.042 0 0 0 7.843.088l19.19-10.53a2 2 0 0 0 1.038-1.754v-2.71a2 2 0 0 0-2-2Z"
29+
></path>
30+
</g>
31+
</svg>
32+
</CHeaderBrand>
33+
<CHeaderNav class="me-auto d-none d-xl-flex" role="{undefined}">
34+
<CNavItem
35+
href="https://coreui.io/pricing/?framework=vue&src=react-docs&cta=coreui-header-pricing"
36+
>
37+
Pricing
38+
</CNavItem>
39+
<CNavItem
40+
href="https://coreui.requestshub.com/p/coreui-for-vuejs/roadmap"
41+
target="blank"
42+
rel="noopener noreferrer"
43+
>
44+
Roadmap
45+
<CIcon icon="cil-external-link" class="ms-2" size="sm" />
46+
</CNavItem>
47+
</CHeaderNav>
48+
<div class="docs-search ms-auto" id="docsearch"></div>
49+
<CHeaderNav class="ms-2">
1750
<CNavItem href="https://github.com/coreui">
1851
<CIcon icon="cib-github" size="xl" />
1952
</CNavItem>
20-
<CNavItem href="https://twitter.com/core_ui">
21-
<CIcon icon="cib-twitter" size="xl" />
53+
<CNavItem href="https://x.com/core_ui">
54+
<CIconSvg size="xl">
55+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 271">
56+
<path
57+
d="M236 0h46L181 115l118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123L-1.1 0h94.9l65.5 86.6zm-16.1 244h25.5L80.4 26H53z"
58+
></path>
59+
</svg>
60+
</CIconSvg>
2261
</CNavItem>
23-
<CNavItem href="https://opencollective.com/coreui">
24-
<CIcon icon="cib-open-collective" size="xl" />
62+
<CNavItem href="https://discord.gg/pQRWe5XdGm">
63+
<CIconSvg size="xl">
64+
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
65+
<path
66+
d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"
67+
></path>
68+
</svg>
69+
</CIconSvg>
2570
</CNavItem>
2671
<li class="nav-item py-2 py-lg-1">
2772
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"></div>
@@ -68,30 +113,21 @@ const { colorMode, setColorMode } = useColorModes('coreui-vue-docs-theme')
68113
<hr class="d-lg-none my-2 text-white-50" />
69114
</li>
70115
</CHeaderNav>
71-
<CButton
72-
class="d-lg-inline-block my-2 my-md-0 ms-md-3"
73-
color="primary"
74-
as="a"
75-
href="https://coreui.io/vue/docs/getting-started/introduction.html"
76-
variant="outline"
77-
>
78-
<CIcon icon="cil-cloud-download" /> Download
79-
</CButton>
80116
<CButton
81117
class="d-lg-inline-block my-2 my-md-0 ms-md-3"
82118
color="primary"
83119
href="https://coreui.io/about/services/?docs=coreui-header-button"
84120
variant="outline"
85121
>
86-
<CIcon class="me-2" icon="cil-handshake" /> Hire Us
122+
<CIcon class="me-xxl-2 d-none d-xxl-inline" icon="cil-handshake" /> Hire Us
87123
</CButton>
88124
<CButton
89125
class="d-lg-inline-block my-2 my-md-0 ms-md-3"
90126
color="primary"
91127
as="a"
92128
href="https://coreui.io/pricing/?framework=vue&docs=coreui-header-button"
93129
>
94-
Get CoreUI PRO
130+
Get CoreUI PRO<span className="d-none d-xxl-inline"> all-access</span> →
95131
</CButton>
96132
</CHeader>
97133
</template>

‎packages/docs/.vuepress/src/client/components/Toc.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ const toggleVisible = () => {
77
</script>
88

99
<template>
10-
<div class="docs-toc mt-4 mb-5 my-md-0 ps-xl-5 mb-lg-5 text-body-secondary">
10+
<div class="docs-toc mt-4 mb-5 my-lg-0 ps-xl-5 mb-lg-5 text-body-secondary">
1111
<button
12-
class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none docs-toc-toggle d-md-none"
12+
class="btn btn-link p-lg-0 mb-2 mb-lg-0 text-decoration-none docs-toc-toggle d-lg-none"
1313
type="button"
1414
:aria-expanded="visible ? true : false"
1515
aria-controls="tocContents"
@@ -18,7 +18,7 @@ const toggleVisible = () => {
1818
On this page
1919
<svg
2020
xmlns="http://www.w3.org/2000/svg"
21-
class="icon d-md-none ms-2"
21+
class="icon d-lg-none ms-2"
2222
aria-hidden="true"
2323
viewBox="0 0 512 512"
2424
>
@@ -29,7 +29,7 @@ const toggleVisible = () => {
2929
/>
3030
</svg>
3131
</button>
32-
<strong class="d-none d-md-block h6 mb-2 pb-2 border-bottom">On this page</strong>
32+
<strong class="d-none d-lg-block h6 mb-2 pb-2 border-bottom">On this page</strong>
3333
<CCollapse class="docs-toc-collapse" id="tocContents" :visible="visible">
3434
<Toc />
3535
</CCollapse>

‎packages/docs/.vuepress/src/client/styles/_ads.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
// stylelint-disable declaration-no-important, selector-max-id
2+
@use "@coreui/coreui/scss/mixins/border-radius" as *;
3+
@use "@coreui/coreui/scss/mixins/breakpoints" as *;
4+
@use "@coreui/coreui/scss/vendor/rfs" as *;
25

36
//
47
// Carbon ads

‎packages/docs/.vuepress/src/client/styles/_anchor.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "@coreui/coreui/scss/mixins/transition" as *;
2+
@use "@coreui/coreui/scss/variables" as *;
3+
14
.anchor-link {
25
font-weight: 400;
36
color: rgba($link-color, .5);

‎packages/docs/.vuepress/src/client/styles/_callouts.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "@coreui/coreui/scss/variables" as *;
2+
@use "variables" as *;
3+
14
//
25
// Callouts
36
//

‎packages/docs/.vuepress/src/client/styles/_component-examples.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
@use "@coreui/coreui/scss/mixins/border-radius" as *;
2+
@use "@coreui/coreui/scss/mixins/breakpoints" as *;
3+
@use "@coreui/coreui/scss/mixins/clearfix" as *;
4+
@use "@coreui/coreui/scss/mixins/container" as *;
5+
@use "@coreui/coreui/scss/mixins/grid" as *;
6+
@use "@coreui/coreui/scss/vendor/rfs" as *;
7+
@use "@coreui/coreui/scss/variables" as *;
8+
@use "variables" as *;
9+
110
//
211
// Docs examples
312
//

‎packages/docs/.vuepress/src/client/styles/_footer.scss

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "@coreui/coreui/scss/vendor/rfs" as *;
2+
@use "@coreui/coreui/scss/variables" as *;
3+
14
//
25
// Footer
36
//
@@ -7,13 +10,12 @@
710
@include font-size(.875rem);
811

912
a {
10-
color: var(--#{$prefix}tertiary-color);
11-
text-decoration: none;
13+
color: var(--#{$prefix}secondary-color);
14+
// text-decoration: none;
1215

1316
&:hover,
1417
&:focus {
1518
color: var(--cui-link-hover-color);
16-
text-decoration: underline;
1719
}
1820
}
1921
}

‎packages/docs/.vuepress/src/client/styles/_layout.scss

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1+
@use "@coreui/coreui/scss/mixins/breakpoints" as *;
2+
@use "@coreui/coreui/scss/mixins/transition" as *;
3+
@use "@coreui/coreui/scss/variables" as *;
4+
15
.wrapper {
26
width: 100%;
3-
@include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
7+
padding-inline-start: var(--cui-sidebar-occupy-start, 0);
48
will-change: auto;
59
@include transition(padding .15s);
6-
7-
> .container-lg {
8-
--cui-gutter-x: 3rem;
9-
}
1010
}
1111

1212
.docs-sidebar {
@@ -15,31 +15,34 @@
1515

1616
.docs-main {
1717
grid-area: main;
18+
display: grid;
19+
grid-template-areas:
20+
"header"
21+
"intro"
22+
"toc"
23+
"content";
24+
grid-template-rows: auto auto 1fr;
25+
gap: .5rem;
1826

1927
@include media-breakpoint-down(lg) {
2028
max-width: 760px;
2129
margin-inline: auto;
2230
}
2331

24-
@include media-breakpoint-up(md) {
25-
display: grid;
26-
grid-template-areas:
27-
"intro"
28-
"toc"
29-
"content";
30-
grid-template-rows: auto auto 1fr;
31-
gap: $grid-gutter-width;
32-
}
33-
34-
@include media-breakpoint-up(lg) {
32+
@include media-breakpoint-up(xl) {
3533
grid-template-areas:
3634
"intro toc"
3735
"content toc";
38-
grid-template-rows: auto 1fr;
36+
grid-template-rows: auto auto;
3937
grid-template-columns: 4fr 1fr;
38+
gap: $grid-gutter-width;
4039
}
4140
}
4241

42+
.docs-header {
43+
grid-area: header;
44+
}
45+
4346
.docs-intro {
4447
grid-area: intro;
4548
}

‎packages/docs/.vuepress/src/client/styles/_prism.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@use "sass:color";
2+
@use "@coreui/coreui/scss/mixins/color-mode" as *;
3+
@use "@coreui/coreui/scss/variables" as *;
4+
15
/* PrismJS 1.24.1
26
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript */
37
/**
@@ -16,7 +20,7 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli
1620
--base05: #333;
1721
--base06: #fff;
1822
--base07: #{$teal-700}; // #9a6700
19-
--base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
23+
--base08: #{color.mix($red-500, $red-600, 50%)}; // #bc4c00
2024
--base09: #{$cyan-700}; // #087990
2125
--base0A: #{$purple-500}; // #795da3
2226
--base0B: #{$blue-700}; // #183691

0 commit comments

Comments
 (0)