pages_core 3.12.1 → 3.12.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/VERSION +1 -1
- data/app/assets/builds/pages_core/admin-dist.js +135 -50
- data/app/assets/builds/pages_core/admin-dist.js.map +7 -0
- data/app/assets/builds/pages_core/admin.css +72 -20
- data/app/assets/stylesheets/pages_core/admin/components/attachments.css +1 -1
- data/app/assets/stylesheets/pages_core/admin/components/image_editor.css +2 -2
- data/app/assets/stylesheets/pages_core/admin/components/image_grid.css +8 -8
- data/app/assets/stylesheets/pages_core/admin/components/image_uploader.css +2 -2
- data/app/assets/stylesheets/pages_core/admin/components/layout.css +2 -2
- data/app/assets/stylesheets/pages_core/admin/components/modal.css +2 -2
- data/app/assets/stylesheets/pages_core/admin/components/search.css +27 -0
- data/app/assets/stylesheets/pages_core/admin/controllers/pages.css +6 -0
- data/app/controllers/admin/pages_controller.rb +12 -11
- data/app/controllers/concerns/pages_core/rss_controller.rb +17 -1
- data/app/controllers/pages_core/admin_controller.rb +6 -0
- data/app/controllers/pages_core/frontend/pages_controller.rb +9 -5
- data/app/controllers/pages_core/sitemaps_controller.rb +3 -5
- data/app/helpers/admin/pages_helper.rb +32 -0
- data/app/helpers/pages_core/images_helper.rb +28 -7
- data/app/javascript/admin-dist.ts +2 -0
- data/app/javascript/components/Attachments/{Attachment.jsx → Attachment.tsx} +42 -33
- data/app/javascript/components/Attachments/{AttachmentEditor.jsx → AttachmentEditor.tsx} +23 -23
- data/app/javascript/components/{EditableImage.jsx → EditableImage.tsx} +27 -24
- data/app/javascript/components/{FileUploadButton.jsx → FileUploadButton.tsx} +15 -16
- data/app/javascript/components/ImageCropper/FocalPoint.tsx +94 -0
- data/app/javascript/components/ImageCropper/{Image.jsx → Image.tsx} +13 -14
- data/app/javascript/components/ImageCropper/{Toolbar.jsx → Toolbar.tsx} +16 -12
- data/app/javascript/components/ImageCropper/{useCrop.js → useCrop.ts} +80 -37
- data/app/javascript/components/{ImageCropper.jsx → ImageCropper.tsx} +17 -15
- data/app/javascript/components/ImageEditor/{Form.jsx → Form.tsx} +24 -23
- data/app/javascript/components/{ImageEditor.jsx → ImageEditor.tsx} +17 -15
- data/app/javascript/components/ImageGrid/{DragElement.jsx → DragElement.tsx} +12 -10
- data/app/javascript/components/ImageGrid/{GridImage.jsx → GridImage.tsx} +40 -30
- data/app/javascript/components/ImageGrid/{Placeholder.jsx → Placeholder.tsx} +5 -6
- data/app/javascript/components/ImageGrid.jsx +3 -4
- data/app/javascript/components/{ImageUploader.jsx → ImageUploader.tsx} +46 -41
- data/app/javascript/components/Modal.tsx +48 -0
- data/app/javascript/components/PageImages.tsx +28 -0
- data/app/javascript/components/{PageTreeDraggable.jsx → PageTree/Draggable.tsx} +79 -57
- data/app/javascript/components/{PageTreeNode.jsx → PageTree/Node.tsx} +79 -70
- data/app/javascript/components/PageTree/types.ts +15 -0
- data/app/javascript/components/PageTree.tsx +206 -0
- data/app/javascript/components/RichTextToolbarButton.tsx +17 -0
- data/app/javascript/components/TagEditor/{AddTagForm.jsx → AddTagForm.tsx} +9 -10
- data/app/javascript/components/TagEditor/{Tag.jsx → Tag.tsx} +8 -9
- data/app/javascript/components/{TagEditor.jsx → TagEditor.tsx} +12 -13
- data/app/javascript/components/Toast.tsx +61 -0
- data/app/javascript/components/drag/{draggedOrder.js → draggedOrder.ts} +22 -12
- data/app/javascript/components/drag/types.ts +28 -0
- data/app/javascript/components/drag/{useDragCollection.js → useDragCollection.ts} +40 -22
- data/app/javascript/components/drag/{useDragUploader.js → useDragUploader.ts} +34 -25
- data/app/javascript/components/drag/useDraggable.ts +21 -0
- data/app/javascript/components/{drag.js → drag.ts} +1 -0
- data/app/javascript/controllers/{EditPageController.js → EditPageController.ts} +3 -1
- data/app/javascript/controllers/{LoginController.js → LoginController.ts} +7 -3
- data/app/javascript/controllers/{MainController.js → MainController.ts} +19 -14
- data/app/javascript/features/{RichText.jsx → RichText.tsx} +3 -3
- data/app/javascript/{index.js → index.ts} +8 -7
- data/app/javascript/lib/{Tree.js → Tree.ts} +106 -85
- data/app/javascript/lib/{copyToClipboard.js → copyToClipboard.ts} +1 -1
- data/app/javascript/lib/{readyHandler.js → readyHandler.ts} +4 -2
- data/app/javascript/lib/{request.js → request.ts} +11 -5
- data/app/javascript/stores/useModalStore.ts +15 -0
- data/app/javascript/stores/useToastStore.ts +26 -0
- data/app/javascript/stores.ts +2 -0
- data/app/javascript/types.ts +30 -0
- data/app/policies/page_policy.rb +4 -0
- data/app/views/admin/calendars/_sidebar.html.erb +3 -0
- data/app/views/admin/news/_sidebar.html.erb +3 -0
- data/app/views/admin/pages/_list_item.html.erb +4 -22
- data/app/views/admin/pages/_search_bar.html.erb +12 -0
- data/app/views/admin/pages/index.html.erb +3 -0
- data/app/views/admin/pages/search.html.erb +54 -0
- data/app/views/feeds/pages.rss.builder +3 -9
- data/config/routes.rb +1 -0
- data/lib/pages_core/configuration/pages.rb +0 -1
- data/lib/rails/generators/pages_core/frontend/frontend_generator.rb +33 -17
- data/lib/rails/generators/pages_core/frontend/templates/application.html.erb +0 -1
- data/lib/rails/generators/pages_core/frontend/templates/javascript/lib/gridOverlay.ts +40 -0
- data/lib/rails/generators/pages_core/frontend/templates/javascript/lib/responsiveEmbeds.ts +68 -0
- data/lib/rails/generators/pages_core/frontend/templates/postcss.config.js +17 -0
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/application.postcss.css +4 -0
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/components/base.css +24 -0
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/components/layout.css +21 -0
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/config.css +5 -0
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/animation.css +5 -0
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/colors.css +18 -0
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/fonts.css +6 -0
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/grid.css +65 -0
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/typography.css +131 -0
- data/lib/rails/generators/pages_core/install/templates/pages_initializer.rb +0 -3
- metadata +69 -63
- data/app/javascript/admin-dist.js +0 -2
- data/app/javascript/components/ImageCropper/FocalPoint.jsx +0 -93
- data/app/javascript/components/Modal.jsx +0 -59
- data/app/javascript/components/PageImages.jsx +0 -25
- data/app/javascript/components/PageTree.jsx +0 -196
- data/app/javascript/components/RichTextToolbarButton.jsx +0 -20
- data/app/javascript/components/Toast.jsx +0 -72
- data/app/javascript/components/drag/useDraggable.js +0 -17
- data/app/javascript/stores/ModalStore.jsx +0 -12
- data/app/javascript/stores/ToastStore.jsx +0 -14
- data/app/javascript/stores.js +0 -2
- data/lib/rails/generators/pages_core/frontend/templates/javascript/lib/GridOverlay.js +0 -66
- data/lib/rails/generators/pages_core/frontend/templates/javascript/lib/ResponsiveEmbeds.js +0 -72
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/application.sass.scss +0 -15
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/components/base.scss +0 -12
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/config.scss +0 -26
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/framework/breakpoints.scss +0 -42
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/framework/clearfix.scss +0 -7
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/framework/fonts.scss +0 -32
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/framework/grid.scss +0 -168
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/framework/grid_overlay.scss +0 -44
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/colors.scss +0 -8
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/typography.scss +0 -90
- data/lib/rails/generators/pages_core/frontend/templates/stylesheets/vendor/normalize.css +0 -349
- /data/app/javascript/components/Attachments/{Placeholder.jsx → Placeholder.tsx} +0 -0
- /data/app/javascript/components/ImageGrid/{FilePlaceholder.jsx → FilePlaceholder.tsx} +0 -0
- /data/app/javascript/{components.js → components.ts} +0 -0
- /data/app/javascript/{hooks.js → hooks.ts} +0 -0
@@ -1,17 +0,0 @@
|
|
1
|
-
import { useEffect, useRef } from "react";
|
2
|
-
|
3
|
-
export default function useDraggable(draggable, startDrag) {
|
4
|
-
const ref = useRef();
|
5
|
-
|
6
|
-
const handleDrag = (evt) => {
|
7
|
-
evt.preventDefault();
|
8
|
-
evt.stopPropagation();
|
9
|
-
startDrag(evt, draggable);
|
10
|
-
};
|
11
|
-
|
12
|
-
useEffect(() => {
|
13
|
-
draggable.ref.current = ref.current;
|
14
|
-
}, []);
|
15
|
-
|
16
|
-
return { ref: ref, onDragStart: handleDrag, draggable: true };
|
17
|
-
}
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import { createStore } from "redux";
|
2
|
-
|
3
|
-
export default createStore((state = {}, action) => {
|
4
|
-
switch(action.type) {
|
5
|
-
case "OPEN":
|
6
|
-
return {...state, component: action.payload };
|
7
|
-
case "CLOSE":
|
8
|
-
return {...state, component: null };
|
9
|
-
default:
|
10
|
-
return state;
|
11
|
-
}
|
12
|
-
});
|
@@ -1,14 +0,0 @@
|
|
1
|
-
import { createStore } from "redux";
|
2
|
-
|
3
|
-
export default createStore((state = [], action) => {
|
4
|
-
switch(action.type) {
|
5
|
-
case "ERROR":
|
6
|
-
return [...state, { message: action.message, type: "error" }];
|
7
|
-
case "NOTICE":
|
8
|
-
return [...state, { message: action.message, type: "notice" }];
|
9
|
-
case "NEXT":
|
10
|
-
return state.slice(1);
|
11
|
-
default:
|
12
|
-
return state;
|
13
|
-
}
|
14
|
-
});
|
data/app/javascript/stores.js
DELETED
@@ -1,66 +0,0 @@
|
|
1
|
-
class GridOverlay {
|
2
|
-
constructor() {
|
3
|
-
this.gridOverlay = null;
|
4
|
-
this.showGrid = false;
|
5
|
-
this.init = this.init.bind(this);
|
6
|
-
}
|
7
|
-
|
8
|
-
bindHotkey() {
|
9
|
-
document.addEventListener("keyup", (evt) => {
|
10
|
-
if (evt.ctrlKey && evt.which == 71) {
|
11
|
-
this.toggle();
|
12
|
-
}
|
13
|
-
});
|
14
|
-
}
|
15
|
-
|
16
|
-
init() {
|
17
|
-
this.gridOverlay = document.querySelector(".grid-overlay");
|
18
|
-
if (this.gridOverlay) {
|
19
|
-
this.restoreState();
|
20
|
-
this.bindHotkey();
|
21
|
-
this.updateDOM();
|
22
|
-
}
|
23
|
-
}
|
24
|
-
|
25
|
-
ready(callback) {
|
26
|
-
if (document.readyState === "complete" ||
|
27
|
-
(document.readyState !== "loading" &&
|
28
|
-
!document.documentElement.doScroll)) {
|
29
|
-
callback();
|
30
|
-
} else {
|
31
|
-
document.addEventListener("DOMContentLoaded", callback);
|
32
|
-
}
|
33
|
-
}
|
34
|
-
|
35
|
-
restoreState() {
|
36
|
-
this.showGrid = window.localStorage.getItem("showGrid");
|
37
|
-
}
|
38
|
-
|
39
|
-
saveState() {
|
40
|
-
if (this.showGrid) {
|
41
|
-
window.localStorage.setItem("showGrid", "true");
|
42
|
-
} else {
|
43
|
-
window.localStorage.removeItem("showGrid");
|
44
|
-
}
|
45
|
-
}
|
46
|
-
|
47
|
-
start() {
|
48
|
-
this.ready(this.init);
|
49
|
-
}
|
50
|
-
|
51
|
-
toggle() {
|
52
|
-
this.showGrid = !this.showGrid;
|
53
|
-
this.saveState();
|
54
|
-
this.updateDOM();
|
55
|
-
}
|
56
|
-
|
57
|
-
updateDOM() {
|
58
|
-
if (this.showGrid) {
|
59
|
-
this.gridOverlay.classList.add("grid-overlay--active");
|
60
|
-
} else {
|
61
|
-
this.gridOverlay.classList.remove("grid-overlay--active");
|
62
|
-
}
|
63
|
-
}
|
64
|
-
}
|
65
|
-
|
66
|
-
export default new GridOverlay();
|
@@ -1,72 +0,0 @@
|
|
1
|
-
class ResponsiveEmbeds {
|
2
|
-
readyHandler(fn) {
|
3
|
-
if (document.readyState === "complete" || document.readyState === "interactive") {
|
4
|
-
setTimeout(fn, 1);
|
5
|
-
} else {
|
6
|
-
document.addEventListener("DOMContentLoaded", fn);
|
7
|
-
}
|
8
|
-
}
|
9
|
-
|
10
|
-
wrapEmbeds() {
|
11
|
-
let selectors = [ "iframe[src*=\"bandcamp.com\"]",
|
12
|
-
"iframe[src*=\"player.vimeo.com\"]",
|
13
|
-
"iframe[src*=\"youtube.com\"]",
|
14
|
-
"iframe[src*=\"youtube-nocookie.com\"]",
|
15
|
-
"iframe[src*=\"spotify.com\"]",
|
16
|
-
"iframe[src*=\"kickstarter.com\"][src*=\"video.html\"]" ];
|
17
|
-
|
18
|
-
let embeds = Array.prototype.slice.call(
|
19
|
-
document.querySelectorAll(selectors.join(","))
|
20
|
-
);
|
21
|
-
|
22
|
-
function wrapEmbed(embed) {
|
23
|
-
const parent = embed.parentNode;
|
24
|
-
|
25
|
-
// Recycle the existing container if the embed is already responsive.
|
26
|
-
if (parent.tagName === "DIV" &&
|
27
|
-
parent.childNodes.length === 1 &&
|
28
|
-
parent.style.position === "relative") {
|
29
|
-
return parent;
|
30
|
-
}
|
31
|
-
|
32
|
-
let wrapper = document.createElement("div");
|
33
|
-
if (parent.tagName === "P") {
|
34
|
-
parent.parentNode.replaceChild(wrapper, parent);
|
35
|
-
} else {
|
36
|
-
parent.replaceChild(wrapper, embed);
|
37
|
-
}
|
38
|
-
wrapper.appendChild(embed);
|
39
|
-
return wrapper;
|
40
|
-
}
|
41
|
-
|
42
|
-
embeds.forEach(function (embed) {
|
43
|
-
if (embed.parentNode &&
|
44
|
-
embed.parentNode.classList.contains("responsive-embed")) {
|
45
|
-
return;
|
46
|
-
}
|
47
|
-
|
48
|
-
let width = embed.offsetWidth;
|
49
|
-
let height = embed.offsetHeight;
|
50
|
-
let ratio = height / width;
|
51
|
-
let wrapper = wrapEmbed(embed);
|
52
|
-
|
53
|
-
wrapper.classList.add("responsive-embed");
|
54
|
-
wrapper.style.position = "relative";
|
55
|
-
wrapper.style.width = "100%";
|
56
|
-
wrapper.style.paddingTop = 0;
|
57
|
-
wrapper.style.paddingBottom = (ratio * 100) + "%";
|
58
|
-
|
59
|
-
embed.style.position = "absolute";
|
60
|
-
embed.style.width = "100%";
|
61
|
-
embed.style.height = "100%";
|
62
|
-
embed.style.top = "0";
|
63
|
-
embed.style.left = "0";
|
64
|
-
});
|
65
|
-
}
|
66
|
-
|
67
|
-
start() {
|
68
|
-
this.readyHandler(() => this.wrapEmbeds());
|
69
|
-
}
|
70
|
-
}
|
71
|
-
|
72
|
-
export default new ResponsiveEmbeds();
|
@@ -1,15 +0,0 @@
|
|
1
|
-
// Entry point for your Sass build
|
2
|
-
@import
|
3
|
-
'vendor/normalize',
|
4
|
-
'config',
|
5
|
-
|
6
|
-
'framework/breakpoints',
|
7
|
-
'framework/clearfix',
|
8
|
-
'framework/grid',
|
9
|
-
'framework/grid_overlay',
|
10
|
-
'framework/fonts',
|
11
|
-
|
12
|
-
'global/colors',
|
13
|
-
'global/typography',
|
14
|
-
|
15
|
-
'components/base';
|
@@ -1,26 +0,0 @@
|
|
1
|
-
$breakpoints: (mobile: 900px,
|
2
|
-
large: 1400px);
|
3
|
-
|
4
|
-
$grids : (default: (column-count: 12,
|
5
|
-
column: 94px,
|
6
|
-
gutter: 24px,
|
7
|
-
padding: 24px),
|
8
|
-
mobile: (column-count: 4,
|
9
|
-
column: 60px,
|
10
|
-
gutter: 16px,
|
11
|
-
padding: 16px));
|
12
|
-
|
13
|
-
$spacings: (1: 8px,
|
14
|
-
2: 16px,
|
15
|
-
3: 24px,
|
16
|
-
4: 32px,
|
17
|
-
5: 40px,
|
18
|
-
6: 48px,
|
19
|
-
8: 64px,
|
20
|
-
9: 72px,
|
21
|
-
10: 80px,
|
22
|
-
16: 128px,
|
23
|
-
20: 160px);
|
24
|
-
|
25
|
-
// Uncomment to limit full width
|
26
|
-
// $limit-width: 1600px;
|
data/lib/rails/generators/pages_core/frontend/templates/stylesheets/framework/breakpoints.scss
DELETED
@@ -1,42 +0,0 @@
|
|
1
|
-
// ---- Defaults --------------------------------------------------------------
|
2
|
-
|
3
|
-
$breakpoints: (mobile: 900px,
|
4
|
-
large: 1400px) !default;
|
5
|
-
|
6
|
-
|
7
|
-
// ---- Mixins ----------------------------------------------------------------
|
8
|
-
|
9
|
-
@function breakpoint-value($value) {
|
10
|
-
@if type-of($value) == "string" {
|
11
|
-
@return map-get($breakpoints, $value);
|
12
|
-
}
|
13
|
-
@else {
|
14
|
-
@return $value;
|
15
|
-
}
|
16
|
-
}
|
17
|
-
|
18
|
-
@mixin breakpoint($min: "", $max: "", $orientation: "") {
|
19
|
-
$query: "screen";
|
20
|
-
|
21
|
-
@if $min != "" {
|
22
|
-
$query: $query + ' and (min-width: #{breakpoint-value($min)})';
|
23
|
-
}
|
24
|
-
|
25
|
-
@if $max != "" {
|
26
|
-
$query: $query + ' and (max-width: #{breakpoint-value($max)})';
|
27
|
-
}
|
28
|
-
|
29
|
-
@if $orientation != "" {
|
30
|
-
$query: $query + ' and (orientation: #{$orientation})';
|
31
|
-
}
|
32
|
-
|
33
|
-
@media #{$query} {
|
34
|
-
@content;
|
35
|
-
}
|
36
|
-
}
|
37
|
-
|
38
|
-
@mixin mobile {
|
39
|
-
@include breakpoint($max: mobile) {
|
40
|
-
@content
|
41
|
-
}
|
42
|
-
}
|
@@ -1,32 +0,0 @@
|
|
1
|
-
@use "sass:list";
|
2
|
-
|
3
|
-
@function font-extension($format) {
|
4
|
-
$font-extensions: (opentype: "otf", truetype: "ttf");
|
5
|
-
$value: map-get($font-extensions, $format);
|
6
|
-
@if $value {
|
7
|
-
@return $value;
|
8
|
-
}
|
9
|
-
@else {
|
10
|
-
@return $format;
|
11
|
-
}
|
12
|
-
}
|
13
|
-
|
14
|
-
@function font-sources($filename, $formats: ()) {
|
15
|
-
$urls: ();
|
16
|
-
@each $f in list.join((woff2 woff), $formats) {
|
17
|
-
$urls: list.append(
|
18
|
-
$urls,
|
19
|
-
url("#{$filename}.#{font-extension($f)}") format("#{$f}")
|
20
|
-
);
|
21
|
-
}
|
22
|
-
@return list.join($urls, (), comma);
|
23
|
-
}
|
24
|
-
|
25
|
-
@mixin font-face($name, $filename, $weight: 400, $style: normal, $formats: ()) {
|
26
|
-
@font-face {
|
27
|
-
font-family: $name;
|
28
|
-
font-style: $style;
|
29
|
-
font-weight: $weight;
|
30
|
-
src: font-sources($filename, $formats);
|
31
|
-
}
|
32
|
-
}
|
@@ -1,168 +0,0 @@
|
|
1
|
-
@use "sass:math";
|
2
|
-
|
3
|
-
// ---- Defaults --------------------------------------------------------------
|
4
|
-
|
5
|
-
$base-font-size: 16px !default;
|
6
|
-
|
7
|
-
$grids : (default: (column-count: 12,
|
8
|
-
column: 94px,
|
9
|
-
gutter: 24px,
|
10
|
-
padding: 24px),
|
11
|
-
mobile: (column-count: 4,
|
12
|
-
column: 60px,
|
13
|
-
gutter: 16px,
|
14
|
-
padding: 16px)) !default;
|
15
|
-
|
16
|
-
$spacings: (1: 12px,
|
17
|
-
2: 24px,
|
18
|
-
4: 40px,
|
19
|
-
8: 80px) !default;
|
20
|
-
|
21
|
-
// Uncomment to limit full width
|
22
|
-
// $limit-width: 1600px !default;
|
23
|
-
|
24
|
-
|
25
|
-
// ---- Grid and sizing -------------------------------------------------------
|
26
|
-
|
27
|
-
@function grid-value($grid, $name) {
|
28
|
-
@return map-get(map-get($grids, $grid), $name);
|
29
|
-
}
|
30
|
-
|
31
|
-
// Inner width: Size of $grid in px, excluding outer padding
|
32
|
-
@function inner-width($grid: default) {
|
33
|
-
@return (grid-value($grid, column-count) * grid-value($grid, column)) +
|
34
|
-
((grid-value($grid, column-count) - 1) * grid-value($grid, gutter));
|
35
|
-
}
|
36
|
-
|
37
|
-
// Full width in px including padding
|
38
|
-
@function full-width($grid: default) {
|
39
|
-
@return inner-width($grid) + (grid-value($grid, padding) * 2);
|
40
|
-
}
|
41
|
-
|
42
|
-
@function px-to-percent($size, $grid: default) {
|
43
|
-
@return percentage(math.div($size, full-width($grid)));
|
44
|
-
}
|
45
|
-
|
46
|
-
@function px-to-vw($size, $grid: default) {
|
47
|
-
@return (math.div($size, full-width($grid)) * 100) * 1vw;
|
48
|
-
}
|
49
|
-
|
50
|
-
@function relative-size($size-px, $container: 100%, $grid: default) {
|
51
|
-
@if unit($container) == '%' {
|
52
|
-
$container: (inner-width($grid) * math.div($container, 100%));
|
53
|
-
}
|
54
|
-
@if (unit($container) != "px") {
|
55
|
-
$container: columns-px($container, $grid: $grid);
|
56
|
-
}
|
57
|
-
@return percentage(math.div($size-px, $container));
|
58
|
-
}
|
59
|
-
|
60
|
-
@function rem-calc($value, $grid: default) {
|
61
|
-
@if unit($value) == "rem" {
|
62
|
-
@return $value;
|
63
|
-
}
|
64
|
-
|
65
|
-
// Assume px for values without units
|
66
|
-
@if unit($value) == "" {
|
67
|
-
$value: $value * 1px;
|
68
|
-
}
|
69
|
-
|
70
|
-
// Convert percentage to px
|
71
|
-
@if unit($value) == "%" {
|
72
|
-
$value: full-width($grid) * math.div($value, 100%);
|
73
|
-
}
|
74
|
-
|
75
|
-
@return math.div($value, $base-font-size) * 1rem;
|
76
|
-
}
|
77
|
-
|
78
|
-
@function spacing($key) {
|
79
|
-
@return rem-calc(map-get($spacings, $key));
|
80
|
-
}
|
81
|
-
|
82
|
-
// Width of gutter in px
|
83
|
-
@function gutter-px($grid: default) {
|
84
|
-
@return grid-value($grid, gutter);
|
85
|
-
}
|
86
|
-
|
87
|
-
// Width of $n columns in px
|
88
|
-
@function columns-px($n: 1, $grid: default) {
|
89
|
-
@return grid-value($grid, column) * $n + ((ceil($n) - 1) * gutter-px($grid));
|
90
|
-
}
|
91
|
-
|
92
|
-
// Gutter width, optionally relative to size of $container
|
93
|
-
@function gutter($container: 100%, $grid: default) {
|
94
|
-
@return relative-size(gutter-px($grid: $grid), $container, $grid: $grid);
|
95
|
-
}
|
96
|
-
|
97
|
-
// Width of $n columns as a percentage of $container.
|
98
|
-
@function columns($n: 1, $container: 100%, $grid: default) {
|
99
|
-
@return relative-size(columns-px($n, $grid: $grid), $container, $grid: $grid);
|
100
|
-
}
|
101
|
-
|
102
|
-
// Equal to columns($n) + gutter()
|
103
|
-
@function columns-and-gutter($n: 1, $container: 100%, $grid: default) {
|
104
|
-
@return columns($n, $container, $grid) + gutter($container, $grid);
|
105
|
-
}
|
106
|
-
|
107
|
-
@function grid-adjust($size, $columns: $total-columns, $grid: default) {
|
108
|
-
@return math.div($sizem math.div(columns($columns, $grid: $grid), 100%));
|
109
|
-
}
|
110
|
-
|
111
|
-
@function outer-padding($grid: default) {
|
112
|
-
@return px-to-percent(grid-value($grid, padding), $grid: $grid);
|
113
|
-
}
|
114
|
-
|
115
|
-
@function limit-width-scale($value) {
|
116
|
-
@return $value * math.div($limit-width, full-width());
|
117
|
-
}
|
118
|
-
|
119
|
-
|
120
|
-
// ---- Styles ----------------------------------------------------------------
|
121
|
-
|
122
|
-
@mixin mobile-full {
|
123
|
-
@include mobile {
|
124
|
-
width: 100%;
|
125
|
-
margin-left: 0px;
|
126
|
-
margin-right: 0px;
|
127
|
-
float: none;
|
128
|
-
@content;
|
129
|
-
}
|
130
|
-
}
|
131
|
-
|
132
|
-
@mixin mobile-offset {
|
133
|
-
@include mobile {
|
134
|
-
$offset: px-to-percent(grid-value(mobile, padding), $grid: mobile);
|
135
|
-
|
136
|
-
width: 100% + $offset;
|
137
|
-
margin-left: 0 - math.div($offset, 2);
|
138
|
-
margin-right: 0 - math.div($offset, 2);
|
139
|
-
}
|
140
|
-
}
|
141
|
-
|
142
|
-
@mixin grid-container-inner {
|
143
|
-
margin: 0px auto;
|
144
|
-
@if variable-exists(limit-width) {
|
145
|
-
@include breakpoint($min: rem-calc($limit-width)) {
|
146
|
-
max-width: rem-calc(limit-width-scale(inner-width()));
|
147
|
-
}
|
148
|
-
}
|
149
|
-
}
|
150
|
-
|
151
|
-
@mixin grid-container {
|
152
|
-
padding-left: outer-padding();
|
153
|
-
padding-right: outer-padding();
|
154
|
-
|
155
|
-
@include mobile {
|
156
|
-
padding-left: outer-padding(mobile);
|
157
|
-
padding-right: outer-padding(mobile);
|
158
|
-
}
|
159
|
-
|
160
|
-
@media print {
|
161
|
-
padding-left: 0px;
|
162
|
-
padding-right: 0px;
|
163
|
-
}
|
164
|
-
|
165
|
-
.inner {
|
166
|
-
@include grid-container-inner;
|
167
|
-
}
|
168
|
-
}
|
data/lib/rails/generators/pages_core/frontend/templates/stylesheets/framework/grid_overlay.scss
DELETED
@@ -1,44 +0,0 @@
|
|
1
|
-
$grid-overlay-color: rgba(255, 0, 255, 0.05) !default;
|
2
|
-
|
3
|
-
@function grid-background($grid: default) {
|
4
|
-
$gradient: ();
|
5
|
-
@for $i from 1 to grid-value($grid, column-count) {
|
6
|
-
$gradient: join($gradient,
|
7
|
-
($grid-overlay-color columns($i, $grid: $grid),
|
8
|
-
transparent columns($i, $grid: $grid),
|
9
|
-
transparent columns-and-gutter($i, $grid: $grid),
|
10
|
-
$grid-overlay-color (columns-and-gutter($i, $grid: $grid))),
|
11
|
-
comma);
|
12
|
-
}
|
13
|
-
@return linear-gradient(to right, #{$gradient});
|
14
|
-
}
|
15
|
-
|
16
|
-
.grid-overlay {
|
17
|
-
position: fixed;
|
18
|
-
z-index: 9000;
|
19
|
-
top: 0px;
|
20
|
-
left: 0px;
|
21
|
-
width: 100%;
|
22
|
-
height: 100%;
|
23
|
-
background-image: grid-background(default);
|
24
|
-
background-size: px-to-percent(inner-width(default)) 100%;
|
25
|
-
background-repeat: no-repeat;
|
26
|
-
background-position: 50% 50%;
|
27
|
-
pointer-events: none;
|
28
|
-
display: none;
|
29
|
-
|
30
|
-
@if variable-exists(limit-width) {
|
31
|
-
@include breakpoint($min: rem-calc($limit-width)) {
|
32
|
-
background-size: rem-calc(limit-width-scale(inner-width())) 100%;
|
33
|
-
}
|
34
|
-
}
|
35
|
-
|
36
|
-
@include mobile {
|
37
|
-
background-image: grid-background(mobile);
|
38
|
-
background-size: px-to-percent(inner-width(mobile), $grid: mobile) 100%;
|
39
|
-
}
|
40
|
-
|
41
|
-
&--active {
|
42
|
-
display: block;
|
43
|
-
}
|
44
|
-
}
|
@@ -1,90 +0,0 @@
|
|
1
|
-
$font-sans: 'Helvetica', sans-serif;
|
2
|
-
|
3
|
-
// ---- Mixins ----------------------------------------------------------------
|
4
|
-
|
5
|
-
@mixin child-margins {
|
6
|
-
&:first-child {
|
7
|
-
margin-top: 0px;
|
8
|
-
}
|
9
|
-
&:last-child {
|
10
|
-
margin-bottom: 0px;
|
11
|
-
}
|
12
|
-
}
|
13
|
-
|
14
|
-
|
15
|
-
// ---- Definitions -----------------------------------------------------------
|
16
|
-
|
17
|
-
%text-larger { font: normal 72px/1.00 $font-sans; }
|
18
|
-
%text-large { font: normal 54px/1.04 $font-sans; }
|
19
|
-
%text-medium { font: normal 24px/1.25 $font-sans; }
|
20
|
-
%text-normal { font: normal 16px/1.50 $font-sans; }
|
21
|
-
%text-small { font: normal 14px/1.5 $font-sans; }
|
22
|
-
|
23
|
-
@include mobile {
|
24
|
-
%text-large { font: normal 32px/1.13 $font-sans; }
|
25
|
-
%text-medium { font: normal 22px/1.27 $font-sans; }
|
26
|
-
%text-normal { font: normal 16px/1.31 $font-sans; }
|
27
|
-
%text-small-mobile,
|
28
|
-
%text-small { font: normal 13px/1.31 $font-sans; }
|
29
|
-
}
|
30
|
-
|
31
|
-
|
32
|
-
// ---- Rules -----------------------------------------------------------------
|
33
|
-
|
34
|
-
body {
|
35
|
-
@extend %text-normal;
|
36
|
-
}
|
37
|
-
|
38
|
-
h1, h2, h3, h4, h5, h6, ul, ol, p {
|
39
|
-
margin: 0px 0px spacing(2) 0px;
|
40
|
-
&:last-child {
|
41
|
-
margin-bottom: 0px;
|
42
|
-
}
|
43
|
-
}
|
44
|
-
|
45
|
-
h1 {
|
46
|
-
@extend %text-larger;
|
47
|
-
}
|
48
|
-
|
49
|
-
h2 {
|
50
|
-
@extend %text-large;
|
51
|
-
margin-top: spacing(10);
|
52
|
-
margin-bottom: spacing(10);
|
53
|
-
@include mobile {
|
54
|
-
margin-top: spacing(5);
|
55
|
-
margin-bottom: spacing(5);
|
56
|
-
}
|
57
|
-
@include child-margins;
|
58
|
-
}
|
59
|
-
|
60
|
-
h3 {
|
61
|
-
@extend %text-medium;
|
62
|
-
margin-top: spacing(5);
|
63
|
-
margin-bottom: spacing(5);
|
64
|
-
@include child-margins;
|
65
|
-
}
|
66
|
-
|
67
|
-
h4 {
|
68
|
-
font: inherit;
|
69
|
-
margin-top: spacing(5);
|
70
|
-
margin-bottom: 0px;
|
71
|
-
@include child-margins;
|
72
|
-
}
|
73
|
-
|
74
|
-
a, a:visited {
|
75
|
-
text-decoration: underline;
|
76
|
-
}
|
77
|
-
|
78
|
-
h1, h2, h3 {
|
79
|
-
a, a:visited {
|
80
|
-
text-decoration: none;
|
81
|
-
}
|
82
|
-
a:hover, a:focus {
|
83
|
-
text-decoration: underline;
|
84
|
-
}
|
85
|
-
}
|
86
|
-
|
87
|
-
figcaption {
|
88
|
-
@extend %text-small;
|
89
|
-
margin-top: spacing(2);
|
90
|
-
}
|