Skip to content

Commit 0809cca

Browse files
peterpeterparkerpeterpeterparker
committed
feat: kit for css too
1 parent cdc08bd commit 0809cca

11 files changed

+162
-9
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ UserInterfaceState.xcuserstate
2828

2929
lib/
3030
utils/deck/css/
31+
utils/kit/css/
3132

3233
.firebase/
3334

‎utils/kit/package.json

+11-7
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,17 @@
44
"author": "David Dal Busco",
55
"description": "Functions, utils and styles for the DeckDeckGo presentations created with the kits",
66
"license": "MIT",
7+
"main": "lib/index.cjs.js",
8+
"module": "lib/index.js",
9+
"types": "lib/index.d.ts",
10+
"scripts": {
11+
"prepare": "npm run build",
12+
"build": "rimraf lib && rimraf css && rollup -c && tsc && npm run build-kit",
13+
"build-kit": "npm run build-kit-sass && npm run build-kit-autoprefix && npm run build-kit-cleancss",
14+
"build-kit-sass": "node-sass --output-style expanded styles/index.scss ./css/kit.css",
15+
"build-kit-autoprefix": "postcss --use autoprefixer --map false --output ./css/kit.css ./css/kit.css",
16+
"build-kit-cleancss": "cleancss -o ./css/kit.min.css ./css/kit.css"
17+
},
718
"repository": {
819
"type": "git",
920
"url": "git://github.com/deckgo/deckdeckgo.git"
@@ -42,13 +53,6 @@
4253
"typescript": "^4.0.3",
4354
"web-social-share": "^6.4.1"
4455
},
45-
"main": "lib/index.cjs.js",
46-
"module": "lib/index.js",
47-
"types": "lib/index.d.ts",
48-
"scripts": {
49-
"prepare": "npm run build",
50-
"build": "rimraf lib && rollup -c && tsc"
51-
},
5256
"files": [
5357
"lib",
5458
"README.md",

‎utils/kit/src/modals/menu.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ async function buildMenuListActions(): Promise<string> {
1717

1818
if (!EMBEDDED) {
1919
result +=
20-
'<ion-item ion-item button detail="false" id="notes" color="primary" style="--border-style: none;"><ion-icon src="https://deckdeckgo.com/assets/icons/ionicons/clipboard.svg" aria-label="Display slide notes" slot="end"></ion-icon><ion-label>Display slide notes</ion-label></ion-item>';
20+
'<ion-item ion-item button detail="false" id="notes" style="--border-style: none;"><ion-icon src="https://deckdeckgo.com/assets/icons/ionicons/clipboard.svg" aria-label="Display slide notes" slot="end"></ion-icon><ion-label>Display slide notes</ion-label></ion-item>';
2121
}
2222

2323
result +=
24-
'<ion-item ion-item button detail="false" id="share" color="primary" style="--border-style: none;"><ion-icon src="https://deckdeckgo.com/assets/icons/ionicons/share.svg" aria-label="Share this presentation" slot="end"></ion-icon><ion-label>Share</ion-label></ion-item>';
24+
'<ion-item ion-item button detail="false" id="share" style="--border-style: none;"><ion-icon src="https://deckdeckgo.com/assets/icons/ionicons/share.svg" aria-label="Share this presentation" slot="end"></ion-icon><ion-label>Share</ion-label></ion-item>';
2525
result +=
2626
'<ion-item ion-item button detail="false" id="made" style="--border-style: none; --ion-item-background: white;"><ion-icon src="https://deckdeckgo.com/assets/icons/deckdeckgo.svg" aria-label="DeckDeckGo" slot="end"></ion-icon><ion-label>Made with DeckDeckGo</ion-label></ion-item>';
2727

‎utils/kit/styles/alert.scss

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
ion-alert {
2+
--ion-text-color: var(--ion-color-dark);
3+
--ion-color-primary: var(--ion-color-dark);
4+
}

‎utils/kit/styles/button.scss

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
button.navigation {
2+
background: white;
3+
color: #000000;
4+
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
5+
transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1), color 280ms cubic-bezier(0.4, 0, 0.2, 1),
6+
opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms;
7+
border-radius: 50%;
8+
margin: 8px;
9+
width: 40px;
10+
height: 40px;
11+
contain: strict;
12+
outline: none;
13+
14+
position: relative;
15+
overflow: hidden;
16+
}
17+
18+
button.navigation.activated {
19+
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12);
20+
}
21+
22+
button.navigation ion-icon {
23+
font-size: 24px;
24+
}
25+
26+
button.navigation.hide-on-mobile {
27+
display: var(--deckgo-hide-on-mobile);
28+
}
29+
30+
button.navigation.transparent,
31+
button.navigation.tertiary {
32+
box-shadow: none;
33+
width: 60px;
34+
height: 60px;
35+
}
36+
37+
button.navigation.transparent ion-icon,
38+
button.navigation.tertiary ion-icon {
39+
font-size: 36px;
40+
}
41+
42+
button.navigation.transparent {
43+
border: 1px solid var(--ion-color-dark);
44+
}
45+
46+
button.navigation.tertiary {
47+
border: 1px solid var(--ion-color-tertiary);
48+
background: var(--ion-color-tertiary);
49+
color: var(--ion-color-tertiary-contrast);
50+
}
51+
52+
@media (max-width: 1024px) {
53+
#navigation {
54+
display: grid;
55+
}
56+
57+
#previous {
58+
grid-row: 5;
59+
}
60+
61+
#next {
62+
grid-row: 6;
63+
}
64+
}

