Skip to content

Commit 0ea44f8

Browse files
sghowerisghoweri
committed
refactor: add number prefixes to PL's Sass imports so files are organized based off of specificity
1 parent 12f3e07 commit 0ea44f8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1901
-1904
lines changed

‎packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/*------------------------------------*\
2+
#VARIABLES
3+
\*------------------------------------*/
4+
5+
/**
6+
* List Reset
7+
*/
8+
@mixin listReset() {
9+
list-style: none;
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
/**
15+
* Hide scrollbar
16+
* 1) This hides scrollbars on Windows devices
17+
*/
18+
@mixin hideScrollBar() {
19+
-ms-overflow-style: -ms-autohiding-scrollbar;
20+
21+
&::-webkit-scrollbar {
22+
width: 0 !important;
23+
}
24+
}
25+
26+
/**
27+
* Header Link Style
28+
*/
29+
@mixin linkStyle() {
30+
background: $pl-color-black;
31+
color: $pl-color-gray-50;
32+
text-decoration: none;
33+
line-height: 1;
34+
padding: 0.7rem 0.5rem;
35+
border: 0;
36+
text-align: left;
37+
transition: background $pl-animate-quick ease-out,
38+
color $pl-animate-quick ease-out;
39+
40+
&:hover {
41+
color: $pl-color-white;
42+
background: $pl-color-gray-87;
43+
}
44+
45+
&:focus,
46+
&.active {
47+
color: $pl-color-white;
48+
background: $pl-color-gray-87;
49+
outline: 1px dotted $pl-color-gray-50;
50+
outline-offset: -1px;
51+
}
52+
53+
/**
54+
* Header link styles inside light theme
55+
*/
56+
.pl-c-body--theme-light & {
57+
background: $pl-color-white;
58+
color: $pl-color-gray-70;
59+
}
60+
61+
/**
62+
* Header link styles inside cozy theme
63+
*/
64+
.pl-c-body--theme-density-cozy & {
65+
font-size: $pl-font-size-sm-2;
66+
padding: 1.2rem 0.8rem;
67+
}
68+
69+
/**
70+
* Header link styles inside comfortable theme
71+
*/
72+
.pl-c-body--theme-density-comfortable & {
73+
font-size: $pl-font-size-sm-2;
74+
padding: 1.5rem 1rem;
75+
}
76+
}
77+
78+
/**
79+
* Accordion panel
80+
*/
81+
@mixin accordionPanel() {
82+
overflow: hidden;
83+
max-height: 0;
84+
transition: max-height $pl-animate-quick ease-out;
85+
86+
/**
87+
* Active is when accordion panel is open
88+
*/
89+
&.pl-is-active {
90+
max-height: none;
91+
overflow: auto;
92+
@include hideScrollBar();
93+
94+
@media all and (min-width: $pl-bp-med) {
95+
max-height: 120rem;
96+
}
97+
}
98+
}

‎packages/uikit-workshop/src/sass/scss/abstracts/_variables.scss renamed to ‎packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@ $pl-color-gray-70: #4d4c4c;
1818
$pl-color-gray-87: #222;
1919
$pl-color-black: #000;
2020

21-
$pl-color-trans-white-25: rgba(255,255,255,0.25);
21+
$pl-color-trans-white-25: rgba(255, 255, 255, 0.25);
2222

23-
$pl-color-state-info: #02A4D5;
24-
$pl-color-state-complete: #03790F;
25-
$pl-color-state-inreview: #C7A118;
26-
$pl-color-state-deprecated: #B00B02;
23+
$pl-color-state-info: #02a4d5;
24+
$pl-color-state-complete: #03790f;
25+
$pl-color-state-inreview: #c7a118;
26+
$pl-color-state-deprecated: #b00b02;
2727

2828
// Font Family
29-
$pl-font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
29+
$pl-font: 'HelveticaNeue', 'Helvetica', 'Arial', sans-serif;
3030

3131
// Font sizes
3232
$pl-font-size-sm: 0.7rem;
@@ -36,7 +36,7 @@ $pl-font-size-large: 1.2rem;
3636

3737
// Spacing & Padding
3838
$pl-space: 1rem;
39-
$pl-doublespace: $pl-space*2;
39+
$pl-doublespace: $pl-space * 2;
4040
$pl-pad: 1rem;
4141
$pl-pad-half: $pl-pad/2;
4242
$offset-top: 2rem;
@@ -51,4 +51,4 @@ $pl-animate-quick: 0.1s;
5151

5252
// Borders
5353
$pl-border-radius: 3px;
54-
$pl-border-radius-med: 6px;
54+
$pl-border-radius-med: 6px;

‎packages/uikit-workshop/src/sass/scss/base/_body.scss renamed to ‎packages/uikit-workshop/src/sass/scss/02-base/_body.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
* 2) Styled as IDs to avoid collisions with user <body> tag
99
*/
1010
.pl-c-body {
11-
margin: 0;
12-
padding: 0;
13-
background: $pl-color-gray-13;
14-
-webkit-text-size-adjust: 100%;
15-
}
11+
margin: 0;
12+
padding: 0;
13+
background: $pl-color-gray-13;
14+
-webkit-text-size-adjust: 100%;
15+
}

