@chassis-ui/docs 0.1.9 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,124 +0,0 @@
1
- .cxd-masthead {
2
- --cxd-pink-rgb: #{to-rgb($pink)};
3
- padding: 3rem 0;
4
- // stylelint-disable
5
- background-image: linear-gradient(180deg, rgba(var(--cx-bg-main-rgb), .01), rgba(var(--cx-bg-main-rgb), 1) 85%),
6
- radial-gradient(ellipse at top left, rgba(var(--cx-primary-rgb), .25), transparent 50%),
7
- radial-gradient(ellipse at top right, rgba(var(--cx-secondary-rgb), .25), transparent 50%),
8
- radial-gradient(ellipse at center right, rgba(var(--cx-secondary-rgb), .25), transparent 50%),
9
- radial-gradient(ellipse at center left, rgba(var(--cx-secondary-rgb), .25), transparent 50%);
10
- // stylelint-enable
11
-
12
- h1 {
13
- --cx-heading-color: var(--cx-fg-color);
14
- @include font-size(4rem);
15
- line-height: 1.25em;
16
- }
17
-
18
- .lead {
19
- @include font-size(1rem);
20
- font-family: var(--cx-font-family-display);
21
- font-weight: 400;
22
- line-height: 1.5em;
23
- color: var(--cx-fg-subtle);
24
- }
25
-
26
- .cxd-code-snippet {
27
- width: 24rem;
28
- margin: 0;
29
- text-align: left;
30
- border-color: var(--cx-border-subtle);
31
- border-width: 1px;
32
- @include border-radius(.5rem);
33
- }
34
-
35
- // .highlight {
36
- // width: 100%;
37
- // padding: .5rem 1rem;
38
- // overflow: hidden;
39
- // text-overflow: ellipsis;
40
- // white-space: nowrap;
41
- // background-color: rgba(var(--cx-fg-color-rgb), .075);
42
- // @include border-radius(calc(.5rem - 1px));
43
-
44
- // @include media-breakpoint-up(large) {
45
- // padding-right: 4rem;
46
- // }
47
-
48
- // pre {
49
- // padding: 0;
50
- // margin: .625rem 0;
51
- // overflow: hidden;
52
- // }
53
- // }
54
- // .button-clipboard {
55
- // position: absolute;
56
- // top: -.625rem;
57
- // right: 0;
58
- // background-color: transparent;
59
- // }
60
-
61
- #carbonads { // stylelint-disable-line selector-max-id
62
- margin-inline: auto;
63
- }
64
-
65
- @include media-breakpoint-up(medium) {
66
- .lead {
67
- @include font-size(1.5rem);
68
- }
69
- }
70
- }
71
-
72
- .masthead-followup {
73
- h2,
74
- h3,
75
- h4 {
76
- --cx-heading-color: var(--cx-fg-color);
77
- }
78
-
79
- .lead {
80
- @include font-size(1rem);
81
- }
82
-
83
- @include media-breakpoint-up(medium) {
84
- .lead {
85
- @include font-size(1.25rem);
86
- }
87
- }
88
- }
89
-
90
- .masthead-followup-icon {
91
- padding: 1rem;
92
- color: rgba(var(--bg-rgb), 1);
93
- background-color: rgba(var(--bg-rgb), .1);
94
- background-blend-mode: multiple;
95
- @include border-radius(1rem);
96
- mix-blend-mode: darken;
97
-
98
- svg {
99
- filter: drop-shadow(0 1px 1px var(--cx-bg-color));
100
- }
101
- }
102
-
103
- .masthead-notice {
104
- background-color: var(--cxd-accent);
105
- box-shadow: inset 0 -1px 1px rgba(var(--cx-fg-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--cx-bg-color-rgb), .75);
106
- }
107
-
108
- .animate-image {
109
- > img {
110
- @include transition(transform .2s ease-in-out);
111
- }
112
-
113
- &:hover > img {
114
- transform: scale(1.1);
115
- }
116
- }
117
-
118
- @if $enable-dark-mode {
119
- [data-cx-theme="dark"] {
120
- .masthead-followup-icon {
121
- mix-blend-mode: lighten;
122
- }
123
- }
124
- }