commit
87852330b7
@ -0,0 +1,8 @@
|
||||
node_modules
|
||||
build
|
||||
*.DS_Store
|
||||
Thumbs.db
|
||||
.idea
|
||||
*.log
|
||||
|
||||
assets-manifest.json
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "@spd-minden/sozi-ui",
|
||||
"version": "0.1.0",
|
||||
"description": "Components for CI of SPD",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@git.node001.net:spd-minden/sozi-ui.git"
|
||||
},
|
||||
"author": "Björn Hase",
|
||||
"license": "GPLv3",
|
||||
"dependencies": {
|
||||
"reflex-grid": "^2.0.8",
|
||||
"riot": "^9.4.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tiny-components/webpack": "^0.5.2"
|
||||
},
|
||||
"scripts": {
|
||||
"build-dev": "bun webpack --mode development --config webpack.config.js",
|
||||
"build": "bun webpack --mode production --config webpack.config.js"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,677 @@
|
||||
/*!*******************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/scss/styles.scss ***!
|
||||
\*******************************************************************************************************************************************/
|
||||
:root {
|
||||
--reflex-columns: 12;
|
||||
--reflex-grid-spacing: 15px;
|
||||
--reflex-xs: 576px;
|
||||
--reflex-sm: 768px;
|
||||
--reflex-md: 992px;
|
||||
--reflex-lg: 1200px;
|
||||
--reflex-xlg: 1600px;
|
||||
--reflex-xxs-max: 575px;
|
||||
--reflex-xs-max: 767px;
|
||||
--reflex-sm-max: 991px;
|
||||
--reflex-md-max: 1199px;
|
||||
--reflex-lg-max: 1599px;
|
||||
}
|
||||
|
||||
.container,
|
||||
.container-full {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.container .grid,
|
||||
.container-full .grid {
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.container {
|
||||
max-width: 576px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 768px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
max-width: 992px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
.container {
|
||||
max-width: 1600px;
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
letter-spacing: -0.31em;
|
||||
*letter-spacing: normal;
|
||||
word-spacing: -0.43em;
|
||||
list-style-type: none;
|
||||
}
|
||||
.grid::before, .grid::after {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
[class*=col-] {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
white-space: normal;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
padding: 15px;
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
}
|
||||
[class*=col-]::before, [class*=col-]::after {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
white-space: normal;
|
||||
}
|
||||
[class*=col-] .grid {
|
||||
-ms-flex: 1 1 auto;
|
||||
-webkit-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
margin: -15px;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
width: 100%;
|
||||
*width: 99.9%;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
width: 83.3333333333%;
|
||||
*width: 83.2333333333%;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
width: 75%;
|
||||
*width: 74.9%;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
width: 58.3333333333%;
|
||||
*width: 58.2333333333%;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
width: 50%;
|
||||
*width: 49.9%;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
width: 33.3333333333%;
|
||||
*width: 33.2333333333%;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
width: 25%;
|
||||
*width: 24.9%;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.col-xs-12 {
|
||||
width: 100%;
|
||||
*width: 99.9%;
|
||||
}
|
||||
.col-xs-10 {
|
||||
width: 83.3333333333%;
|
||||
*width: 83.2333333333%;
|
||||
}
|
||||
.col-xs-8 {
|
||||
width: 66.6666666667%;
|
||||
*width: 66.5666666667%;
|
||||
}
|
||||
.col-xs-6 {
|
||||
width: 50%;
|
||||
*width: 49.9%;
|
||||
}
|
||||
.col-xs-4 {
|
||||
width: 33.3333333333%;
|
||||
*width: 33.2333333333%;
|
||||
}
|
||||
.col-xs-2 {
|
||||
width: 16.6666666667%;
|
||||
*width: 16.5666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.col-sm-12 {
|
||||
width: 100%;
|
||||
*width: 99.9%;
|
||||
}
|
||||
.col-sm-6 {
|
||||
width: 50%;
|
||||
*width: 49.9%;
|
||||
}
|
||||
.col-sm-4 {
|
||||
width: 33.3333333333%;
|
||||
*width: 33.2333333333%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.col-md-8 {
|
||||
width: 66.6666666667%;
|
||||
*width: 66.5666666667%;
|
||||
}
|
||||
.col-md-7 {
|
||||
width: 58.3333333333%;
|
||||
*width: 58.2333333333%;
|
||||
}
|
||||
.col-md-6 {
|
||||
width: 50%;
|
||||
*width: 49.9%;
|
||||
}
|
||||
.col-md-4 {
|
||||
width: 33.3333333333%;
|
||||
*width: 33.2333333333%;
|
||||
}
|
||||
.col-md-3 {
|
||||
width: 25%;
|
||||
*width: 24.9%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.col-lg-8 {
|
||||
width: 66.6666666667%;
|
||||
*width: 66.5666666667%;
|
||||
}
|
||||
.col-lg-4 {
|
||||
width: 33.3333333333%;
|
||||
*width: 33.2333333333%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
.col-xlg-12 {
|
||||
width: 100%;
|
||||
*width: 99.9%;
|
||||
}
|
||||
.col-xlg-8 {
|
||||
width: 66.6666666667%;
|
||||
*width: 66.5666666667%;
|
||||
}
|
||||
.col-xlg-4 {
|
||||
width: 33.3333333333%;
|
||||
*width: 33.2333333333%;
|
||||
}
|
||||
}
|
||||
.col-auto {
|
||||
-ms-flex: 1 0 0px;
|
||||
-webkit-flex: 1 0 0px;
|
||||
flex: 1 0 0px;
|
||||
width: auto;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.col-sm-auto {
|
||||
-ms-flex: 1 0 0px;
|
||||
-webkit-flex: 1 0 0px;
|
||||
flex: 1 0 0px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.col-md-auto {
|
||||
-ms-flex: 1 0 0px;
|
||||
-webkit-flex: 1 0 0px;
|
||||
flex: 1 0 0px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.col-lg-auto {
|
||||
-ms-flex: 1 0 0px;
|
||||
-webkit-flex: 1 0 0px;
|
||||
flex: 1 0 0px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
.col-xlg-auto {
|
||||
-ms-flex: 1 0 0px;
|
||||
-webkit-flex: 1 0 0px;
|
||||
flex: 1 0 0px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.order-3 {
|
||||
-ms-flex-order: 3;
|
||||
-webkit-order: 3;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.order-2 {
|
||||
-ms-flex-order: 2;
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.order-1 {
|
||||
-ms-flex-order: 1;
|
||||
-webkit-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.order-md-3 {
|
||||
-ms-flex-order: 3;
|
||||
-webkit-order: 3;
|
||||
order: 3;
|
||||
}
|
||||
.order-md-2 {
|
||||
-ms-flex-order: 2;
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
}
|
||||
.order-md-1 {
|
||||
-ms-flex-order: 1;
|
||||
-webkit-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.offset-3 {
|
||||
margin-left: 25%;
|
||||
*margin-left: 24.9%;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.offset-md-2 {
|
||||
margin-left: 16.6666666667%;
|
||||
*margin-left: 16.5666666667%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.offset-lg-1 {
|
||||
margin-left: 8.3333333333%;
|
||||
*margin-left: 8.2333333333%;
|
||||
}
|
||||
}
|
||||
.wrap {
|
||||
-ms-flex-wrap: wrap;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.no-wrap {
|
||||
-ms-flex-wrap: nowrap;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.no-wrap [class*=col-] {
|
||||
-ms-flex-negative: 1;
|
||||
-webkit-flex-shrink: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.wrap-reverse {
|
||||
-ms-flex-wrap: wrap-reverse;
|
||||
-webkit-flex-wrap: wrap-reverse;
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.direction-row {
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.direction-row-reverse {
|
||||
-ms-flex-direction: row-reverse;
|
||||
-webkit-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.direction-column {
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.direction-column-reverse {
|
||||
-ms-flex-direction: column-reverse;
|
||||
-webkit-flex-direction: column-reverse;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
-ms-flex-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.align-end {
|
||||
-ms-flex-align: end;
|
||||
-webkit-align-items: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.align-end [class*=col-] {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.align-center [class*=col-] {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.align-baseline {
|
||||
-ms-flex-align: baseline;
|
||||
-webkit-align-items: baseline;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.align-content-start {
|
||||
-ms-flex-line-pack: start;
|
||||
-webkit-align-content: flex-start;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.align-content-end {
|
||||
-ms-flex-line-pack: end;
|
||||
-webkit-align-content: flex-end;
|
||||
align-content: flex-end;
|
||||
}
|
||||
.align-content-end [class*=col-] {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.align-content-center {
|
||||
-ms-flex-line-pack: center;
|
||||
-webkit-align-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.align-content-space-between {
|
||||
-ms-flex-line-pack: justify;
|
||||
-webkit-align-content: space-between;
|
||||
align-content: space-between;
|
||||
}
|
||||
|
||||
.align-content-space-around {
|
||||
-ms-flex-line-pack: distribute;
|
||||
-webkit-align-content: space-around;
|
||||
align-content: space-around;
|
||||
}
|
||||
|
||||
.align-self-stretch {
|
||||
-ms-flex-item-align: stretch;
|
||||
-webkit-align-self: stretch;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.align-self-start {
|
||||
-ms-flex-item-align: start;
|
||||
-webkit-align-self: flex-start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.align-self-end {
|
||||
-ms-flex-item-align: end;
|
||||
-webkit-align-self: flex-end;
|
||||
align-self: flex-end;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.align-self-center {
|
||||
-ms-flex-item-align: center;
|
||||
-webkit-align-self: center;
|
||||
align-self: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
-ms-flex-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.justify-end.grid {
|
||||
text-align: right;
|
||||
-moz-text-align-last: right;
|
||||
text-align-last: right;
|
||||
}
|
||||
.justify-end.grid [class*=col-] {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
-moz-text-align-last: left;
|
||||
-moz-text-align-last: start;
|
||||
text-align-last: left;
|
||||
text-align-last: start;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.justify-center.grid {
|
||||
text-align: center;
|
||||
-moz-text-align-last: center;
|
||||
text-align-last: center;
|
||||
}
|
||||
.justify-center.grid [class*=col-] {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
-moz-text-align-last: left;
|
||||
-moz-text-align-last: start;
|
||||
text-align-last: left;
|
||||
text-align-last: start;
|
||||
}
|
||||
|
||||
.justify-space-between {
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.justify-space-between.grid {
|
||||
text-align: justify;
|
||||
-moz-text-align-last: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
.justify-space-between.grid [class*=col-] {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
-moz-text-align-last: left;
|
||||
-moz-text-align-last: start;
|
||||
text-align-last: left;
|
||||
text-align-last: start;
|
||||
}
|
||||
|
||||
.justify-space-around {
|
||||
-ms-flex-pack: distribute;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.justify-space-around.grid {
|
||||
text-align: justify;
|
||||
-moz-text-align-last: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
.justify-space-around.grid [class*=col-] {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
-moz-text-align-last: left;
|
||||
-moz-text-align-last: start;
|
||||
text-align-last: left;
|
||||
text-align-last: start;
|
||||
}
|
||||
|
||||
.grid-bleed [class*=col-] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.col-grid {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.col-grid.direction-row {
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.col-bleed {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.col-bleed-x {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.col-bleed-y {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.flex-img {
|
||||
display: block;
|
||||
-ms-flex: 0 0 auto;
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
*width: auto;
|
||||
}
|
||||
|
||||
.flex-footer {
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.flex-footer > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 0px) and (max-width: 575px) {
|
||||
.hidden-xxs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.hidden-xs-up {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hidden-xs-down {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) and (max-width: 767px) {
|
||||
.hidden-xs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.hidden-sm-up {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.hidden-sm-down {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.hidden-sm {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.hidden-md-up {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.hidden-md-down {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.hidden-md {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.hidden-lg-up {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1599px) {
|
||||
.hidden-lg-down {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) and (max-width: 1599px) {
|
||||
.hidden-lg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.hidden-xlg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=styles.css.map */
|
||||
@ -0,0 +1 @@
|
||||
(self.webpackChunk_spd_minden_sozi_ui=self.webpackChunk_spd_minden_sozi_ui||[]).push([["spritemap"],{"?4e0c":()=>{eval("\n\n//# sourceURL=webpack://@spd-minden/sozi-ui/spritemap-dummy-module?")}}]);
|
||||
@ -0,0 +1,73 @@
|
||||
/**
|
||||
* functions
|
||||
*
|
||||
*
|
||||
* @author Björn Hase, me@herr-hase.wtf
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* strip unit from value
|
||||
*
|
||||
* @param {mixed} $value
|
||||
* @return {number}
|
||||
*
|
||||
*/
|
||||
@function strip-unit($value)
|
||||
{
|
||||
@return $value / ($value * 0 + 1);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
* https://css-tricks.com/snippets/sass/str-replace-function/
|
||||
*
|
||||
*/
|
||||
@function str-replace($string, $search, $replace: '')
|
||||
{
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* get value of key "default" in map
|
||||
*
|
||||
* @param {map} $value
|
||||
* @return {boolean|unit}
|
||||
*
|
||||
*/
|
||||
@function get-default($map)
|
||||
{
|
||||
$default: false;
|
||||
|
||||
@if map-has-key($map, 'default') {
|
||||
$default: map-get($map, 'default');
|
||||
}
|
||||
|
||||
@return $default;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* factor
|
||||
*
|
||||
*
|
||||
*
|
||||
* @param {integer} $x
|
||||
* @return {float}
|
||||
*
|
||||
*/
|
||||
@function factor($x)
|
||||
{
|
||||
@return ($x * $x) / 2;
|
||||
}
|
||||
@ -0,0 +1,249 @@
|
||||
/**
|
||||
* mixins
|
||||
*
|
||||
*
|
||||
* @author Björn Hase, me@herr-hase.wtf
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Clear Floats
|
||||
*
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin clearfix() {
|
||||
&::before,
|
||||
&::after {
|
||||
display: table;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* clear styles from list
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin clearlist() {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* media-queries as mixins
|
||||
* based on breakpoints from variables
|
||||
*
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin media-xs() {
|
||||
@media only screen and (min-width: $grid__xs) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media-sm() {
|
||||
@media only screen and (min-width: $grid__sm) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media-md() {
|
||||
@media only screen and (min-width: $grid__md) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media-lg() {
|
||||
@media only screen and (min-width: $grid__lg) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media-xlg() {
|
||||
@media only screen and (min-width: $grid__xlg) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media-xxs-only() {
|
||||
@media only screen and (max-width: $grid__xs) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media-xxs-only() {
|
||||
@media only screen and (max-width: $grid__xs - 1) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media-xs-only() {
|
||||
@media only screen and (min-width: $grid__xs) and (max-width: $grid__sm - 1) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media-sm-only() {
|
||||
@media only screen and (min-width: $grid__sm) and (max-width: $grid__md - 1) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media-md-only() {
|
||||
@media only screen and (min-width: $grid__md) and (max-width: $grid__lg - 1) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media-lg-only() {
|
||||
@media only screen and (min-width: $grid__lg) and (max-width: $grid__xlg - 1) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media-xlg-only() {
|
||||
@media only screen and (min-width: $grid__xlg) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Set property and his value for each Breakpoint
|
||||
*
|
||||
* (
|
||||
* $md: 10px
|
||||
* )
|
||||
*
|
||||
*
|
||||
* @param {css} $property
|
||||
* @param {map} $breakpoints
|
||||
* @param {Boolean} $important [false]
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin breakpoints($property, $breakpoints, $important: false) {
|
||||
@each $breakpoint, $value in $breakpoints {
|
||||
@media only screen and (min-width: $breakpoint) {
|
||||
@if $important == false {
|
||||
#{$property}: $value;
|
||||
} @else {
|
||||
#{$property}: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin media-breakpoints($property, $breakpoints, $important: false) {
|
||||
@each $breakpoint, $value in $breakpoints {
|
||||
@media only screen and (min-width: $breakpoint) {
|
||||
@if $important == false {
|
||||
#{$property}: $value;
|
||||
} @else {
|
||||
#{$property}: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Set property and his value with an factor for each Breakpoint
|
||||
*
|
||||
* (
|
||||
* $md: 10px
|
||||
* )
|
||||
*
|
||||
* @param {css} $property
|
||||
* @param {number} $factor
|
||||
* @param {map} $breakpoints
|
||||
* @param {Boolean} $important [false]
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin breakpoints-calculate($property, $factor, $breakpoints, $important: false) {
|
||||
@each $breakpoint, $value in $breakpoints {
|
||||
@media only screen and (min-width: $breakpoint) {
|
||||
@if $important == false {
|
||||
#{$property}: ($value * $factor);
|
||||
} @else {
|
||||
#{$property}: ($value * $factor) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set font-size from Breakpoints, use for calculating difference from font-size and default font-size
|
||||
*
|
||||
* (
|
||||
* $md: 1rem
|
||||
* )
|
||||
*
|
||||
* @param {map} $breakpoints
|
||||
* @param {unit} $font-size
|
||||
* @param {unit} $default
|
||||
* @param {Boolean} $important [false]
|
||||
*
|
||||
*/
|
||||
@mixin breakpoints-font-size($breakpoints, $font-size, $default, $important: false) {
|
||||
@each $breakpoint, $value in $breakpoints {
|
||||
|
||||
// getting diff
|
||||
$factor: (stripUnit($font-size) - stripUnit($default)) + 1;
|
||||
|
||||
// ignore if factor is zero
|
||||
@if $factor > 0 {
|
||||
@media only screen and (min-width: $breakpoint) {
|
||||
@if $important == false {
|
||||
font-size: ($value * $factor);
|
||||
} @else {
|
||||
font-size: ($value * $factor) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* adding overlay with z-index and color
|
||||
*
|
||||
* @param {z-index}
|
||||
* @param {color}
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin overlay($z-index: 0, $color: transparent) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: #{$color};
|
||||
transition: background-color 0.5s;
|
||||
z-index: #{$z-index};
|
||||
|
||||
content: '';
|
||||
}
|
||||
@ -0,0 +1,155 @@
|
||||
/**
|
||||
* variables
|
||||
*
|
||||
*
|
||||
*
|
||||
* @author Björn Hase, me@herr-hase.wtf
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* grid
|
||||
*
|
||||
*/
|
||||
|
||||
$grid__columns: 12 !default; // number of columns
|
||||
|
||||
$grid__xs: 576px !default;
|
||||
$grid__sm: 768px !default;
|
||||
$grid__md: 992px !default;
|
||||
$grid__lg: 1200px !default;
|
||||
$grid__xlg: 1600px !default;
|
||||
|
||||
$grid__xxs-max: ($grid__xs - 1);
|
||||
$grid__xs-max: ($grid__sm - 1);
|
||||
$grid__sm-max: ($grid__md - 1);
|
||||
$grid__md-max: ($grid__lg - 1);
|
||||
$grid__lg-max: ($grid__xlg - 1);
|
||||
|
||||
$grid__breakpoints: (
|
||||
xxs: 0px,
|
||||
xs: $grid__xs,
|
||||
sm: $grid__sm,
|
||||
md: $grid__md,
|
||||
lg: $grid__lg,
|
||||
xlg: $grid__xlg
|
||||
);
|
||||
|
||||
$grid__spacing: 15px !default;
|
||||
|
||||
// Custom properties so others can reference the variables.
|
||||
:root {
|
||||
--grid-columns: #{ $grid__columns };
|
||||
--grid-grid-spacing: #{ $grid__spacing };
|
||||
--grid-xs: #{ $grid__xs };
|
||||
--grid-sm: #{ $grid__sm };
|
||||
--grid-md: #{ $grid__md };
|
||||
--grid-lg: #{ $grid__lg };
|
||||
--grid-xlg: #{ $grid__xlg };
|
||||
--grid-xxs-max: #{ $grid__xxs-max };
|
||||
--grid-xs-max: #{ $grid__xs-max };
|
||||
--grid-sm-max: #{ $grid__sm-max };
|
||||
--grid-md-max: #{ $grid__md-max };
|
||||
--grid-lg-max: #{ $grid__lg-max };
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* fonts
|
||||
*
|
||||
*/
|
||||
|
||||
$direction: ltr !default;
|
||||
|
||||
$font-family: 'Open Sans', sans-serif !default;
|
||||
$font-weight: normal !default;
|
||||
|
||||
$font-size: 0.9rem !default;
|
||||
$font-size-breakpoints: (
|
||||
$grid__md: 1rem
|
||||
) !default;
|
||||
|
||||
$font-sizes: (
|
||||
'default': $font-size,
|
||||
'small' : $font-size * 0.75,
|
||||
'medium' : $font-size * 1.5,
|
||||
'large' : $font-size * 2,
|
||||
'big' : $font-size * 3
|
||||
) !default;
|
||||
|
||||
$line-height: 1.618;
|
||||
$line-height__breakpoints: (
|
||||
$grid__md: 1.8
|
||||
) !default;
|
||||
|
||||
|
||||
/**
|
||||
* colors
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
$color__white: #ffffff !default;
|
||||
$color__black: #212121 !default;
|
||||
|
||||
$color__primary: #e3000f !default;
|
||||
$color__active: $color__primary !default;
|
||||
$color__brand: $color__primary !default;
|
||||
$color__grey-very-light: #efefef !default;
|
||||
$color__grey: #e4e4e4 !default;
|
||||
$color__grey-medium: #bbb !default;
|
||||
|
||||
$color__body: #fff !default;
|
||||
$color__text: #333 !default;
|
||||
|
||||
$color__border: $color__primary !default;
|
||||
$color__heading: $color__primary !default;
|
||||
|
||||
$colors: (
|
||||
'--body': $color__body,
|
||||
'--text': $color__text,
|
||||
'--primary': $color__primary,
|
||||
'--brand': $color__primary,
|
||||
'--active': $color__active,
|
||||
'--link': $color__active,
|
||||
'--border': $color__border,
|
||||
'--grey-very-light': $color__grey-very-light,
|
||||
'--grey-medium': $color__grey-medium,
|
||||
'--grey': $color__grey,
|
||||
'--white': $color__white
|
||||
) !default;
|
||||
|
||||
/**
|
||||
* margin
|
||||
*
|
||||
*/
|
||||
|
||||
$margin: 0 0 1rem !default;
|
||||
$margin-breakpoints: (
|
||||
$grid__md: 0 0 1.2rem
|
||||
) !default;
|
||||
|
||||
|
||||
/**
|
||||
* padding
|
||||
*
|
||||
*/
|
||||
|
||||
$padding: 0.6rem 0.8rem !default;
|
||||
$padding-breakpoints: (
|
||||
$grid__md: 0.7rem 1rem 0.9rem
|
||||
) !default;
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
$border: 1px solid $color__border;
|
||||
$border-radius: 0;
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
/**
|
||||
*
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
.sozi-button {
|
||||
border-radius: 2.5rem;
|
||||
height: auto;
|
||||
padding: .625rem 1.875rem;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
.sozi-card {
|
||||
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
.sozi-events {
|
||||
&__item {
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
.sozi-ui__footer {
|
||||
background-color: var(--grey-very-light);
|
||||
border-top: 15px solid var(--grey);
|
||||
|
||||
&-menu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid var(--grey-medium);
|
||||
padding: 0 0 2px;
|
||||
margin-bottom: 7px;
|
||||
|
||||
a {
|
||||
color: var(--black);
|
||||
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,49 @@
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
.sozi-ui__header {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
border-bottom: 200px solid var(--primary);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-content {
|
||||
margin-top: 1em;
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
background: var(--grey-very-light);
|
||||
max-width: 800px;
|
||||
font-size: 1.25rem;
|
||||
padding: 2em;
|
||||
|
||||
&:before {
|
||||
font-size: 20rem;
|
||||
content: "\201C";
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
line-height: 0.4;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
font-size: 20rem;
|
||||
content: "\201D";
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: -120px;
|
||||
line-height: 0.4;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
.sozi-ui__menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&-start {
|
||||
|
||||
}
|
||||
|
||||
&-logo {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
&-item {
|
||||
color: var(--text);
|
||||
font-weight: bold;
|
||||
padding: 0.25em 0 0.25em;
|
||||
margin-top: -0.25em;
|
||||
margin-left: 1em;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&--current, &:hover {
|
||||
color: var(--active);
|
||||
border-color: var(--active);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
.sozi-ui__panel {
|
||||
padding: 3em;
|
||||
|
||||
&--primary {
|
||||
background-color: var(--primary);
|
||||
padding: 1.75em 2em;
|
||||
|
||||
p, h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
.sozi-topics {
|
||||
&__item {
|
||||
border-bottom: 1px solid var(--primary);
|
||||
padding-bottom: 1.25em;
|
||||
margin-bottom: 1.25em;
|
||||
|
||||
@include media-sm() {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&-media {
|
||||
line-height: 0;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
|
||||
@include media-sm() {
|
||||
order: 0;
|
||||
|
||||
img {
|
||||
max-width: 200px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-body {
|
||||
@include media-sm() {
|
||||
margin-left: 1.25em;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-top: 0;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&--odd {
|
||||
.sozi-topics__item-media {
|
||||
@include media-sm() {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.sozi-topics__item-body {
|
||||
@include media-sm() {
|
||||
margin-left: 0;
|
||||
margin-right: 1.25em;
|
||||
order: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,151 @@
|
||||
/**
|
||||
* Content
|
||||
*
|
||||
*
|
||||
* @author Björn Hase, me@herr-hase.wtf
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||||
*
|
||||
*/
|
||||
|
||||
.content {
|
||||
|
||||
// paragraphs
|
||||
p {
|
||||
margin: $margin;
|
||||
@include media-breakpoints('margin', $margin-breakpoints);
|
||||
}
|
||||
|
||||
// Semantic text elements
|
||||
a,
|
||||
ins,
|
||||
u {
|
||||
text-decoration-skip: ink edges;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// Add the correct font weight in Chrome, Edge, and Safari.
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
// 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: 70%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
cursor: help;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.25rem;
|
||||
background-color: var(--warning);
|
||||
}
|
||||
|
||||
/**
|
||||
* blockquote
|
||||
*
|
||||
*
|
||||
*/
|
||||
blockquote {
|
||||
border-left: $border;
|
||||
margin-left: 0;
|
||||
padding: $padding;
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* lists
|
||||
*
|
||||
*/
|
||||
dl,
|
||||
ol,
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: $margin;
|
||||
@include media-breakpoints('margin', $margin-breakpoints);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul {
|
||||
margin-top: 0;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal outside;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: square outside;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
dd,
|
||||
dt {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre;
|
||||
display: block;
|
||||
|
||||
color: var(--text-contrast);
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
border: $border;
|
||||
border-radius: $border-radius;
|
||||
background-color: var(--background);
|
||||
|
||||
margin: $margin;
|
||||
@include media-breakpoints('margin', $margin-breakpoints);
|
||||
|
||||
padding: $padding;
|
||||
@include media-breakpoints('padding', $padding-breakpoints);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,83 @@
|
||||
/**
|
||||
* Heading
|
||||
*
|
||||
*
|
||||
* @author Björn Hase, me@herr-hase.wtf
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* add font-size for heading as class and element
|
||||
*
|
||||
*
|
||||
*/
|
||||
@mixin heading-font-size($h, $font-size)
|
||||
{
|
||||
#{$h}, .#{$h} {
|
||||
font-size: $font-size;
|
||||
}
|
||||
}
|
||||
|
||||
$heading__font-sizes: (
|
||||
'h1': 2.5rem,
|
||||
'h2': 2rem,
|
||||
'h3': 1.75rem,
|
||||
'h4': 1.5rem,
|
||||
'h5': 1.25rem,
|
||||
'h6': 1rem
|
||||
) !default;
|
||||
|
||||
$heading__font-sizes-breakpoints: (
|
||||
$grid__md: (
|
||||
'h1': 3rem,
|
||||
'h2': 2.75rem,
|
||||
'h3': 2rem,
|
||||
'h4': 1.75rem,
|
||||
'h5': 1.5rem,
|
||||
'h6': 1.2rem
|
||||
)
|
||||
) !default;
|
||||
|
||||
$heading__font-weight: bold!default;
|
||||
$heading__font-family: $font-family !default;
|
||||
|
||||
$heading__line-height: 1.2 !default;
|
||||
|
||||
$heading__margin: $margin !default;
|
||||
$heading__margin-breakpoints: margin-breakpoints !default;
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3,
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
font-family: $heading__font-family;
|
||||
font-weight: $heading__font-weight;
|
||||
line-height: $heading__line-height;
|
||||
color: $color__heading;
|
||||
|
||||
margin: $heading__margin;
|
||||
@include breakpoints('margin', $heading__margin-breakpoints);
|
||||
|
||||
&.highlight {
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
||||
// adding font-size for each
|
||||
@each $h, $font-size in $heading__font-sizes {
|
||||
@include heading-font-size($h, $font-size);
|
||||
}
|
||||
|
||||
// adding breakpoints for each breakpoint and each heading
|
||||
@each $breakpoint, $headings in $heading__font-sizes-breakpoints {
|
||||
@media only screen and (min-width: $breakpoint) {
|
||||
@each $h, $font-size in $headings {
|
||||
@include heading-font-size($h, $font-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,205 @@
|
||||
/**
|
||||
* normalize
|
||||
*
|
||||
* Thanks to https://necolas.github.io/normalize.css/, use a lot from them
|
||||
*
|
||||
* @author Björn Hase, me@herr-hase.wtf
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||||
*
|
||||
*/
|
||||
|
||||
:root {
|
||||
@each $var, $color in $colors {
|
||||
#{$var}: $color;
|
||||
}
|
||||
--font-family: #{$font-family};
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
line-height: 1.15; // Correct the line height in all browsers.
|
||||
-webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in iOS.
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html,
|
||||
legend {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
color: var(--text);
|
||||
|
||||
background-color: var(--body);
|
||||
direction: $direction;
|
||||
|
||||
font-size: $font-size;
|
||||
@include media-breakpoints('font-size', $font-size-breakpoints);
|
||||
|
||||
line-height: $line-height;
|
||||
//@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
transition: color 0.5s;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--link-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
display: block; // Render the `main` element consistently in IE.
|
||||
}
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* form elements
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
// Remove the margin in Firefox and Safari.
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: $margin;
|
||||
}
|
||||
|
||||
// Remove the inheritance of text transform in Firefox
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
// Correct the inability to style clickable types in iOS and Safari.
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"],
|
||||
button {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
// Remove the inner border and padding in Firefox.
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner,
|
||||
button::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Restore the focus styles unset by the previous rule.
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring,
|
||||
button:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; //Correct the text wrapping in Edge and IE.
|
||||
display: table; // Correct the text wrapping in Edge and IE.
|
||||
max-width: 100%; // Correct the text wrapping in Edge and IE.
|
||||
padding: 0; // Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
|
||||
white-space: normal; // Correct the text wrapping in Edge and IE.
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; // Correct the odd appearance in Chrome and Safari.
|
||||
outline-offset: -2px; // Correct the outline style in Safari.
|
||||
}
|
||||
|
||||
// Remove the inner padding in Chrome and Safari on macOS.
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; // Correct the inability to style clickable types in iOS and Safari.
|
||||
font: inherit; // Change font properties to `inherit` in Safari.
|
||||
}
|
||||
|
||||
/**
|
||||
* hr
|
||||
*
|
||||
*/
|
||||
hr {
|
||||
box-sizing: content-box; // Add the correct box sizing in Firefox.
|
||||
height: 0; // Add the correct box sizing in Firefox.
|
||||
overflow: visible; // Show the overflow in Edge and IE.
|
||||
border: 0;
|
||||
border-top: 1px solid var(--border);
|
||||
margin: $margin;
|
||||
}
|
||||
|
||||
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
// Add the correct display in Firefox.
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Add the correct display in all browsers.
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: var(--font-family);
|
||||
font-size: $font-size;
|
||||
// @TODO
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
/**
|
||||
* colors
|
||||
*
|
||||
*
|
||||
* @author Björn Hase, me@herr-hase.wtf
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||||
*
|
||||
*/
|
||||
|
||||
@each $name, $color in $colors {
|
||||
$class: str-replace($name, '--', '');
|
||||
|
||||
.color-#{$class} {
|
||||
color: var(#{$name});
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $colors {
|
||||
$class: str-replace($name, '--', '');
|
||||
|
||||
.border-color-#{$class} {
|
||||
border-color: var(#{$name});
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $colors {
|
||||
$class: str-replace($name, '--', '');
|
||||
|
||||
.bg-color-#{$class} {
|
||||
background-color: var(#{$name});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,117 @@
|
||||
/**
|
||||
* core
|
||||
*
|
||||
*
|
||||
* @author Björn Hase, me@herr-hase.wtf
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||||
*
|
||||
*/
|
||||
|
||||
.border {
|
||||
border: $border;
|
||||
}
|
||||
|
||||
.border-round {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.border-0 {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.radius-0 {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.round {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/**
|
||||
* floating
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.float-none {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.centered {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
/**
|
||||
* position
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
.absolute {
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
.vertical-align-bottom {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.vertical-align-top {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.vertical-align-baseline {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
.overflow-x-hidden {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.overflow-y-hidden {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.object-fit-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
.justify-content-center {
|
||||
justify-content: center;
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('/fonts/OpenSans-Italic.eot');
|
||||
src: url('/fonts/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
|
||||
url('/fonts/OpenSans-Italic.woff2') format('woff2'),
|
||||
url('/fonts/OpenSans-Italic.woff') format('woff'),
|
||||
url('/fonts/OpenSans-Italic.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('/fonts/OpenSans-Regular.eot');
|
||||
src: url('/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('/fonts/OpenSans-Regular.woff2') format('woff2'),
|
||||
url('/fonts/OpenSans-Regular.woff') format('woff'),
|
||||
url('/fonts/OpenSans-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('/fonts/OpenSans-Bold.eot');
|
||||
src: url('/fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('/fonts/OpenSans-Bold.woff2') format('woff2'),
|
||||
url('/fonts/OpenSans-Bold.woff') format('woff'),
|
||||
url('/fonts/OpenSans-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @author Björn Hase, me@herr-hase.wtf
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||||
*
|
||||
*/
|
||||
|
||||
.object-contain {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.object-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.object-fill {
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.object-none {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
.object-scale-down {
|
||||
object-fit: scale-down;
|
||||
}
|
||||
@ -0,0 +1,105 @@
|
||||
/**
|
||||
* Sizing
|
||||
*
|
||||
* Width and Height Classes,
|
||||
* Sizes with percentage will calculate with the Reflex Grid
|
||||
*
|
||||
* @author Björn Hase, me@herr-hase.wtf
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||||
*
|
||||
*/
|
||||
|
||||
$sizing_steps: 99 !default;
|
||||
|
||||
/**
|
||||
* mixin: sizing
|
||||
*
|
||||
*/
|
||||
@mixin sizing($class, $style, $i, $value)
|
||||
{
|
||||
.#{$class}-#{$i} {
|
||||
#{$style}: $value;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* mixin: sizing for each breakpoint
|
||||
*
|
||||
*
|
||||
*/
|
||||
@mixin sizing_breakpoints($class, $style, $i, $value)
|
||||
{
|
||||
@include media-xs() {
|
||||
@include sizing($class, $style, 'xs-' + $i, $value);
|
||||
}
|
||||
|
||||
@include media-sm() {
|
||||
@include sizing($class, $style, 'sm-' + $i, $value);
|
||||
}
|
||||
|
||||
@include media-md() {
|
||||
@include sizing($class, $style, 'md-' + $i, $value);
|
||||
}
|
||||
|
||||
@include media-lg() {
|
||||
@include sizing($class, $style, 'lg-' + $i, $value);
|
||||
}
|
||||
|
||||
@include media-xlg() {
|
||||
@include sizing($class, $style, 'xlg-' + $i, $value);
|
||||
}
|
||||
}
|
||||
|
||||
.w-0 { width: 0; }
|
||||
@include sizing_breakpoints('w', 'width', '1', 0);
|
||||
|
||||
.h-0 { height: 0; }
|
||||
@include sizing_breakpoints('h', 'height', '1', 0);
|
||||
|
||||
.w-1 { width: 1px;}
|
||||
@include sizing_breakpoints('w', 'width', '1', 1px);
|
||||
|
||||
.h-1 { height: 1px; }
|
||||
@include sizing_breakpoints('h', 'height', '1', 1px);
|
||||
|
||||
.w-100 { width: 100%; }
|
||||
@include sizing_breakpoints('w', 'width', '100', 100%);
|
||||
|
||||
.w-auto { width: auto; }
|
||||
@include sizing_breakpoints('w', 'width', 'auto', auto);
|
||||
|
||||
.h-100 { height: 100%; }
|
||||
@include sizing_breakpoints('h', 'height', '100', 100%);
|
||||
|
||||
.h-auto { height: auto; }
|
||||
@include sizing_breakpoints('h', 'height', 'auto', auto);
|
||||
|
||||
@for $i from 1 through $grid__columns
|
||||
{
|
||||
$value: percentage(($i / $grid__columns));
|
||||
|
||||
@include sizing('w-col', 'width', $i, $value);
|
||||
@include sizing_breakpoints('w-col', 'width', $i, $value);
|
||||
|
||||
$value: percentage(($i / $grid__columns));
|
||||
|
||||
@include sizing('h-col', 'height', $i, $value);
|
||||
@include sizing_breakpoints('h-col', 'height', $i, $value);
|
||||
}
|
||||
|
||||
@for $i from 1 through $sizing_steps
|
||||
{
|
||||
$value: #{($i * 0.5)}rem;
|
||||
|
||||
@include sizing('w', 'width', $i, $value);
|
||||
@include sizing_breakpoints('w', 'width', $i, $value);
|
||||
}
|
||||
|
||||
@for $i from 1 through $sizing_steps
|
||||
{
|
||||
$value: #{($i * 0.5)}rem;
|
||||
|
||||
@include sizing('h', 'height', $i, $value);
|
||||
@include sizing_breakpoints('h', 'height', $i, $value);
|
||||
}
|
||||
@ -0,0 +1,154 @@
|
||||
/**
|
||||
* Spacing
|
||||
*
|
||||
* creates margin and padding for each direction and for each breakpont
|
||||
*
|
||||
* @author Björn Hase, me@herr-hase.wtf
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||||
*
|
||||
*/
|
||||
|
||||
$spacing-direction: (
|
||||
'top',
|
||||
'bottom',
|
||||
'left',
|
||||
'right'
|
||||
) !default;
|
||||
|
||||
$spacing-gap: 0.25 !default;
|
||||
$spacing-steps: 10 !default;
|
||||
|
||||
|
||||
/**
|
||||
* mixin: spacing for single padding or margin
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin spacing($class, $style, $name, $value, $direction: null)
|
||||
{
|
||||
@if ($direction != null) {
|
||||
$class: $class + '-' + $direction;
|
||||
$style: $style + '-' + $direction;
|
||||
}
|
||||
|
||||
.#{$class}-#{$name} {
|
||||
#{$style}: $value;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* mixin: spacing for each breakpoint
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin spacing_breakpoints($class, $style, $i, $value, $direction: null)
|
||||
{
|
||||
@include media-xs() {
|
||||
@include spacing($class, $style, 'xs-' + $i, $value, $direction);
|
||||
}
|
||||
|
||||
@include media-sm() {
|
||||
@include spacing($class, $style, 'sm-' + $i, $value, $direction);
|
||||
}
|
||||
|
||||
@include media-md() {
|
||||
@include spacing($class, $style, 'md-' + $i, $value, $direction);
|
||||
}
|
||||
|
||||
@include media-lg() {
|
||||
@include spacing($class, $style, 'lg-' + $i, $value, $direction);
|
||||
}
|
||||
|
||||
@include media-xlg() {
|
||||
@include spacing($class, $style, 'xlg-' + $i, $value, $direction);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
.marginless {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.paddingless {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.m-last-child-0 {
|
||||
> *:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.m-top-last-child-0 {
|
||||
> *:last-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.m-bottom-last-child-0 {
|
||||
> *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.m-top--1 {
|
||||
margin-top: -0.25em;
|
||||
}
|
||||
|
||||
@include spacing('m', 'margin', 0, 0);
|
||||
@include spacing('m', 'margin', 1, 1px);
|
||||
|
||||
@for $i from 2 through $spacing-steps {
|
||||
$value: $spacing-gap * factor($i - 1) * 1rem;
|
||||
@include spacing('m', 'margin', $i, $value);
|
||||
@include spacing_breakpoints('m', 'margin', $i, $value);
|
||||
}
|
||||
|
||||
@each $direction in $spacing-direction
|
||||
{
|
||||
@include spacing('m', 'margin', 0, 0, $direction);
|
||||
@include spacing_breakpoints('m', 'margin', 0, 0, $direction);
|
||||
|
||||
@include spacing('m', 'margin', 1, 1px, $direction);
|
||||
@include spacing_breakpoints('m', 'margin', 1, 1px, $direction);
|
||||
|
||||
@for $i from 2 through $spacing-steps {
|
||||
$value: $spacing-gap * factor($i - 1) * 1rem;
|
||||
@include spacing('m', 'margin', $i, $value, $direction);
|
||||
@include spacing_breakpoints('m', 'margin', $i, $value, $direction);
|
||||
}
|
||||
}
|
||||
|
||||
@include spacing('p', 'padding', 0, 0);
|
||||
@include spacing('p', 'padding', 1, 1px);
|
||||
|
||||
@for $i from 0 through $spacing-steps {
|
||||
$value: $spacing-gap * factor($i - 1) * 1rem;
|
||||
@include spacing('p', 'padding', $i, $value);
|
||||
@include spacing_breakpoints('p', 'padding', $i, $value);
|
||||
}
|
||||
|
||||
@each $direction in $spacing-direction
|
||||
{
|
||||
@include spacing('p', 'padding', 0, 0, $direction);
|
||||
@include spacing_breakpoints('p', 'padding', 0, 0, $direction);
|
||||
|
||||
@include spacing('p', 'padding', 1, 1px, $direction);
|
||||
@include spacing_breakpoints('p', 'padding', 1, 1px, $direction);
|
||||
|
||||
@for $i from 0 through $spacing-steps {
|
||||
$value: $spacing-gap * factor($i - 1) * 1rem;
|
||||
@include spacing('p', 'padding', $i, $value, $direction);
|
||||
@include spacing_breakpoints('p', 'padding', $i, $value, $direction);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,167 @@
|
||||
/**
|
||||
* typography
|
||||
*
|
||||
*
|
||||
* @author Björn Hase, me@herr-hase.wtf
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin media-add-typography($class) {
|
||||
.#{$class} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@include media-xs() {
|
||||
.#{$class}-xs {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-sm() {
|
||||
.#{$class}-sm {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-md() {
|
||||
.#{$class}-md {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-lg() {
|
||||
.#{$class}-lg {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-xlg() {
|
||||
.#{$class}-xlg {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-add-typography('left') {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@include media-add-typography('right') {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@include media-add-typography('center') {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include media-add-typography('justify') {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
@include media-add-typography('uppercase') {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@include media-add-typography('lowercase') {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
@include media-add-typography('crossed') {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
@include media-add-typography('underline') {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@include media-add-typography('capitalize') {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
@include media-add-typography('italic') {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@include media-add-typography('light') {
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
@include media-add-typography('normal') {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@include media-add-typography('medium') {
|
||||
font-weight: medium;
|
||||
}
|
||||
|
||||
@include media-add-typography('bold') {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* font-sizes
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin add-font-size($name, $font-size) {
|
||||
.size-#{$name} {
|
||||
font-size: #{$font-size};
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $font-size in $font-sizes {
|
||||
@include add-font-size($name, $font-size);
|
||||
|
||||
@include media-xs() {
|
||||
@include add-font-size('xs-' + $name, $font-size);
|
||||
}
|
||||
|
||||
@include media-sm() {
|
||||
@include add-font-size('sm-' + $name, $font-size);
|
||||
}
|
||||
|
||||
@include media-md() {
|
||||
@include add-font-size('md-' + $name, $font-size);
|
||||
}
|
||||
|
||||
@include media-lg() {
|
||||
@include add-font-size('lg-' + $name, $font-size);
|
||||
}
|
||||
|
||||
@include media-xlg() {
|
||||
@include add-font-size('xlg-' + $name, $font-size);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* white-space
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
@include media-add-typography('white-space-normal') {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
@include media-add-typography('white-space-nowrap') {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@include media-add-typography('white-space-pre') {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
@include media-add-typography('white-space-preline') {
|
||||
white-space: preline;
|
||||
}
|
||||
|
||||
@include media-add-typography('white-space-preline') {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
@include media-add-typography('white-space-prewrap') {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
@ -0,0 +1,134 @@
|
||||
/**
|
||||
* visibility
|
||||
*
|
||||
*
|
||||
* @author Björn Hase, me@herr-hase.wtf
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* display
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin display($breakpoint, $class, $value)
|
||||
{
|
||||
.display-#{ $class }-#{ $breakpoint } {
|
||||
display: #{ $value };
|
||||
}
|
||||
}
|
||||
|
||||
@mixin display-breakpoints($class, $value)
|
||||
{
|
||||
@include media-xs() {
|
||||
@include display('xs', $class, $value);
|
||||
}
|
||||
|
||||
@include media-sm() {
|
||||
@include display('sm', $class, $value);
|
||||
}
|
||||
|
||||
@include media-md() {
|
||||
@include display('md', $class, $value);
|
||||
}
|
||||
|
||||
@include media-lg() {
|
||||
@include display('lg', $class, $value);
|
||||
}
|
||||
|
||||
@include media-xlg() {
|
||||
@include display('xlg', $class, $value);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.display-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include display-breakpoints('block', 'block');
|
||||
|
||||
.display-inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@include display-breakpoints('inline', 'inline');
|
||||
|
||||
.display-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@include display-breakpoints('inline-block', 'inline-block');
|
||||
|
||||
.display-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@include display-breakpoints('flex', 'flex');
|
||||
|
||||
.display-inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
@include display-breakpoints('inline-flex', 'inline-flex');
|
||||
|
||||
.display-table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
@include display-breakpoints('table', 'table');
|
||||
|
||||
|
||||
/**
|
||||
* for hidden-xs etc, show https://reflexgrid.com/#visibility-helpers
|
||||
*
|
||||
* @TODO full integration of reflexgrid will change this part
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Visibility
|
||||
*
|
||||
*/
|
||||
|
||||
.visibility-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.visibility-visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.visibility-collapse {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Opacity
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
$opacity-steps: 10;
|
||||
|
||||
@for $i from 1 through $opacity-steps {
|
||||
.opacity-#{ $i } {
|
||||
opacity: ($i / 10);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
@import
|
||||
"../../node_modules/reflex-grid/scss/reflex.scss",
|
||||
|
||||
"variables",
|
||||
"functions",
|
||||
"mixins",
|
||||
|
||||
"core/content",
|
||||
"core/normalize",
|
||||
"core/heading",
|
||||
|
||||
"helpers/colors",
|
||||
"helpers/core",
|
||||
"helpers/media",
|
||||
"helpers/sizing",
|
||||
"helpers/spacing",
|
||||
"helpers/typography",
|
||||
"helpers/visibility",
|
||||
"helpers/fonts",
|
||||
|
||||
"components/event",
|
||||
"components/header",
|
||||
"components/panel",
|
||||
"components/menu",
|
||||
"components/topics",
|
||||
"components/footer",
|
||||
"components/card";
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,81 @@
|
||||
<!doctype html>
|
||||
<html lang="de_DE">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>
|
||||
|
||||
</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" href="/css/styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
<div class="menu">
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="sozi-event">
|
||||
<div class="sozi-event__item">
|
||||
<div class="sozi-event__date">
|
||||
<time>
|
||||
<span class="sozi-event__date-day">18.03.</span>
|
||||
<span class="sozi-event__date-year">2024</span>
|
||||
<span class="sozi-event__date-time">18:00 Uhr</span>
|
||||
</time>
|
||||
</div>
|
||||
<div class="sozi-event__content">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
||||
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sozi-event__item">
|
||||
<div class="sozi-event__date">
|
||||
<time>
|
||||
<span class="sozi-event__date-day">18.03.</span>
|
||||
<span class="sozi-event__date-year">2024</span>
|
||||
<span class="sozi-event__date-time">18:00 Uhr</span>
|
||||
</time>
|
||||
</div>
|
||||
<div class="sozi-event__content">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
||||
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sozi-event__item">
|
||||
<div class="sozi-event__date">
|
||||
<time>
|
||||
<span class="sozi-event__date-day">18.03.</span>
|
||||
<span class="sozi-event__date-year">2024</span>
|
||||
<span class="sozi-event__date-time">18:00 Uhr</span>
|
||||
</time>
|
||||
</div>
|
||||
<div class="sozi-event__content">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
||||
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="">
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,68 @@
|
||||
<!doctype html>
|
||||
<html lang="de_DE">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>
|
||||
|
||||
</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" href="/css/styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="sozi-ui__menu">
|
||||
<div class="sozi-ui__menu-start">
|
||||
<a href="/">
|
||||
<img src="/images/logo.svg" class="sozi-ui__menu-logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="sozi-ui__menu-start">
|
||||
<a class="sozi-ui__menu-item" href="#ziele">
|
||||
Ziele
|
||||
</a>
|
||||
<a class="sozi-ui__menu-item" href="#social-media">
|
||||
Social Media
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="sozi-ui__header">
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="sozi-ui__header-media">
|
||||
<img class="w-100" src="/images/1200x600.png" />
|
||||
</div>
|
||||
<div class="sozi-ui__header-content">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
<p>
|
||||
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
||||
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
||||
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="">
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 8.3 KiB |
@ -0,0 +1 @@
|
||||
(self.webpackChunk_spd_minden_sozi_ui=self.webpackChunk_spd_minden_sozi_ui||[]).push([["spritemap"],{"?4e0c":()=>{eval("\n\n//# sourceURL=webpack://@spd-minden/sozi-ui/spritemap-dummy-module?")}}]);
|
||||
@ -0,0 +1,62 @@
|
||||
<!doctype html>
|
||||
<html lang="de_DE">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>
|
||||
|
||||
</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" href="/css/styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="sozi-ui__menu">
|
||||
<div class="sozi-ui__menu-start">
|
||||
<a href="/">
|
||||
<img src="/images/logo.svg" class="sozi-ui__menu-logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="sozi-ui__menu-start">
|
||||
<a class="sozi-ui__menu-item" href="#ziele">
|
||||
Ziele
|
||||
</a>
|
||||
<a class="sozi-ui__menu-item" href="#social-media">
|
||||
Social Media
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="sozi-ui__panel-wrapper">
|
||||
<div class="sozi-ui__panel sozi-ui__panel--primary">
|
||||
<h2 class="m-top--1">
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
|
||||
</h2>
|
||||
<p>
|
||||
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
|
||||
sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="">
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
@ -0,0 +1,134 @@
|
||||
<!doctype html>
|
||||
<html lang="de_DE">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>
|
||||
|
||||
</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" href="/css/styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="sozi-ui__menu">
|
||||
<div class="sozi-ui__menu-start">
|
||||
<a href="/">
|
||||
<img src="/images/logo.svg" class="sozi-ui__menu-logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="sozi-ui__menu-start">
|
||||
<a class="sozi-ui__menu-item" href="#ziele">
|
||||
Soluta
|
||||
</a>
|
||||
<a class="sozi-ui__menu-item" href="#social-media">
|
||||
Doming
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container m-bottom-5">
|
||||
<div class="grid justify-content-center">
|
||||
<div class="col-12 col-md-8">
|
||||
|
||||
<h2 class="h2 center m-bottom-6">
|
||||
eleifend option congue nihil
|
||||
</h2>
|
||||
|
||||
<div class="sozi-topics">
|
||||
<article class="sozi-topics__item">
|
||||
<div class="sozi-topics__item-media">
|
||||
<img src="/images/topics.jpg" />
|
||||
</div>
|
||||
<div class="sozi-topics__item-body">
|
||||
<h3 class="h3 sozi-topics__item-title">
|
||||
nihil imperdiet doming
|
||||
</h3>
|
||||
<div class="content m-bottom-last-child-0">
|
||||
<p>
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
|
||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
|
||||
lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sozi-topics__item sozi-topics__item--odd">
|
||||
<div class="sozi-topics__item-media">
|
||||
<img src="/images/topics.jpg" />
|
||||
</div>
|
||||
<div class="sozi-topics__item-body">
|
||||
<h3 class="sozi-topics__item-title">
|
||||
nihil imperdiet doming
|
||||
</h3>
|
||||
<div class="content m-bottom-last-child-0">
|
||||
<p>
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
|
||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
|
||||
lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sozi-topics__item">
|
||||
<div class="sozi-topics__item-media">
|
||||
<img src="/images/topics.jpg" />
|
||||
</div>
|
||||
<div class="sozi-topics__item-body">
|
||||
<h3 class="sozi-topics__item-title">
|
||||
nihil imperdiet doming
|
||||
</h3>
|
||||
<div class="content m-bottom-last-child-0">
|
||||
<p>
|
||||
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
|
||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
|
||||
lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="sozi-ui__footer">
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12 col-md-4">
|
||||
<ul class="sozi-ui__footer-menu">
|
||||
<li>
|
||||
<a href="#lorem">
|
||||
Aliquip ex ea commodo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#lorem">
|
||||
Aliquip ex ea commodo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#lorem">
|
||||
Aliquip ex ea commodo
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,21 @@
|
||||
const tinyComponentsWebpack = require('@tiny-components/webpack')
|
||||
const riotRules = require('@tiny-components/webpack/rules/riot')
|
||||
const path = require('path')
|
||||
|
||||
module.exports = tinyComponentsWebpack({
|
||||
styles: [ './src/scss/styles.scss' ],
|
||||
}, {
|
||||
destination: path.resolve(process.cwd(), 'templates'),
|
||||
svg: {
|
||||
src: [
|
||||
'./icons/*.svg'
|
||||
]
|
||||
},
|
||||
rules: [ riotRules ],
|
||||
purge: {
|
||||
src: path.join(__dirname, './**'),
|
||||
safelist: {
|
||||
deep: [ /toast/ ]
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in new issue