tentakelfabrik
/
plain-ui
1
0
Fork 0
Code Issues 9 Pull Requests 0 Projects 0 Releases 3 Wiki Activity
Browse Source

adding

release/0.2
Björn 3 years ago
parent
b13b27fecb
commit
1306b883d5
12 changed files with 253 additions and 60 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +33
    -35
      dist/index.html
  2. +138
    -11
      dist/plain-ui.css
  3. +2
    -1
      src/scss/_core.scss
  4. +54
    -0
      src/scss/_functions.scss
  5. +1
    -1
      src/scss/components/_bar.scss
  6. +1
    -2
      src/scss/components/_field.scss
  7. +1
    -1
      src/scss/components/_icon.scss
  8. +7
    -4
      src/scss/components/_slider.scss
  9. +5
    -3
      src/scss/components/_tabs.scss
  10. +2
    -2
      src/scss/core/_heading.scss
  11. +8
    -0
      src/scss/core/helpers/_core.scss
  12. +1
    -0
      src/scss/plain-ui.scss

+ 33
- 35
dist/index.html View File

@ -10,7 +10,7 @@
<link rel="stylesheet" href="plain-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reflex-grid@2.0.4/css/reflex.min.css">
</head>
<body class="home">
<body class="overflow-x-hidden">
<header id="header" class="header">
<div class="container">
@ -321,7 +321,6 @@
<div class="col-12">
<h2>Layout</h2>
</div>
<div class="col-12">
<h2>Slider</h3>
</div>
@ -330,6 +329,38 @@
<div class="slider">
<div class="slider__inner">
<div class="slider__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/600/200" />
@ -337,39 +368,6 @@
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
</div>
</div>
</div>


+ 138
- 11
dist/plain-ui.css View File

