mirror of
https://github.com/a2nt/silverstripe-webpack.git
synced 2024-10-22 17:05:31 +02:00
Minor updates
This commit is contained in:
parent
e828bfa1db
commit
7443525e6f
0
app/client/src/img/.gitkeep
Normal file
0
app/client/src/img/.gitkeep
Normal file
Binary file not shown.
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
Before Width: | Height: | Size: 946 B |
Binary file not shown.
Before Width: | Height: | Size: 5.1 KiB |
35
app/client/src/scss/_components/_ui.bootstrap.scss
Normal file
35
app/client/src/scss/_components/_ui.bootstrap.scss
Normal file
@ -0,0 +1,35 @@
|
||||
// Bootstrap
|
||||
@import "~bootstrap/scss/root";
|
||||
@import "~bootstrap/scss/reboot";
|
||||
@import "~bootstrap/scss/type";
|
||||
@import "~bootstrap/scss/images";
|
||||
@import "~bootstrap/scss/code";
|
||||
@import "~bootstrap/scss/grid";
|
||||
@import "~bootstrap/scss/tables";
|
||||
@import "~bootstrap/scss/forms";
|
||||
@import "~bootstrap/scss/buttons";
|
||||
@import "~bootstrap/scss/transitions";
|
||||
@import "~bootstrap/scss/dropdown";
|
||||
@import "~bootstrap/scss/button-group";
|
||||
@import "~bootstrap/scss/input-group";
|
||||
@import "~bootstrap/scss/custom-forms";
|
||||
@import "~bootstrap/scss/nav";
|
||||
@import "~bootstrap/scss/navbar";
|
||||
@import "~bootstrap/scss/card";
|
||||
@import "~bootstrap/scss/breadcrumb";
|
||||
@import "~bootstrap/scss/pagination";
|
||||
@import "~bootstrap/scss/badge";
|
||||
@import "~bootstrap/scss/jumbotron";
|
||||
@import "~bootstrap/scss/alert";
|
||||
@import "~bootstrap/scss/progress";
|
||||
@import "~bootstrap/scss/media";
|
||||
@import "~bootstrap/scss/list-group";
|
||||
@import "~bootstrap/scss/close";
|
||||
@import "~bootstrap/scss/modal";
|
||||
@import "~bootstrap/scss/tooltip";
|
||||
@import "~bootstrap/scss/popover";
|
||||
@import "~bootstrap/scss/carousel";
|
||||
@import "~bootstrap/scss/utilities";
|
||||
@import "~bootstrap/scss/print";
|
||||
|
||||
@import "_ui.carousel";
|
@ -1,19 +1,24 @@
|
||||
/*
|
||||
* Bootstrap carousel improvement
|
||||
*/
|
||||
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
z-index: 2;
|
||||
font-size: 3rem;
|
||||
text-shadow: 1px 1px #000;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
z-index: 2;
|
||||
font-size: 3rem;
|
||||
text-shadow: 1px 1px #000;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-indicators li {
|
||||
box-shadow: 1px 1px #000;
|
||||
box-shadow: 1px 1px #000;
|
||||
}
|
||||
|
||||
.carousel-title,
|
||||
.carousel-content {
|
||||
text-shadow: 1px 1px #000;
|
||||
}
|
||||
text-shadow: 1px 1px #000;
|
||||
}
|
||||
|
28
app/client/src/scss/_components/_ui.elemental.scss
Normal file
28
app/client/src/scss/_components/_ui.elemental.scss
Normal file
@ -0,0 +1,28 @@
|
||||
/*
|
||||
* Basic styles for silverstripe-elemental
|
||||
*/
|
||||
|
||||
// hide default page title cuz elemental object will be used to display titles
|
||||
h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// add top/bottom paddings for basic elements
|
||||
.page-content > .element {
|
||||
position: relative;
|
||||
padding: ($grid-gutter-height / 2) 0;
|
||||
|
||||
// remove paddings of the slideshow
|
||||
&.dynamic__elements__image__elements__elementimage,
|
||||
&.dynamic__elements__flexslider__elements__elementslideshow {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// remove container paddings for the slideshow
|
||||
.dynamic__elements__image__elements__elementimage,
|
||||
.dynamic__elements__flexslider__elements__elementslideshow {
|
||||
.container-fluid {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
3
app/client/src/scss/_components/_ui.fontawesome.scss
Normal file
3
app/client/src/scss/_components/_ui.fontawesome.scss
Normal file
@ -0,0 +1,3 @@
|
||||
$fa-font-path: "~font-awesome/fonts";
|
||||
|
||||
@import "~font-awesome/scss/font-awesome";
|
5
app/client/src/scss/_components/_ui.lightbox.scss
Normal file
5
app/client/src/scss/_components/_ui.lightbox.scss
Normal file
@ -0,0 +1,5 @@
|
||||
$lightbox-breakpoint: map-get($grid-breakpoints, "sm");
|
||||
$lightbox-link-hover-color: $link-hover-color;
|
||||
|
||||
@import "~meta-lightbox/scss/meta-lightbox";
|
||||
@import "~meta-lightbox/scss/meta-lightbox-theme";
|
63
app/client/src/scss/_components/_ui.main.scss
Normal file
63
app/client/src/scss/_components/_ui.main.scss
Normal file
@ -0,0 +1,63 @@
|
||||
/*
|
||||
* some basic styles
|
||||
*/
|
||||
|
||||
// don't let images be wider than the parent layer
|
||||
iframe,
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
opacity: .8;
|
||||
|
||||
.fas,
|
||||
.fab,
|
||||
&.fas,
|
||||
&.fab {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
// transactions
|
||||
.transition,
|
||||
a, a img,
|
||||
a .fas, a .fab,
|
||||
a.fas, a.fab,
|
||||
button, input, optgroup, select, textarea,
|
||||
.btn,
|
||||
.alert,
|
||||
.dropdown,
|
||||
[data-target],
|
||||
.container,
|
||||
.container-fluid,
|
||||
.row,
|
||||
[class="col-*"] {
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
// stick navbar to top using mobile layout
|
||||
#Header {
|
||||
position: relative;
|
||||
padding-top: $grid-gutter-height / 2;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
@media (min-width: map-get($grid-breakpoints, "lg")) {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#Navigation {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
|
||||
@media (min-width: map-get($grid-breakpoints, "lg")) {
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
@ -1,141 +1,13 @@
|
||||
// Your custom variables
|
||||
@import "_variables";
|
||||
|
||||
// Bootstrap
|
||||
@import "~bootstrap/scss/root";
|
||||
@import "~bootstrap/scss/reboot";
|
||||
@import "~bootstrap/scss/type";
|
||||
@import "~bootstrap/scss/images";
|
||||
@import "~bootstrap/scss/code";
|
||||
@import "~bootstrap/scss/grid";
|
||||
@import "~bootstrap/scss/tables";
|
||||
@import "~bootstrap/scss/forms";
|
||||
@import "~bootstrap/scss/buttons";
|
||||
@import "~bootstrap/scss/transitions";
|
||||
@import "~bootstrap/scss/dropdown";
|
||||
@import "~bootstrap/scss/button-group";
|
||||
@import "~bootstrap/scss/input-group";
|
||||
@import "~bootstrap/scss/custom-forms";
|
||||
@import "~bootstrap/scss/nav";
|
||||
@import "~bootstrap/scss/navbar";
|
||||
@import "~bootstrap/scss/card";
|
||||
@import "~bootstrap/scss/breadcrumb";
|
||||
@import "~bootstrap/scss/pagination";
|
||||
@import "~bootstrap/scss/badge";
|
||||
@import "~bootstrap/scss/jumbotron";
|
||||
@import "~bootstrap/scss/alert";
|
||||
@import "~bootstrap/scss/progress";
|
||||
@import "~bootstrap/scss/media";
|
||||
@import "~bootstrap/scss/list-group";
|
||||
@import "~bootstrap/scss/close";
|
||||
@import "~bootstrap/scss/modal";
|
||||
@import "~bootstrap/scss/tooltip";
|
||||
@import "~bootstrap/scss/popover";
|
||||
@import "~bootstrap/scss/carousel";
|
||||
@import "~bootstrap/scss/utilities";
|
||||
@import "~bootstrap/scss/print";
|
||||
@import "_components/_ui.bootstrap";
|
||||
@import "_components/_ui.fontawesome";
|
||||
@import "_components/_ui.lightbox";
|
||||
|
||||
// Fontawesome
|
||||
$fa-font-path: "~font-awesome/fonts";
|
||||
@import "_components/_ui.main";
|
||||
@import "_components/_ui.elemental";
|
||||
|
||||
@import "~font-awesome/scss/font-awesome";
|
||||
|
||||
// Extra modules
|
||||
$lightbox-breakpoint: map-get($grid-breakpoints, "sm");
|
||||
$lightbox-link-hover-color: $link-hover-color;
|
||||
|
||||
@import "~meta-lightbox/scss/meta-lightbox";
|
||||
@import "~meta-lightbox/scss/meta-lightbox-theme";
|
||||
@import "_components/ui.carousel";
|
||||
|
||||
/*
|
||||
* some basic styles
|
||||
*/
|
||||
|
||||
// hide default page title cuz elemental object will be used to display titles
|
||||
h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// don't let images be wider than the parent layer
|
||||
iframe,
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
opacity: .8;
|
||||
|
||||
.fas,
|
||||
.fab,
|
||||
&.fas,
|
||||
&.fab {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
// transactions
|
||||
.transition,
|
||||
a, a img,
|
||||
a .fas, a .fab,
|
||||
a.fas, a.fab,
|
||||
button, input, optgroup, select, textarea,
|
||||
.btn,
|
||||
.alert,
|
||||
.dropdown,
|
||||
[data-target],
|
||||
.container,
|
||||
.container-fluid,
|
||||
.row,
|
||||
[class="col-*"] {
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
// stick navbar to top using mobile layout
|
||||
#Header {
|
||||
position: relative;
|
||||
padding-top: $grid-gutter-height / 2;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
@media (min-width: map-get($grid-breakpoints, "lg")) {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#Navigation {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: map-get($grid-breakpoints, "lg")) {
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// add top/bottom paddings for basic elements
|
||||
.page-content > .element {
|
||||
position: relative;
|
||||
padding: ($grid-gutter-height / 2) 0;
|
||||
|
||||
// remove paddings of the slideshow
|
||||
&.dynamic__elements__image__elements__elementimage,
|
||||
&.dynamic__elements__flexslider__elements__elementslideshow {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// remove container paddings for the slideshow
|
||||
.dynamic__elements__image__elements__elementimage,
|
||||
.dynamic__elements__flexslider__elements__elementslideshow {
|
||||
.container-fluid {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Your custom UI
|
||||
// Your custom styling
|
||||
@import "_typography";
|
||||
@import "_layout";
|
||||
|
@ -1,5 +1,5 @@
|
||||
<% if $SlideShow %>
|
||||
<div id="Carousel{$ID}" class="carousel slide js-carousel" data-indicators="true" data-arrows="true">
|
||||
<div id="Carousel{$ID}" class="carousel slide js-carousel d-none d-sm-block" data-indicators="true" data-arrows="true">
|
||||
<div class="carousel-inner">
|
||||
<% loop $SlideShow %>
|
||||
<div class="carousel-item<% if $First %> active<% end_if %>">
|
||||
|
17
package.json
17
package.json
@ -17,10 +17,10 @@
|
||||
"dash": "cross-env NODE_ENV=development webpack-dashboard -- webpack-dev-server --config webpack.config.dev.js",
|
||||
"prebuild": "rimraf build",
|
||||
"build": "cross-env NODE_ENV=production webpack -p --config webpack.config.prod.js --progress",
|
||||
"lint:check": "eslint ./site/src --config .eslintrc && sass-lint ./site/src --config .sasslintrc -v -q",
|
||||
"lint:fix": "eslint ./site/src --config .eslintrc --fix && sass-lint ./site/src --config .sasslintrc -v -q --fix",
|
||||
"lint:js": "eslint ./site/src --config .eslintrc",
|
||||
"lint:sass": "sass-lint ./site/src --config .sasslintrc -v -q"
|
||||
"lint:check": "eslint ./app/client/src --config .eslintrc && sass-lint ./app/client/src --config .sasslintrc -v -q",
|
||||
"lint:fix": "eslint ./app/client/src --config .eslintrc --fix && sass-lint ./app/client/src --config .sasslintrc -v -q --fix",
|
||||
"lint:js": "eslint ./app/client/src --config .eslintrc",
|
||||
"lint:sass": "sass-lint ./app/client/src --config .sasslintrc -v -q"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootbox": "^4.4.0",
|
||||
@ -97,8 +97,7 @@
|
||||
"block-no-empty": null,
|
||||
"color-no-invalid-hex": true,
|
||||
"comment-empty-line-before": [
|
||||
"always",
|
||||
{
|
||||
"always", {
|
||||
"ignore": [
|
||||
"stylelint-commands",
|
||||
"after-comment"
|
||||
@ -107,8 +106,7 @@
|
||||
],
|
||||
"declaration-colon-space-after": "always",
|
||||
"indentation": [
|
||||
4,
|
||||
{
|
||||
4, {
|
||||
"except": [
|
||||
"value"
|
||||
]
|
||||
@ -116,8 +114,7 @@
|
||||
],
|
||||
"max-empty-lines": 2,
|
||||
"rule-empty-line-before": [
|
||||
"always",
|
||||
{
|
||||
"always", {
|
||||
"except": [
|
||||
"first-nested"
|
||||
],
|
||||
|
Loading…
Reference in New Issue
Block a user