Congegni/barebones
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Version 4 with Laravel Mix

Browse source
This commit is contained in:
Dan Coulthard 2023-08-03 12:57:13 +01:00
parent 0cafd60448
commit f0198f659b
32 changed files with 13032 additions and 352 deletions
Download patch file Download diff file Expand all files Collapse all files

6
assets/styles/config/_mixins.scss
View file

@ -2,7 +2,9 @@
* Media query to respond to a minimum size (mobile first)
*/
@mixin resp-min($size) {
@use "sass:math";
@mixin resp-min($size) {
@media screen and (min-width: $size) {
@content;
}
@ -26,7 +28,7 @@
@mixin font-size($px) {
font-size: $px + px;
font-size: #{$px / 16}rem;
font-size: #{math.div($px, 16)}rem;
}

83
assets/styles/config/_variables.scss
View file

@ -1,30 +1,3 @@
/**
* Colours
*/
$base-colour: #444;
$base-background-colour: #fff;
$brand-colour: #444; // Example
$success-colour: #5CB85C;
$info-colour: $brand-colour;
$warning-colour: #F0AD4E;
$danger-colour: #D9534F;
/**
* Typography
*/
$sans-serif-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$serif-font-family: Georgia, "Times New Roman", Times, serif;
$base-font-family: $sans-serif-font-family;
$base-font-size: 16;
$base-line-height: 1.5;
$base-spacing-unit: ($base-font-size * $base-line-height) * 1px;
/**
* Breakpoints
*/
@ -34,13 +7,16 @@ $breakpoint-md: 1024px;
$breakpoint-sm: 768px;
$breakpoint-xs: 480px;
$breakpoints: (
'lg' '(min-width: ' + ($breakpoint-md + 1) + ')',
'md' '(min-width: ' + ($breakpoint-sm + 1) + ') and (max-width: ' + $breakpoint-md + ')',
'sm' '(min-width: ' + ($breakpoint-xs + 1) + ') and (max-width:' + $breakpoint-sm + ')',
'xs' '(max-width: ' + $breakpoint-xs + ')'
);
/**
* Typography
*/
$base-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$alt-font-family: 'Georgia', 'Times New Roman', Times, serif;
$base-font-size: 16;
$base-line-height: 1.5;
$base-spacing-unit: ($base-font-size * $base-line-height) * 1px;
/**
* Grid
@ -50,6 +26,44 @@ $grid-max-width: 1200px;
$grid-columns: 12;
$grid-gutter: $base-spacing-unit;
/**
* Colors
*/
$colors: (
'base': #444,
'background': #fff,
'brand': #444,
'success': #5CB85C,
'info': #444,
'warning': #F0AD4E,
'danger': #D9534F
);
/**
* Spacing
*/
$spacings: (
'xl' ($base-spacing-unit * 4),
'lg' ($base-spacing-unit * 3),
'md' ($base-spacing-unit * 2),
'sm' ($base-spacing-unit * 1),
'xs' ($base-spacing-unit * 0.5),
);
/**
* Font Sizes
*/
$font-sizes: (
'2xl' $base-font-size + 16,
'xl' $base-font-size + 8,
'lg' $base-font-size + 6,
'md' $base-font-size + 2,
'sm' $base-font-size,
'xs' $base-font-size - 2,
);
/**
* Components
@ -60,5 +74,6 @@ $border-radius: 3px;
/**
* Animations
*/
$animation-speed: 250ms;
$animation: ease-in-out;
$animation: ease-in-out;