Sven Ullmann
9 months ago
20 changed files with 599 additions and 0 deletions
-
2.gitignore
-
7_bootstrap.scss
-
8_defaults.scss
-
1_theme.scss
-
11components/_button.scss
-
12components/_linkextern.scss
-
15components/_linkfx.scss
-
7components/_radio.scss
-
10config/_breakpoints.scss
-
1config/_config.scss
-
2config/_variables.scss
-
15function/_rem.scss
-
31lib/_defaults.scss
-
350lib/_normalize.scss
-
3lib/_theme.scss
-
16mixin/_breakpoint.scss
-
58mixin/_layout.scss
-
12package.json
-
3scss-framework.scss
-
35theme/sumedia/_theme.scss
@ -0,0 +1,7 @@ |
|||
@import "function/rem"; |
|||
|
|||
@import "mixin/breakpoint"; |
|||
@import "mixin/layout"; |
|||
|
|||
@import "config/breakpoints"; |
|||
@import "config/variables"; |
@ -0,0 +1,8 @@ |
|||
@import "lib/normalize"; |
|||
@import "lib/theme"; |
|||
@import "lib/defaults"; |
|||
|
|||
@import "components/linkfx"; |
|||
@import "components/linkextern"; |
|||
@import "components/button"; |
|||
@import "components/radio"; |
@ -0,0 +1 @@ |
|||
@import "theme/sumedia/theme"; |
@ -0,0 +1,11 @@ |
|||
.component-button { |
|||
padding: .5rem .9rem; |
|||
background: linear-gradient(#da0, #c90); |
|||
border: 1px solid var(--secondary-color-darker); |
|||
border-radius: 5px; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
filter: brightness(1.2); |
|||
} |
|||
} |
@ -0,0 +1,12 @@ |
|||
.component-linkextern:not([href^='https://#{$domain}']) { |
|||
margin-right: 1.2em; |
|||
|
|||
&:after { |
|||
content: '\f08e'; |
|||
font-family: var(--font-icon); |
|||
font-size: .8em; |
|||
margin-left: .35em; |
|||
margin-top: .1em; |
|||
position: absolute; |
|||
} |
|||
} |
@ -0,0 +1,15 @@ |
|||
.component-linkfx { |
|||
&:before { |
|||
position: absolute; |
|||
content: ''; |
|||
bottom: .29rem; |
|||
border-bottom: 1px solid currentColor; |
|||
width: 0; |
|||
height: 1px; |
|||
transition: width .25s; |
|||
} |
|||
|
|||
&:hover:before { |
|||
width: 100%; |
|||
} |
|||
} |
@ -0,0 +1,7 @@ |
|||
.component-radio { |
|||
-webkit-appearance: none; |
|||
appearance: none; |
|||
margin: 0; |
|||
padding: 0; |
|||
border: 1px solid #c00; |
|||
} |
@ -0,0 +1,10 @@ |
|||
$breakpoints: ( |
|||
0: 0, |
|||
xs: 320px, |
|||
s: 640px, |
|||
m: 1024px, |
|||
l: 1400px, |
|||
xl: 1600px, |
|||
xxl: 1800px, |
|||
full: 100vw |
|||
); |
@ -0,0 +1 @@ |
|||
$domain: 'localhost'; |
@ -0,0 +1,2 @@ |
|||
$boxShadow: 0 0 12px #aaa; |
|||
$boxShadowDark: 0 0 12px #333; |
@ -0,0 +1,15 @@ |
|||
@function rem($pixel, $basis: 16) { |
|||
$negative: false; |
|||
@if ($pixel < 0) { |
|||
$negative: true; |
|||
$pixel: calc($pixel * -1); |
|||
} |
|||
|
|||
$rem: calc($pixel / $basis); |
|||
|
|||
@if ($negative) { |
|||
$rem: calc($rem * -1); |
|||
} |
|||
|
|||
@return $rem + 0rem; |
|||
} |
@ -0,0 +1,31 @@ |
|||
*, :before, :after { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
html { |
|||
height: 100vh; |
|||
} |
|||
|
|||
body { |
|||
@include layout(column); |
|||
flex-wrap: nowrap; |
|||
font-size: 16px; |
|||
line-height: 1.8rem; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.section { |
|||
flex: 0 0 auto; |
|||
|
|||
& > .container { |
|||
margin: 0 auto; |
|||
width: 100%; |
|||
|
|||
@include breakpoint('screen', 'xs') { max-width: 100vw; } |
|||
@include breakpoint('screen', 's') { max-width: 100vw; } |
|||
@include breakpoint('screen', 'm') { max-width: 95vw; } |
|||
@include breakpoint('screen', 'l') { max-width: 90vw; } |
|||
@include breakpoint('screen', 'xl') { max-width: rem(1400); } |
|||
@include breakpoint('screen', 'xxl') { max-width: rem(1600); } |
|||
} |
|||
} |
@ -0,0 +1,350 @@ |
|||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ |
|||
|
|||
/* Document |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* 1. Correct the line height in all browsers. |
|||
* 2. Prevent adjustments of font size after orientation changes in iOS. |
|||
*/ |
|||
|
|||
html { |
|||
line-height: 1.15; /* 1 */ |
|||
-webkit-text-size-adjust: 100%; /* 2 */ |
|||
height: 100%; |
|||
} |
|||
|
|||
/* Sections |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* Remove the margin in all browsers. |
|||
*/ |
|||
|
|||
body { |
|||
margin: 0; |
|||
} |
|||
|
|||
/** |
|||
* Render the `main` element consistently in IE. |
|||
*/ |
|||
|
|||
main { |
|||
display: block; |
|||
} |
|||
|
|||
/** |
|||
* Correct the font size and margin on `h1` elements within `section` and |
|||
* `article` contexts in Chrome, Firefox, and Safari. |
|||
*/ |
|||
|
|||
h1 { |
|||
font-size: 2em; |
|||
margin: 0.67em 0; |
|||
} |
|||
|
|||
/* Grouping content |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* 1. Add the correct box sizing in Firefox. |
|||
* 2. Show the overflow in Edge and IE. |
|||
*/ |
|||
|
|||
hr { |
|||
box-sizing: content-box; /* 1 */ |
|||
height: 0; /* 1 */ |
|||
overflow: visible; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* 1. Correct the inheritance and scaling of font size in all browsers. |
|||
* 2. Correct the odd `em` font sizing in all browsers. |
|||
*/ |
|||
|
|||
pre { |
|||
font-family: monospace, monospace; /* 1 */ |
|||
font-size: 1em; /* 2 */ |
|||
} |
|||
|
|||
/* Text-level semantics |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* Remove the gray background on active links in IE 10. |
|||
*/ |
|||
|
|||
a { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
/** |
|||
* 1. Remove the bottom border in Chrome 57- |
|||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. |
|||
*/ |
|||
|
|||
abbr[title] { |
|||
border-bottom: none; /* 1 */ |
|||
text-decoration: underline; /* 2 */ |
|||
text-decoration: underline dotted; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Add the correct font weight in Chrome, Edge, and Safari. |
|||
*/ |
|||
|
|||
b, |
|||
strong { |
|||
font-weight: bolder; |
|||
} |
|||
|
|||
/** |
|||
* 1. Correct the inheritance and scaling of font size in all browsers. |
|||
* 2. Correct the odd `em` font sizing in all browsers. |
|||
*/ |
|||
|
|||
code, |
|||
kbd, |
|||
samp { |
|||
font-family: monospace, monospace; /* 1 */ |
|||
font-size: 1em; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Add the correct font size in all browsers. |
|||
*/ |
|||
|
|||
small { |
|||
font-size: 80%; |
|||
} |
|||
|
|||
/** |
|||
* Prevent `sub` and `sup` elements from affecting the line height in |
|||
* all browsers. |
|||
*/ |
|||
|
|||
sub, |
|||
sup { |
|||
font-size: 75%; |
|||
line-height: 0; |
|||
position: relative; |
|||
vertical-align: baseline; |
|||
} |
|||
|
|||
sub { |
|||
bottom: -0.25em; |
|||
} |
|||
|
|||
sup { |
|||
top: -0.5em; |
|||
} |
|||
|
|||
/* Embedded content |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* Remove the border on images inside links in IE 10. |
|||
*/ |
|||
|
|||
img { |
|||
border-style: none; |
|||
} |
|||
|
|||
/* Forms |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* 1. Change the font styles in all browsers. |
|||
* 2. Remove the margin in Firefox and Safari. |
|||
*/ |
|||
|
|||
button, |
|||
input, |
|||
optgroup, |
|||
select, |
|||
textarea { |
|||
font-family: inherit; /* 1 */ |
|||
font-size: 100%; /* 1 */ |
|||
line-height: 1.15; /* 1 */ |
|||
margin: 0; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Show the overflow in IE. |
|||
* 1. Show the overflow in Edge. |
|||
*/ |
|||
|
|||
button, |
|||
input { /* 1 */ |
|||
overflow: visible; |
|||
} |
|||
|
|||
/** |
|||
* Remove the inheritance of text transform in Edge, Firefox, and IE. |
|||
* 1. Remove the inheritance of text transform in Firefox. |
|||
*/ |
|||
|
|||
button, |
|||
select { /* 1 */ |
|||
text-transform: none; |
|||
} |
|||
|
|||
/** |
|||
* Correct the inability to style clickable types in iOS and Safari. |
|||
*/ |
|||
|
|||
button, |
|||
[type="button"], |
|||
[type="reset"], |
|||
[type="submit"] { |
|||
-webkit-appearance: button; |
|||
} |
|||
|
|||
/** |
|||
* Remove the inner border and padding in Firefox. |
|||
*/ |
|||
|
|||
button::-moz-focus-inner, |
|||
[type="button"]::-moz-focus-inner, |
|||
[type="reset"]::-moz-focus-inner, |
|||
[type="submit"]::-moz-focus-inner { |
|||
border-style: none; |
|||
padding: 0; |
|||
} |
|||
|
|||
/** |
|||
* Restore the focus styles unset by the previous rule. |
|||
*/ |
|||
|
|||
button:-moz-focusring, |
|||
[type="button"]:-moz-focusring, |
|||
[type="reset"]:-moz-focusring, |
|||
[type="submit"]:-moz-focusring { |
|||
outline: 1px dotted ButtonText; |
|||
} |
|||
|
|||
/** |
|||
* Correct the padding in Firefox. |
|||
*/ |
|||
|
|||
fieldset { |
|||
padding: 0.35em 0.75em 0.625em; |
|||
} |
|||
|
|||
/** |
|||
* 1. Correct the text wrapping in Edge and IE. |
|||
* 2. Correct the color inheritance from `fieldset` elements in IE. |
|||
* 3. Remove the padding so developers are not caught out when they zero out |
|||
* `fieldset` elements in all browsers. |
|||
*/ |
|||
|
|||
legend { |
|||
box-sizing: border-box; /* 1 */ |
|||
color: inherit; /* 2 */ |
|||
display: table; /* 1 */ |
|||
max-width: 100%; /* 1 */ |
|||
padding: 0; /* 3 */ |
|||
white-space: normal; /* 1 */ |
|||
} |
|||
|
|||
/** |
|||
* Add the correct vertical alignment in Chrome, Firefox, and Opera. |
|||
*/ |
|||
|
|||
progress { |
|||
vertical-align: baseline; |
|||
} |
|||
|
|||
/** |
|||
* Remove the default vertical scrollbar in IE 10+. |
|||
*/ |
|||
|
|||
textarea { |
|||
overflow: auto; |
|||
} |
|||
|
|||
/** |
|||
* 1. Add the correct box sizing in IE 10. |
|||
* 2. Remove the padding in IE 10. |
|||
*/ |
|||
|
|||
[type="checkbox"], |
|||
[type="radio"] { |
|||
box-sizing: border-box; /* 1 */ |
|||
padding: 0; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Correct the cursor style of increment and decrement buttons in Chrome. |
|||
*/ |
|||
|
|||
[type="number"]::-webkit-inner-spin-button, |
|||
[type="number"]::-webkit-outer-spin-button { |
|||
height: auto; |
|||
} |
|||
|
|||
/** |
|||
* 1. Correct the odd appearance in Chrome and Safari. |
|||
* 2. Correct the outline style in Safari. |
|||
*/ |
|||
|
|||
[type="search"] { |
|||
-webkit-appearance: textfield; /* 1 */ |
|||
outline-offset: -2px; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Remove the inner padding in Chrome and Safari on macOS. |
|||
*/ |
|||
|
|||
[type="search"]::-webkit-search-decoration { |
|||
-webkit-appearance: none; |
|||
} |
|||
|
|||
/** |
|||
* 1. Correct the inability to style clickable types in iOS and Safari. |
|||
* 2. Change font properties to `inherit` in Safari. |
|||
*/ |
|||
|
|||
::-webkit-file-upload-button { |
|||
-webkit-appearance: button; /* 1 */ |
|||
font: inherit; /* 2 */ |
|||
} |
|||
|
|||
/* Interactive |
|||
========================================================================== */ |
|||
|
|||
/* |
|||
* Add the correct display in Edge, IE 10+, and Firefox. |
|||
*/ |
|||
|
|||
details { |
|||
display: block; |
|||
} |
|||
|
|||
/* |
|||
* Add the correct display in all browsers. |
|||
*/ |
|||
|
|||
summary { |
|||
display: list-item; |
|||
} |
|||
|
|||
/* Misc |
|||
========================================================================== */ |
|||
|
|||
/** |
|||
* Add the correct display in IE 10+. |
|||
*/ |
|||
|
|||
template { |
|||
display: none; |
|||
} |
|||
|
|||
/** |
|||
* Add the correct display in IE 10. |
|||
*/ |
|||
|
|||
[hidden] { |
|||
display: none; |
|||
} |
@ -0,0 +1,3 @@ |
|||
body { |
|||
background-color: var(--bg-color); |
|||
} |
@ -0,0 +1,16 @@ |
|||
@use 'sass:map'; |
|||
|
|||
@mixin breakpoint($media, $min: 0, $max: 0) { |
|||
$bpMin: map.get($breakpoints, $min); |
|||
$bpMax: map.get($breakpoints, $max); |
|||
|
|||
@if $bpMax != 0 { |
|||
@media only #{$media} and (min-width: $bpMin) and (max-width: $bpMax) { |
|||
@content; |
|||
} |
|||
} @else { |
|||
@media only #{$media} and (min-width: $bpMin) { |
|||
@content; |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,58 @@ |
|||
@use 'sass:list'; |
|||
@use 'sass:math'; |
|||
|
|||
@mixin layout($direction, $bpColumns: [], $gap: (0 0)) { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex-direction: $direction; |
|||
align-items: stretch; |
|||
align-content: stretch; |
|||
flex-wrap: wrap; |
|||
column-gap: list.nth($gap, 1); |
|||
row-gap: list.nth($gap, 2); |
|||
|
|||
@if list.length($bpColumns) > 0 { |
|||
@for $bpIndex from 1 through list.length($bpColumns) { |
|||
$bp: list.nth($bpColumns, $bpIndex); |
|||
@include breakpoint('screen', list.nth($bp, 1), list.nth($bp, 2)) { |
|||
$columns: list.nth($bp, 3); |
|||
@for $i from 1 through list.length($columns) { |
|||
$minmax: list.nth($columns, $i); |
|||
$min: list.nth($minmax, 1); |
|||
$max: list.nth($minmax, 2); |
|||
& > *:nth-child(#{$i}) { |
|||
@if math.unit($min) == "" and math.unit($max) == "" { |
|||
flex: $max $min min-content; |
|||
} @else if math.unit($min) == "" { |
|||
flex: 1 $min auto; |
|||
} @else if math.unit($max) == "" { |
|||
flex: $max 0 auto; |
|||
} @else { |
|||
flex: 1 0 auto; |
|||
} |
|||
|
|||
@if math.unit($min) != "" { |
|||
@if $direction == 'row' { |
|||
min-width: $min; |
|||
} @else { |
|||
min-height: $min; |
|||
} |
|||
} |
|||
|
|||
@if math.unit($max) != "" { |
|||
@if $direction == 'row' { |
|||
max-width: $max; |
|||
} @else { |
|||
max-height: $max; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} @else { |
|||
& > * { |
|||
flex: 1 0 auto; |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,12 @@ |
|||
{ |
|||
"name": "scss-framework", |
|||
"version": "1.0.0", |
|||
"description": "SCSS Framework.", |
|||
"keywords": [ |
|||
"scss-framework" |
|||
], |
|||
"private": true, |
|||
"author": "Sven Ullmann", |
|||
"license": "proprietary", |
|||
"homepage": "https://www.sumedia-webdesign.de" |
|||
} |
@ -0,0 +1,3 @@ |
|||
@import "bootstrap"; |
|||
@import "theme"; |
|||
@import "defaults"; |
@ -0,0 +1,35 @@ |
|||
:root { |
|||
--primary-color: #333; |
|||
--primary-color-ligher: #444; |
|||
--primery-color-darker: #252525; |
|||
--secondary-color: #da0; |
|||
--secondary-color-lighter: #db0; |
|||
--secondary-color-darker: #c90; |
|||
--tertiary-color: #460; |
|||
--tertiary-color-ligher: #680; |
|||
--tertiary-color-darker: #340; |
|||
--quarternary-color: #146; |
|||
--quarternary-color-lighter: #257; |
|||
--quarternary-color-darker: #035; |
|||
--bg-color: #fff; |
|||
--bg-color-inverted: #333; |
|||
--fg-color: #222; |
|||
--fg-color-inverted: #f5f5f5; |
|||
--link-color: #246; |
|||
--link-color-inverted: #da0; |
|||
--border-color: #222; |
|||
--border-color-inverted: #ccc; |
|||
} |
|||
|
|||
/* |
|||
@media (prefers-color-scheme: dark) { |
|||
:root { |
|||
--bg-color: #333; |
|||
--bg-color-inverted: #fff; |
|||
--fg-color: #fff; |
|||
--fg-color-inverted: #222; |
|||
--link-color: #fc0; |
|||
--link-color-inverted: #246; |
|||
} |
|||
} |
|||
*/ |
Write
Preview
Loading…
Cancel
Save
Reference in new issue