‎utils/kit/styles/content.scss

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
ion-content {
2+
--ion-background-color: transparent;
3+
}
4+
5+
ion-fab {
6+
direction: ltr;
7+
display: flex;
8+
}

‎utils/kit/styles/img.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
deckgo-deck deckgo-lazy-img {
2+
pointer-events: none;
3+
}

‎utils/kit/styles/index.scss

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import "alert";
2+
@import "button";
3+
@import "content";
4+
@import "img";
5+
@import "modal";
6+
@import "popover";
7+
@import "print";

‎utils/kit/styles/modal.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
ion-modal[class*="sc-ion-modal"] {
2+
--min-height: 570px;
3+
}

‎utils/kit/styles/popover.scss

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
ion-popover {
2+
--ion-background-color: white;
3+
--ion-item-text-color: var(--ion-color-dark);
4+
}
5+
6+
ion-popover[class*="sc-ion-popover"] div.popover-content {
7+
color: var(--ion-color-dark);
8+
}
9+
10+
ion-popover ion-list-header {
11+
--color: var(--ion-color-dark);
12+
}
13+
14+
ion-popover ion-item {
15+
--color: var(--ion-color-dark);
16+
--inner-border-width: 0;
17+
}
18+
19+
ion-popover[class*="sc-ion-popover"].menu {
20+
--min-width: 60vw;
21+
--height: 60vh;
22+
}
23+
24+
ion-popover[class*="sc-ion-popover"].options {
25+
--min-width: 300px;
26+
}
27+
28+
ion-popover[class*="sc-ion-popover"].access {
29+
--min-width: 260px;
30+
}
31+
32+
ion-popover[class*="sc-ion-popover"].info {
33+
--width: 300px;
34+
--max-width: calc(100vw - 64px);
35+
}
36+
37+
ion-popover.menu ion-list.list-ios {
38+
margin-bottom: 0;
39+
padding-top: 8px;
40+
padding-bottom: 8px;
41+
}

‎utils/kit/styles/print.scss

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@media print {
2+
body {
3+
position: inherit;
4+
}
5+
6+
ion-app.ion-page {
7+
overflow: visible;
8+
contain: none;
9+
}
10+
11+
ion-content {
12+
contain: none;
13+
}
14+
15+
#navigation {
16+
display: none;
17+
}
18+
}

0 commit comments

Comments
 (0)