tiny-components
/
plain-ui
1
0
Fork 0
Code Issues 13 Pull Requests Projects Releases 5 Wiki Activity

adding

Browse Source
release/0.2
Björn 3 years ago
parent b13b27fecb
commit 1306b883d5
12 changed files with 253 additions and 60 deletions
Show Stats Download Patch File Download Diff File

68
dist/index.html vendored
Unescape View File

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

149
dist/plain-ui.css vendored
Unescape View File

@ -15,6 +15,38 @@
font-style: normal; font-style: normal;
font-display: swap; 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 * mixins
* *
@ -279,6 +311,90 @@ summary {
display: list-item; 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 { .badge {
display: inline-block; display: inline-block;
background-color: #3e3e3e; background-color: #3e3e3e;
@ -688,8 +812,7 @@ body {
font-family: "IBM Plex Mono", sans-serif; font-family: "IBM Plex Mono", sans-serif;
} }
.field-label .icon { .field-label .icon {
vertical-align: sub; vertical-align: text-bottom;
font-size: 1.1rem;
} }
.field-label:hover { .field-label:hover {
cursor: pointer; cursor: pointer;
@ -796,7 +919,7 @@ svg.field-choice__checked {
max-width: 100%; max-width: 100%;
vertical-align: middle; vertical-align: middle;
overflow: hidden; overflow: hidden;
font-size: 1.2rem; font-size: 1.4rem;
fill: #3e3e3e; fill: #3e3e3e;
} }
@ -924,20 +1047,23 @@ img.media {
} }
.slider { .slider {
display: flex; position: relative;
overflow-x: visible;
} }
.slider__inner { .slider__inner {
display: flex; display: flex;
overflow: hidden; white-space: nowrap;
} }
.slider__item { .slider__item {
flex: none; padding: 0 0.6em;
width: 33%; display: inline-block;
white-space: normal;
flex-shrink: 0;
} }
.bar { .bar {
display: flex; display: flex;
height: 2.8em; min-height: 2.8em;
background-color: #3e3e3e; background-color: #3e3e3e;
color: white; color: white;
} }
@ -963,17 +1089,18 @@ img.media {
} }
.tabs { .tabs {
display: block; display: flex;
flex-direction: column;
width: 100%; width: 100%;
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.tabs { .tabs {
display: flex;
width: auto; width: auto;
flex-direction: row;
} }
} }
.tabs__item { .tabs__item {
height: 100%; min-height: 2.8em;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 1em; padding: 0 1em;

3
src/scss/_core.scss
Unescape View File

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

54
src/scss/_functions.scss
Unescape 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;
}

2
src/scss/components/_bar.scss
Unescape View File

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

3
src/scss/components/_field.scss
Unescape View File

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

2
src/scss/components/_icon.scss
Unescape View File

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

11
src/scss/components/_slider.scss
Unescape View File

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

8
src/scss/components/_tabs.scss
Unescape View File

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

4
src/scss/core/_heading.scss
Unescape View File

@ -21,7 +21,7 @@
line-height: 1.2; line-height: 1.2;
margin: $plain-ui__heading__margin; 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 { h5 {
@ -35,7 +35,7 @@
@each $h, $font-size in $plain-ui__heading__font-sizes { @each $h, $font-size in $plain-ui__heading__font-sizes {
#{$h}, .#{$h} { #{$h}, .#{$h} {
font-size: $font-size; 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
src/scss/core/helpers/_core.scss
Unescape View File

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

1
src/scss/plain-ui.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save