mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-24 08:51:25 -05:00
Compare commits
3 commits
f1a4c41e91
...
826339a610
Author | SHA1 | Date | |
---|---|---|---|
|
826339a610 | ||
|
18cbaa338e | ||
|
64f59928aa |
13 changed files with 1234 additions and 733 deletions
|
@ -14,7 +14,7 @@ class Blog extends DashboardModel
|
||||||
|
|
||||||
public static $dashboard_type = 'edit';
|
public static $dashboard_type = 'edit';
|
||||||
|
|
||||||
public static $dashboard_display = [ 'title', 'created_at' ];
|
public static $dashboard_display = [ 'header-image', 'title', 'created_at' ];
|
||||||
|
|
||||||
public static $dashboard_columns = [
|
public static $dashboard_columns = [
|
||||||
[ 'name' => 'user_id', 'type' => 'user' ],
|
[ 'name' => 'user_id', 'type' => 'user' ],
|
||||||
|
|
939
composer.lock
generated
939
composer.lock
generated
File diff suppressed because it is too large
Load diff
848
package-lock.json
generated
848
package-lock.json
generated
File diff suppressed because it is too large
Load diff
17
package.json
17
package.json
|
@ -8,9 +8,9 @@
|
||||||
"browser-sync": "3.0.2"
|
"browser-sync": "3.0.2"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/core": "7.24.7",
|
"@babel/core": "7.24.9",
|
||||||
"@babel/preset-env": "7.24.7",
|
"@babel/preset-env": "7.24.8",
|
||||||
"@fortawesome/fontawesome-free": "6.5.2",
|
"@fortawesome/fontawesome-free": "6.6.0",
|
||||||
"autonumeric": "4.10.5",
|
"autonumeric": "4.10.5",
|
||||||
"autoprefixer": "10.4.19",
|
"autoprefixer": "10.4.19",
|
||||||
"axios": "1.7.2",
|
"axios": "1.7.2",
|
||||||
|
@ -29,20 +29,21 @@
|
||||||
"gulp-sass-glob": "1.1.0",
|
"gulp-sass-glob": "1.1.0",
|
||||||
"gulp-strip-debug": "4.0.0",
|
"gulp-strip-debug": "4.0.0",
|
||||||
"gulp-uglify-es": "3.0.0",
|
"gulp-uglify-es": "3.0.0",
|
||||||
"gulp5-sass-plugin": "^1.0.0",
|
"gulp5-sass-plugin": "^2.0.0",
|
||||||
"jquery": "3.7.1",
|
"jquery": "3.7.1",
|
||||||
"list.js": "2.3.1",
|
"list.js": "2.3.1",
|
||||||
"minimist": "1.2.8",
|
"minimist": "1.2.8",
|
||||||
"ordered-read-streams": "^2.0.0",
|
"ordered-read-streams": "^2.0.0",
|
||||||
"postcss": "8.4.38",
|
"postcss": "8.4.40",
|
||||||
|
"sass": "^1.77.8",
|
||||||
"sortablejs": "1.15.2",
|
"sortablejs": "1.15.2",
|
||||||
"spinkit": "2.0.1",
|
"spinkit": "2.0.1",
|
||||||
"terser-webpack-plugin": "5.3.10",
|
"terser-webpack-plugin": "5.3.10",
|
||||||
"vue": "3.4.27",
|
"vue": "3.4.34",
|
||||||
"vue-loader": "17.4.2",
|
"vue-loader": "17.4.2",
|
||||||
"vue-router": "4.3.3",
|
"vue-router": "4.4.0",
|
||||||
"vuex": "4.1.0",
|
"vuex": "4.1.0",
|
||||||
"webpack": "5.91.0",
|
"webpack": "5.93.0",
|
||||||
"what-input": "5.2.12"
|
"what-input": "5.2.12"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
// Sass modules
|
// Sass modules
|
||||||
|
@use "sass:color";
|
||||||
@use "sass:math";
|
@use "sass:math";
|
||||||
|
|
||||||
// Base font size
|
// Base font size
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
// Sass modules
|
// Sass modules
|
||||||
|
@use "sass:color";
|
||||||
@use "sass:math";
|
@use "sass:math";
|
||||||
|
|
||||||
// Base font size
|
// Base font size
|
||||||
|
@ -24,9 +25,9 @@ $enable-smooth-scroll: false;
|
||||||
|
|
||||||
// Colours
|
// Colours
|
||||||
$c-text: #111; // text
|
$c-text: #111; // text
|
||||||
$c-text-inactive: fade-out($c-text, 0.25); // inactive text
|
$c-text-inactive: color.adjust($c-text, $alpha: -0.25); // inactive text
|
||||||
$c-text-light: #fff; // light text
|
$c-text-light: #fff; // light text
|
||||||
$c-text-light-inactive: fade-out($c-text-light, 0.25); // inactive light text
|
$c-text-light-inactive: color.adjust($c-text-light, $alpha: -0.25); // inactive light text
|
||||||
$c-input-bg: #fff; // white
|
$c-input-bg: #fff; // white
|
||||||
$c-dashboard-error: #a80000;
|
$c-dashboard-error: #a80000;
|
||||||
$c-dashboard-dark: #111;
|
$c-dashboard-dark: #111;
|
||||||
|
@ -201,7 +202,7 @@ body {
|
||||||
@include media-breakpoint-down(lg) {
|
@include media-breakpoint-down(lg) {
|
||||||
padding-right: pxrem(8);
|
padding-right: pxrem(8);
|
||||||
padding-left: pxrem(8);
|
padding-left: pxrem(8);
|
||||||
background-color: darken($c-dashboard-dark, 2%);
|
background-color: color.adjust($c-dashboard-dark, $lightness: -2%);
|
||||||
color: $c-text-light-inactive;
|
color: $c-text-light-inactive;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -215,13 +216,13 @@ body {
|
||||||
|
|
||||||
&:hover, &:focus {
|
&:hover, &:focus {
|
||||||
@include media-breakpoint-up(lg) {
|
@include media-breakpoint-up(lg) {
|
||||||
background-color: fade-out(#000, 0.97);
|
background-color: color.adjust(#000, $alpha: -0.97);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
@include media-breakpoint-up(lg) {
|
@include media-breakpoint-up(lg) {
|
||||||
background-color: fade-out(#000, 0.93);
|
background-color: color.adjust(#000, $alpha: -0.93);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -258,9 +259,9 @@ body {
|
||||||
@include font-sans-bold;
|
@include font-sans-bold;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: pxrem(9) pxrem(15);
|
padding: pxrem(9) pxrem(15);
|
||||||
border-top: 1px solid darken($c-dashboard-dark, 5%);
|
border-top: 1px solid color.adjust($c-dashboard-dark, $lightness: -5%);
|
||||||
border-right: 1px solid darken($c-dashboard-dark, 5%);
|
border-right: 1px solid color.adjust($c-dashboard-dark, $lightness: -5%);
|
||||||
border-left: 1px solid darken($c-dashboard-dark, 5%);
|
border-left: 1px solid color.adjust($c-dashboard-dark, $lightness: -5%);
|
||||||
background-color: $c-dashboard-dark;
|
background-color: $c-dashboard-dark;
|
||||||
color: $c-dashboard-light;
|
color: $c-dashboard-light;
|
||||||
font-size: pxrem(14);
|
font-size: pxrem(14);
|
||||||
|
@ -287,7 +288,7 @@ body {
|
||||||
|
|
||||||
.card-body {
|
.card-body {
|
||||||
padding: pxrem(15);
|
padding: pxrem(15);
|
||||||
background-color: lighten($c-dashboard-light, 1%);
|
background-color: color.adjust($c-dashboard-light, $lightness: 1%);
|
||||||
|
|
||||||
&.dashboard {
|
&.dashboard {
|
||||||
@include media-breakpoint-down(md) {
|
@include media-breakpoint-down(md) {
|
||||||
|
@ -312,7 +313,7 @@ body {
|
||||||
margin-top: pxrem(2);
|
margin-top: pxrem(2);
|
||||||
margin-left: pxrem(10);
|
margin-left: pxrem(10);
|
||||||
height: pxrem(32);
|
height: pxrem(32);
|
||||||
border: 1px solid fade-out($c-text, 0.75);
|
border: 1px solid color.adjust($c-text, $alpha: -0.75);
|
||||||
border-radius: pxrem(4);
|
border-radius: pxrem(4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -321,7 +322,7 @@ body {
|
||||||
margin-bottom: pxrem(10);
|
margin-bottom: pxrem(10);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: pxrem(3) pxrem(8);
|
padding: pxrem(3) pxrem(8);
|
||||||
border: 1px solid fade-out(#000, 0.875);
|
border: 1px solid color.adjust(#000, $alpha: -0.875);
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
|
|
||||||
@include media-breakpoint-down(md) {
|
@include media-breakpoint-down(md) {
|
||||||
|
@ -334,7 +335,7 @@ body {
|
||||||
margin-top: pxrem(10);
|
margin-top: pxrem(10);
|
||||||
margin-bottom: pxrem(10);
|
margin-bottom: pxrem(10);
|
||||||
padding: pxrem(5) pxrem(10);
|
padding: pxrem(5) pxrem(10);
|
||||||
border: 1px solid darken($c-dashboard-dark, 5%);
|
border: 1px solid color.adjust($c-dashboard-dark, $lightness: -5%);
|
||||||
border-radius: pxrem(5);
|
border-radius: pxrem(5);
|
||||||
background-color: $c-dashboard-dark;
|
background-color: $c-dashboard-dark;
|
||||||
color: $c-text-light;
|
color: $c-text-light;
|
||||||
|
@ -362,7 +363,7 @@ body {
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: $c-dashboard-dark;
|
border-color: $c-dashboard-dark;
|
||||||
box-shadow: inset 0 pxrem(1) pxrem(1) fade-out(#000, 0.925), 0 0 pxrem(8) fade-out($c-dashboard-dark, 0.4);
|
box-shadow: inset 0 pxrem(1) pxrem(1) color.adjust(#000, $alpha: -0.925), 0 0 pxrem(8) color.adjust($c-dashboard-dark, $alpha: -0.4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -389,7 +390,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
border: 1px solid lighten($c-text, 50%);
|
border: 1px solid color.adjust($c-text, $lightness: 50%);
|
||||||
border-radius: pxrem(4);
|
border-radius: pxrem(4);
|
||||||
background-color: $c-input-bg;
|
background-color: $c-input-bg;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
@ -458,18 +459,18 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
border-color: darken($c-dashboard-dark, 5%);
|
border-color: color.adjust($c-dashboard-dark, $lightness: -5%);
|
||||||
background-color: $c-dashboard-dark;
|
background-color: $c-dashboard-dark;
|
||||||
color: $c-text-light;
|
color: $c-text-light;
|
||||||
font-size: pxrem(14);
|
font-size: pxrem(14);
|
||||||
transition: background-color 100ms;
|
transition: background-color 100ms;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: darken($c-dashboard-dark, 5%);
|
background-color: color.adjust($c-dashboard-dark, $lightness: -5%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
background-color: lighten($c-dashboard-dark, 5%);
|
background-color: color.adjust($c-dashboard-dark, $lightness: 5%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&, &:hover, &:focus {
|
&, &:hover, &:focus {
|
||||||
|
@ -488,42 +489,42 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn-warning {
|
&.btn-warning {
|
||||||
border-color: darken($c-dashboard-edit, 10%);
|
border-color: color.adjust($c-dashboard-edit, $lightness: -10%);
|
||||||
background-color: $c-dashboard-edit;
|
background-color: $c-dashboard-edit;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: darken($c-dashboard-edit, 5%);
|
background-color: color.adjust($c-dashboard-edit, $lightness: -5%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
background-color: lighten($c-dashboard-edit, 5%);
|
background-color: color.adjust($c-dashboard-edit, $lightness: 5%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn-danger {
|
&.btn-danger {
|
||||||
border-color: darken($c-dashboard-delete, 10%);
|
border-color: color.adjust($c-dashboard-delete, $lightness: -10%);
|
||||||
background-color: $c-dashboard-delete;
|
background-color: $c-dashboard-delete;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: darken($c-dashboard-delete, 5%);
|
background-color: color.adjust($c-dashboard-delete, $lightness: -5%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
background-color: lighten($c-dashboard-delete, 5%);
|
background-color: color.adjust($c-dashboard-delete, $lightness: 5%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn-secondary {
|
&.btn-secondary {
|
||||||
border-color: darken($c-dashboard-light, 10%);
|
border-color: color.adjust($c-dashboard-light, $lightness: -10%);
|
||||||
background-color: $c-dashboard-light;
|
background-color: $c-dashboard-light;
|
||||||
color: $c-text;
|
color: $c-text;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: darken($c-dashboard-light, 5%);
|
background-color: color.adjust($c-dashboard-light, $lightness: -5%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
background-color: lighten($c-dashboard-light, 5%);
|
background-color: color.adjust($c-dashboard-light, $lightness: 5%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -765,7 +766,7 @@ body {
|
||||||
transition: background-color 150ms;
|
transition: background-color 150ms;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: fade-out(#000, 0.97);
|
background-color: color.adjust(#000, $alpha: -0.97);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -855,8 +856,8 @@ body {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
.image-preview {
|
.image-preview {
|
||||||
@include aspect-ratio(16, 9);
|
|
||||||
display: block;
|
display: block;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -953,7 +954,7 @@ form {
|
||||||
.list {
|
.list {
|
||||||
margin-bottom: pxrem(15);
|
margin-bottom: pxrem(15);
|
||||||
padding-bottom: pxrem(15);
|
padding-bottom: pxrem(15);
|
||||||
border-bottom: 1px solid fade-out($c-text, 0.9);
|
border-bottom: 1px solid color.adjust($c-text, $alpha: -0.9);
|
||||||
|
|
||||||
&-template, &-data {
|
&-template, &-data {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -964,7 +965,7 @@ form {
|
||||||
margin-bottom: pxrem(10);
|
margin-bottom: pxrem(10);
|
||||||
padding: pxrem(8) pxrem(8) pxrem(8) pxrem(33);
|
padding: pxrem(8) pxrem(8) pxrem(8) pxrem(33);
|
||||||
border-radius: pxrem(6);
|
border-radius: pxrem(6);
|
||||||
background-color: darken($c-input-bg, 2%);
|
background-color: color.adjust($c-input-bg, $lightness: -2%);
|
||||||
|
|
||||||
@include media-breakpoint-up(lg) {
|
@include media-breakpoint-up(lg) {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -1092,7 +1093,7 @@ form {
|
||||||
&-delete {
|
&-delete {
|
||||||
min-width: pxrem(70);
|
min-width: pxrem(70);
|
||||||
height: $label-height;
|
height: $label-height;
|
||||||
border: 1px solid fade-out($c-text, 0.75);
|
border: 1px solid color.adjust($c-text, $alpha: -0.75);
|
||||||
border-radius: pxrem(4);
|
border-radius: pxrem(4);
|
||||||
background-color: $c-dashboard-delete;
|
background-color: $c-dashboard-delete;
|
||||||
color: $c-text-light;
|
color: $c-text-light;
|
||||||
|
@ -1102,7 +1103,7 @@ form {
|
||||||
|
|
||||||
&-add-button {
|
&-add-button {
|
||||||
height: $label-height;
|
height: $label-height;
|
||||||
border: 1px solid fade-out($c-text, 0.75);
|
border: 1px solid color.adjust($c-text, $alpha: -0.75);
|
||||||
border-radius: pxrem(4);
|
border-radius: pxrem(4);
|
||||||
|
|
||||||
@include media-breakpoint-down(lg) {
|
@include media-breakpoint-down(lg) {
|
||||||
|
@ -1151,7 +1152,7 @@ form {
|
||||||
|
|
||||||
&:not([type="file"]) {
|
&:not([type="file"]) {
|
||||||
padding: pxrem(5) pxrem(8);
|
padding: pxrem(5) pxrem(8);
|
||||||
border: 1px solid darken($c-dashboard-light, 10%);
|
border: 1px solid color.adjust($c-dashboard-light, $lightness: -10%);
|
||||||
border-radius: pxrem(2);
|
border-radius: pxrem(2);
|
||||||
transition: border-color 150ms;
|
transition: border-color 150ms;
|
||||||
|
|
||||||
|
@ -1237,22 +1238,22 @@ form {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.view {
|
&.view {
|
||||||
border: 1px solid darken($c-dashboard-dark, 5%);
|
border: 1px solid color.adjust($c-dashboard-dark, $lightness: -5%);
|
||||||
background-color: $c-dashboard-dark;
|
background-color: $c-dashboard-dark;
|
||||||
color: $c-text-light;
|
color: $c-text-light;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($c-dashboard-dark, 5%);
|
background-color: color.adjust($c-dashboard-dark, $lightness: 5%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.delete {
|
&.delete {
|
||||||
border: 1px solid darken($c-dashboard-delete, 5%);
|
border: 1px solid color.adjust($c-dashboard-delete, $lightness: -5%);
|
||||||
background-color: $c-dashboard-delete;
|
background-color: $c-dashboard-delete;
|
||||||
color: $c-text-light;
|
color: $c-text-light;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($c-dashboard-delete, 5%);
|
background-color: color.adjust($c-dashboard-delete, $lightness: 5%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1320,10 +1321,10 @@ form {
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-display {
|
.image-display {
|
||||||
@include aspect-ratio(1, 1);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 1px solid darken($c-dashboard-light, 10%);
|
aspect-ratio: 1/1;
|
||||||
|
border: 1px solid color.adjust($c-dashboard-light, $lightness: -10%);
|
||||||
border-radius: pxrem(3);
|
border-radius: pxrem(3);
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
@ -1344,14 +1345,14 @@ form {
|
||||||
width: pxrem(40);
|
width: pxrem(40);
|
||||||
height: pxrem(40);
|
height: pxrem(40);
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
border: 1px solid darken($c-dashboard-light, 14%);
|
border: 1px solid color.adjust($c-dashboard-light, $lightness: -14%);
|
||||||
border-radius: pxrem(3);
|
border-radius: pxrem(3);
|
||||||
background-color: darken($c-dashboard-light, 10%);
|
background-color: color.adjust($c-dashboard-light, $lightness: -10%);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: darken($c-dashboard-light, 7%);
|
background-color: color.adjust($c-dashboard-light, $lightness: -7%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1376,8 +1377,8 @@ form {
|
||||||
|
|
||||||
&.user-profile-update {
|
&.user-profile-update {
|
||||||
@include media-breakpoint-down(lg) {
|
@include media-breakpoint-down(lg) {
|
||||||
border-top: 1px solid darken($c-dashboard-light, 10%);
|
border-top: 1px solid color.adjust($c-dashboard-light, $lightness: -10%);
|
||||||
border-bottom: 1px solid darken($c-dashboard-light, 10%);
|
border-bottom: 1px solid color.adjust($c-dashboard-light, $lightness: -10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media-breakpoint-up(lg) {
|
@include media-breakpoint-up(lg) {
|
||||||
|
@ -1386,8 +1387,8 @@ form {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0px $grid-gutter-width;
|
padding: 0px $grid-gutter-width;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
border-right: 1px solid darken($c-dashboard-light, 10%);
|
border-right: 1px solid color.adjust($c-dashboard-light, $lightness: -10%);
|
||||||
border-left: 1px solid darken($c-dashboard-light, 10%);
|
border-left: 1px solid color.adjust($c-dashboard-light, $lightness: -10%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1429,7 +1430,7 @@ form {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: fade-out(lighten($c-dashboard-light, 1%), 0.6);
|
background-color: color.adjust(color.adjust($c-dashboard-light, $lightness: 1%), $alpha: -0.6);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 250ms;
|
transition: opacity 250ms;
|
||||||
|
|
||||||
|
@ -1453,7 +1454,7 @@ form {
|
||||||
padding: $grid-gutter-width;
|
padding: $grid-gutter-width;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: fade-out(lighten($c-dashboard-light, 1%), 0.3);
|
background-color: color.adjust(color.adjust($c-dashboard-light, $lightness: 1%), $alpha: -0.3);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 250ms;
|
transition: opacity 250ms;
|
||||||
|
|
||||||
|
|
|
@ -1,8 +0,0 @@
|
||||||
@mixin aspect-ratio($width, $height) {
|
|
||||||
&:before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding-top: (math.div($height, $width) * 100%);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -6,7 +6,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-entry {
|
.blog-entry {
|
||||||
border: 1px solid lighten($c-base, 75%);
|
border: 1px solid color.adjust($c-base, $lightness: 75%);
|
||||||
border-radius: pxrem(5);
|
border-radius: pxrem(5);
|
||||||
|
|
||||||
@include media-breakpoint-up(md) {
|
@include media-breakpoint-up(md) {
|
||||||
|
@ -24,8 +24,8 @@
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
@include media-breakpoint-down(md) {
|
@include media-breakpoint-down(md) {
|
||||||
@include aspect-ratio(3, 1);
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
aspect-ratio: 3/1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media-breakpoint-up(md) {
|
@include media-breakpoint-up(md) {
|
||||||
|
@ -55,7 +55,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-info {
|
&-info {
|
||||||
color: lighten($c-text, 30%);
|
color: color.adjust($c-text, $lightness: 30%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-body {
|
&-body {
|
||||||
|
|
|
@ -7,13 +7,13 @@
|
||||||
margin-bottom: pxrem(20);
|
margin-bottom: pxrem(20);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: pxrem(5) pxrem(10);
|
padding: pxrem(5) pxrem(10);
|
||||||
border: pxrem(2) solid fade-out($c-base, 0.75);
|
border: pxrem(2) solid color.adjust($c-base, $alpha: -0.75);
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
font-size: pxrem(14);
|
font-size: pxrem(14);
|
||||||
transition: border $trans-speed;
|
transition: border $trans-speed;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border: pxrem(2) solid fade-out($c-accent, 0.4);
|
border: pxrem(2) solid color.adjust($c-accent, $alpha: -0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.error {
|
&.error {
|
||||||
|
@ -28,7 +28,7 @@
|
||||||
|
|
||||||
.submit {
|
.submit {
|
||||||
@include font-sans-bold;
|
@include font-sans-bold;
|
||||||
background-color: lighten($c-accent, 5%);
|
background-color: color.adjust($c-accent, $lightness: 5%);
|
||||||
color: $c-text-light;
|
color: $c-text-light;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: background-color $trans-speed;
|
transition: background-color $trans-speed;
|
||||||
|
@ -46,7 +46,7 @@
|
||||||
.notification {
|
.notification {
|
||||||
margin: 0px auto pxrem(15) auto;
|
margin: 0px auto pxrem(15) auto;
|
||||||
padding: pxrem(5) pxrem(10);
|
padding: pxrem(5) pxrem(10);
|
||||||
background-color: lighten($c-error, 15%);
|
background-color: color.adjust($c-error, $lightness: 15%);
|
||||||
color: $c-text-light;
|
color: $c-text-light;
|
||||||
font-size: pxrem(14);
|
font-size: pxrem(14);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
@ -133,7 +133,7 @@
|
||||||
transition: background-color 150ms;
|
transition: background-color 150ms;
|
||||||
|
|
||||||
&:not(.active):hover {
|
&:not(.active):hover {
|
||||||
background-color: lighten($c-base, 5%);
|
background-color: color.adjust($c-base, $lightness: 5%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -150,7 +150,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.active):hover {
|
&:not(.active):hover {
|
||||||
color: darken($c-text-light, 5%);
|
color: color.adjust($c-text-light, $lightness: -5%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
.subscription-form-section-component {
|
.subscription-form-section-component {
|
||||||
$trans-speed: 100ms;
|
$trans-speed: 100ms;
|
||||||
width: pxrem(200);
|
width: pxrem(200);
|
||||||
border: pxrem(2) solid fade-out($c-base, 0.75);
|
border: pxrem(2) solid color.adjust($c-base, $alpha: -0.75);
|
||||||
border-radius: pxrem(3);
|
border-radius: pxrem(3);
|
||||||
background-color: lighten($c-base, 75%);
|
background-color: color.adjust($c-base, $lightness: 75%);
|
||||||
|
|
||||||
.notification {
|
.notification {
|
||||||
padding: pxrem(2);
|
padding: pxrem(2);
|
||||||
|
@ -14,7 +14,7 @@
|
||||||
margin: pxrem(5);
|
margin: pxrem(5);
|
||||||
width: calc(100% - #{pxrem(10)});
|
width: calc(100% - #{pxrem(10)});
|
||||||
padding: pxrem(3);
|
padding: pxrem(3);
|
||||||
border: pxrem(2) solid fade-out($c-base, 0.75);
|
border: pxrem(2) solid color.adjust($c-base, $alpha: -0.75);
|
||||||
font-size: pxrem(14);
|
font-size: pxrem(14);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: border-color $trans-speed;
|
transition: border-color $trans-speed;
|
||||||
|
|
|
@ -24,8 +24,7 @@ const babel = require("gulp-babel"),
|
||||||
const isProduction = minimist(process.argv.slice(2)).production !== undefined;
|
const isProduction = minimist(process.argv.slice(2)).production !== undefined;
|
||||||
|
|
||||||
// Declare plugin settings
|
// Declare plugin settings
|
||||||
const sassOutputStyle = isProduction ? "compressed" : "expanded",
|
const sassPaths = "node_modules",
|
||||||
sassPaths = "node_modules",
|
|
||||||
autoprefixerSettings = { remove: false, cascade: false };
|
autoprefixerSettings = { remove: false, cascade: false };
|
||||||
|
|
||||||
// Include browsersync when gulp has not been run with --production
|
// Include browsersync when gulp has not been run with --production
|
||||||
|
@ -80,8 +79,8 @@ const cssDashboardLibs = [
|
||||||
|
|
||||||
// Paths to folders containing fonts that should be copied to public/fonts/
|
// Paths to folders containing fonts that should be copied to public/fonts/
|
||||||
const fontPaths = [
|
const fontPaths = [
|
||||||
"resources/fonts/**",
|
"resources/fonts/*",
|
||||||
"node_modules/@fortawesome/fontawesome-free/webfonts/**"
|
"node_modules/@fortawesome/fontawesome-free/webfonts/*"
|
||||||
];
|
];
|
||||||
|
|
||||||
// Handle errors
|
// Handle errors
|
||||||
|
@ -102,10 +101,15 @@ function processSass(filename) {
|
||||||
const css = gulp.src(`resources/sass/${filename}.scss`)
|
const css = gulp.src(`resources/sass/${filename}.scss`)
|
||||||
.pipe(plumber(handleError))
|
.pipe(plumber(handleError))
|
||||||
.pipe(sassGlob())
|
.pipe(sassGlob())
|
||||||
.pipe(sass({ outputStyle: sassOutputStyle }))
|
.pipe(sass({ quietDeps: true }))
|
||||||
.pipe(postCSS([ autoprefixer(autoprefixerSettings) ]))
|
.pipe(postCSS([ autoprefixer(autoprefixerSettings) ]))
|
||||||
.pipe(concat(`${filename}.css`))
|
.pipe(concat(`${filename}.css`));
|
||||||
.pipe(gulp.dest("public/css/"));
|
|
||||||
|
if (isProduction) {
|
||||||
|
css.pipe(cleanCSS());
|
||||||
|
}
|
||||||
|
|
||||||
|
css.pipe(gulp.dest("public/css/"));
|
||||||
|
|
||||||
if (!isProduction) {
|
if (!isProduction) {
|
||||||
css.pipe(browserSync.stream({ match: `**/${filename}.css` }));
|
css.pipe(browserSync.stream({ match: `**/${filename}.css` }));
|
||||||
|
@ -200,7 +204,7 @@ gulp.task("js-dashboard-libs", () => {
|
||||||
|
|
||||||
// Task to copy fonts
|
// Task to copy fonts
|
||||||
gulp.task("fonts", (done) => {
|
gulp.task("fonts", (done) => {
|
||||||
gulp.src(fontPaths)
|
gulp.src(fontPaths, { encoding: false })
|
||||||
.pipe(plumber(handleError))
|
.pipe(plumber(handleError))
|
||||||
.pipe(gulp.dest("public/fonts/"));
|
.pipe(gulp.dest("public/fonts/"));
|
||||||
|
|
||||||
|
|
|
@ -8,9 +8,9 @@
|
||||||
"browser-sync": "3.0.2"
|
"browser-sync": "3.0.2"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/core": "7.24.7",
|
"@babel/core": "7.24.9",
|
||||||
"@babel/preset-env": "7.24.7",
|
"@babel/preset-env": "7.24.8",
|
||||||
"@fortawesome/fontawesome-free": "6.5.2",
|
"@fortawesome/fontawesome-free": "6.6.0",
|
||||||
"autonumeric": "4.10.5",
|
"autonumeric": "4.10.5",
|
||||||
"autoprefixer": "10.4.19",
|
"autoprefixer": "10.4.19",
|
||||||
"bootstrap": "5.3.3",
|
"bootstrap": "5.3.3",
|
||||||
|
@ -27,12 +27,13 @@
|
||||||
"gulp-sass-glob": "1.1.0",
|
"gulp-sass-glob": "1.1.0",
|
||||||
"gulp-strip-debug": "4.0.0",
|
"gulp-strip-debug": "4.0.0",
|
||||||
"gulp-uglify-es": "3.0.0",
|
"gulp-uglify-es": "3.0.0",
|
||||||
"gulp5-sass-plugin": "^1.0.0",
|
"gulp5-sass-plugin": "^2.0.0",
|
||||||
"jquery": "3.7.1",
|
"jquery": "3.7.1",
|
||||||
"list.js": "2.3.1",
|
"list.js": "2.3.1",
|
||||||
"minimist": "1.2.8",
|
"minimist": "1.2.8",
|
||||||
"ordered-read-streams": "^2.0.0",
|
"ordered-read-streams": "^2.0.0",
|
||||||
"postcss": "8.4.38",
|
"postcss": "8.4.40",
|
||||||
|
"sass": "^1.77.8",
|
||||||
"sortablejs": "1.15.2",
|
"sortablejs": "1.15.2",
|
||||||
"spinkit": "2.0.1",
|
"spinkit": "2.0.1",
|
||||||
"what-input": "5.2.12"
|
"what-input": "5.2.12"
|
||||||
|
|
Loading…
Reference in a new issue