‎packages/uikit-workshop/src/sass/scss/base/_reset.scss renamed to ‎packages/uikit-workshop/src/sass/scss/02-base/_reset.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
* going to default to this.
1212
*/
1313
.pl-c-body * {
14-
-moz-box-sizing: border-box;
15-
-webkit-box-sizing: border-box;
16-
box-sizing: border-box;
17-
}
14+
-moz-box-sizing: border-box;
15+
-webkit-box-sizing: border-box;
16+
box-sizing: border-box;
17+
}

‎packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+handlebars+php+php-extras+twig&plugins=line-numbers+autolinker */
2+
/**
3+
* prism.js default theme for JavaScript, CSS and HTML
4+
* Based on dabblet (http://dabblet.com)
5+
* @author Lea Verou
6+
*/
7+
8+
code[class*='language-'],
9+
pre[class*='language-'] {
10+
color: black;
11+
text-shadow: 0 1px white;
12+
font-family: Consolas, Monaco, 'Andale Mono', monospace;
13+
direction: ltr;
14+
text-align: left;
15+
white-space: pre;
16+
word-spacing: normal;
17+
word-break: normal;
18+
line-height: 1.5;
19+
20+
-moz-tab-size: 4;
21+
-o-tab-size: 4;
22+
tab-size: 4;
23+
24+
-webkit-hyphens: none;
25+
-moz-hyphens: none;
26+
-ms-hyphens: none;
27+
hyphens: none;
28+
}
29+
30+
pre[class*='language-']::-moz-selection,
31+
pre[class*='language-'] ::-moz-selection,
32+
code[class*='language-']::-moz-selection,
33+
code[class*='language-'] ::-moz-selection {
34+
text-shadow: none;
35+
background: #b3d4fc;
36+
}
37+
38+
pre[class*='language-']::selection,
39+
pre[class*='language-'] ::selection,
40+
code[class*='language-']::selection,
41+
code[class*='language-'] ::selection {
42+
text-shadow: none;
43+
background: #b3d4fc;
44+
}
45+
46+
@media print {
47+
code[class*='language-'],
48+
pre[class*='language-'] {
49+
text-shadow: none;
50+
}
51+
}
52+
53+
/* Code blocks */
54+
pre[class*='language-'] {
55+
padding: 1em;
56+
margin: 0.5em 0;
57+
overflow: auto;
58+
}
59+
60+
:not(pre) > code[class*='language-'],
61+
pre[class*='language-'] {
62+
background: #f5f2f0;
63+
}
64+
65+
/* Inline code */
66+
:not(pre) > code[class*='language-'] {
67+
padding: 0.1em;
68+
border-radius: 0.3em;
69+
}
70+
71+
.token.comment,
72+
.token.prolog,
73+
.token.doctype,
74+
.token.cdata {
75+
color: slategray;
76+
}
77+
78+
.token.punctuation {
79+
color: #999;
80+
}
81+
82+
.namespace {
83+
opacity: 0.7;
84+
}
85+
86+
.token.property,
87+
.token.tag,
88+
.token.boolean,
89+
.token.number,
90+
.token.constant,
91+
.token.symbol,
92+
.token.deleted {
93+
color: #905;
94+
}
95+
96+
.token.selector,
97+
.token.attr-name,
98+
.token.string,
99+
.token.char,
100+
.token.builtin,
101+
.token.inserted {
102+
color: #690;
103+
}
104+
105+
.token.operator,
106+
.token.entity,
107+
.token.url,
108+
.language-css .token.string,
109+
.style .token.string {
110+
color: #a67f59;
111+
background: hsla(0, 0%, 100%, 0.5);
112+
}
113+
114+
.token.atrule,
115+
.token.attr-value,
116+
.token.keyword {
117+
color: #07a;
118+
}
119+
120+
.token.function {
121+
color: #dd4a68;
122+
}
123+
124+
.token.regex,
125+
.token.important,
126+
.token.variable {
127+
color: #e90;
128+
}
129+
130+
.token.important,
131+
.token.bold {
132+
font-weight: bold;
133+
}
134+
.token.italic {
135+
font-style: italic;
136+
}
137+
138+
.token.entity {
139+
cursor: help;
140+
}
141+
142+
pre.line-numbers {
143+
position: relative;
144+
padding-left: 3.8em;
145+
counter-reset: linenumber;
146+
}
147+
148+
pre.line-numbers > code {
149+
position: relative;
150+
}
151+
152+
.line-numbers .line-numbers-rows {
153+
position: absolute;
154+
pointer-events: none;
155+
top: 0;
156+
font-size: 100%;
157+
left: -3.8em;
158+
width: 3em; /* works for line-numbers below 1000 lines */
159+
letter-spacing: -1px;
160+
border-right: 1px solid #999;
161+
162+
-webkit-user-select: none;
163+
-moz-user-select: none;
164+
-ms-user-select: none;
165+
user-select: none;
166+
}
167+
168+
.line-numbers-rows > span {
169+
pointer-events: none;
170+
display: block;
171+
counter-increment: linenumber;
172+
}
173+
174+
.line-numbers-rows > span:before {
175+
content: counter(linenumber);
176+
color: #999;
177+
display: block;
178+
padding-right: 0.8em;
179+
text-align: right;
180+
}
181+
.token a {
182+
color: inherit;
183+
}

0 commit comments

Comments
 (0)