@ -15,6 +15,38 @@
font-style: normal;
font-display: swap;
}
/**
* functions
*
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
/**
* strip unit from value
*
* @param {mixed} $value
* @return {number}
*
*/
/**
* get value of key "default" in map
*
* @param {map} $value
* @return {boolean|unit}
*
*/
/**
* factor
*
*
*
* @param {integer} $x
* @return {float}
*
*/
/**
* mixins
*
@ -279,6 +311,90 @@ summary {
display: list-item;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-family: "IBM Plex Mono", sans-serif;
font-weight: bold;
line-height: 1.2;
margin: 0 0 15px;
}
@media only screen and (min-width: 992px) {
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin: 0 0 20px;
}
}
h5 {
line-height: 1.4;
}
h6 {
line-height: 1.4;
}
h1, .h1 {
font-size: 2.5rem;
}
@media only screen and (min-width: 992px) {
h1, .h1 {
font-size: 3rem;
}
}
h2, .h2 {
font-size: 2rem;
}
@media only screen and (min-width: 992px) {
h2, .h2 {
font-size: 2.4rem;
}
}
h3, .h3 {
font-size: 1.75rem;
}
@media only screen and (min-width: 992px) {
h3, .h3 {
font-size: 2.1rem;
}
}
h4, .h4 {
font-size: 1.5rem;
}
@media only screen and (min-width: 992px) {
h4, .h4 {
font-size: 1.8rem;
}
}
h5, .h5 {
font-size: 1.25rem;
}
@media only screen and (min-width: 992px) {
h5, .h5 {
font-size: 1.5rem;
}
}
h6, .h6 {
font-size: 1rem;
}
@media only screen and (min-width: 992px) {
h6, .h6 {
font-size: 1.2rem;
}
}
/**
*
*
@ -590,6 +706,14 @@ body {
*
*
*/
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-y-hidden {
overflow-y: hidden;
}
.badge {
display: inline-block;
background-color: #3e3e3e;
@ -688,8 +812,7 @@ body {
font-family: "IBM Plex Mono", sans-serif;
}
.field-label .icon {
vertical-align: sub;
font-size: 1.1rem;
vertical-align: text-bottom;
}
.field-label:hover {
cursor: pointer;
@ -796,7 +919,7 @@ svg.field-choice__checked {
max-width: 100%;
vertical-align: middle;
overflow: hidden;
font-size: 1.2rem;
font-size: 1.4rem;
fill: #3e3e3e;
}
@ -924,20 +1047,23 @@ img.media {
}
.slider {
display: flex;
position: relative;
overflow-x: visible;
}
.slider__inner {
display: flex;
overflow: hidden;
white-space: nowrap;
}
.slider__item {
flex: none;
width: 33%;
padding: 0 0.6em;
display: inline-block;
white-space: normal;
flex-shrink: 0;
}
.bar {
display: flex;
height: 2.8em;
min-height: 2.8em;
background-color: #3e3e3e;
color: white;
}
@ -963,17 +1089,18 @@ img.media {
}
.tabs {
display: block;
display: flex;
flex-direction: column;
width: 100%;
}
@media only screen and (min-width: 768px) {
.tabs {
display: flex;
width: auto;
flex-direction: row;
}
}
.tabs__item {
height: 100%;
min-height: 2.8em;
display: flex;
align-items: center;
padding: 0 1em;


+ 2
- 1
src/scss/_core.scss View File

@ -14,7 +14,8 @@
'core/typography';
@include plain-ui__core__normalize();
//@include plain__core__heading();
@include plain-ui__core__heading();
//@include plain__core__typography();
@mixin plain-ui__core() {


+ 54
- 0
src/scss/_functions.scss View File

@ -0,0 +1,54 @@
/**
* functions
*
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
/**
* strip unit from value
*
* @param {mixed} $value
* @return {number}
*
*/
@function stripUnit($value) {
@return $value / ($value * 0 + 1);
}
/**
* get value of key "default" in map
*
* @param {map} $value
* @return {boolean|unit}
*
*/
@function getDefault($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;
}

+ 1
- 1
src/scss/components/_bar.scss View File

@ -10,7 +10,7 @@
.bar {
display: flex;
height: 2.8em;
min-height: 2.8em;
background-color: $plain-ui__primary-light;
color: white;


+ 1
- 2
src/scss/components/_field.scss View File

@ -37,8 +37,7 @@
font-family: $plain-ui__font-family;
.icon {
vertical-align: sub;
font-size: 1.1rem;
vertical-align: text-bottom;
}
&:hover {


+ 1
- 1
src/scss/components/_icon.scss View File

@ -16,7 +16,7 @@
vertical-align: middle;
overflow: hidden;
font-size: 1.2rem;
font-size: 1.4rem;
fill: $plain-ui__primary-light;
}


+ 7
- 4
src/scss/components/_slider.scss View File

@ -10,16 +10,19 @@
@mixin plain-ui__component__slider()
{
.slider {
display: flex;
position: relative;
overflow-x: visible;
&__inner {
display: flex;
overflow: hidden;
white-space: nowrap;
}
&__item {
flex: none;
width: 33%;
padding: 0 .6em;
display: inline-block;
white-space: normal;
flex-shrink: 0;
}
}
}

+ 5
- 3
src/scss/components/_tabs.scss View File

@ -7,16 +7,18 @@
@mixin plain-ui__component__tabs()
{
.tabs {
display: block;
display: flex;
flex-direction: column;
width: 100%;
@include plain-ui__media-sm() {
display: flex;
width: auto;
flex-direction: row;
}
&__item {
height: 100%;
min-height: 2.8em;
display: flex;
align-items: center;


+ 2
- 2
src/scss/core/_heading.scss View File

@ -21,7 +21,7 @@
line-height: 1.2;
margin: $plain-ui__heading__margin;
//@include crispy__media-breakpoints('margin', $plain-ui__heading__margin-breakpoints);
@include plain-ui__breakpoints('margin', $plain-ui__heading__margin-breakpoints);
}
h5 {
@ -35,7 +35,7 @@
@each $h, $font-size in $plain-ui__heading__font-sizes {
#{$h}, .#{$h} {
font-size: $font-size;
//@include crispy__media-breakpoints-font-size($plain-ui__heading__font-sizes__breakpoints, $font-size, $plain-ui__font-size);
@include plain-ui__breakpoints-font-size($plain-ui__heading__font-sizes__breakpoints, $font-size, $plain-ui__font-size);
}
}
}

+ 8
- 0
src/scss/core/helpers/_core.scss View File

@ -203,4 +203,12 @@
*
*
*/
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-y-hidden {
overflow-y: hidden;
}
}

+ 1
- 0
src/scss/plain-ui.scss View File

@ -2,6 +2,7 @@
'../fonts/stylesheet',
'functions',
'mixins',
'variables',
'core',


Write Preview
Loading…
Cancel
Save