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

adding new buttons, media

release/0.2
Björn 3 years ago
parent
341e91ebc5
commit
1715db71a5
11 changed files with 459 additions and 41 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +84
    -3
      dist/index.html
  2. +141
    -18
      dist/plain-ui.css
  3. +1
    -1
      src/scss/_variables.scss
  4. +2
    -2
      src/scss/components/_badge.scss
  5. +33
    -14
      src/scss/components/_button.scss
  6. +18
    -0
      src/scss/components/_field.scss
  7. +23
    -0
      src/scss/components/_hero.scss
  8. +43
    -0
      src/scss/components/_media.scss
  9. +39
    -1
      src/scss/components/_table.scss
  10. +67
    -0
      src/scss/components/_table0.scss
  11. +8
    -2
      src/scss/plain-ui.scss

+ 84
- 3
dist/index.html View File

@ -11,6 +11,7 @@
<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="home">
<header id="header" class="header"> <header id="header" class="header">
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
@ -24,6 +25,7 @@
</div> </div>
</div> </div>
</header> </header>
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
@ -38,8 +40,24 @@
<use xlink:href="symbol-defs.svg#icon-check"></use> <use xlink:href="symbol-defs.svg#icon-check"></use>
</svg> </svg>
</button> </button>
<button class="button button--secondary">
Secondary
<button class="button button--danger">
Danger
</button>
</div>
</div>
<div class="grid">
<div class="col-12">
<button class="button" disabled>
Disabled
</button>
</div>
</div>
<div class="grid">
<div class="col-12">
<button class="button button--small">
Small
</button> </button>
</div> </div>
</div> </div>
@ -194,6 +212,69 @@
</div> </div>
</div> </div>
<div class="grid">
<div class="col-12">
<h2>Table</h2>
<table class="table table--striped">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2 class="">Hero</h2>
</div>
</div>
</div>
<div class="hero">
<img style="max-height: 400px;" src="https://picsum.photos/seed/picsum/1200/600" />
</div> </div>
<div class="container">
<div class="grid">
<div class="col-12">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/150" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
</div>
</div>
</body> </body>
</html>
</html

+ 141
- 18
dist/plain-ui.css View File

@ -302,6 +302,26 @@ summary {
* *
* *
*/ */
/**
* <div class="hero">
* <img src="image.png" alt="image" />
* </div>
*
*/
/**
*
*
*
*/
/**
* <figure class="media-figure">
* <img class="media__img" src="https://via.placeholder.com/150" />
* <figcaption class="media-figure__caption">
* food truck yr franzen pabst
* </figcaption>
* </figure>
*
*/
/** /**
* *
* *
@ -337,7 +357,7 @@ body {
color: white; color: white;
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.4em 0.8em; padding: 0.4em 0.8em;
border: 1px solid #242424;
border: 1px solid #3e3e3e;
border-radius: 2px; border-radius: 2px;
} }
.badge--round { .badge--round {
@ -355,14 +375,14 @@ body {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
font-family: "IBM Plex Mono", sans-serif; font-family: "IBM Plex Mono", sans-serif;
border: 1px solid black;
background-color: #3e3e3e;
color: white;
padding: 0.7em 1.5em;
margin-bottom: 0.5em;
font-size: 1.1rem;
border: 1px solid #3e3e3e;
background-color: white;
color: #3e3e3e;
border-radius: 2px; border-radius: 2px;
transition: background-color 0.5s;
transition: background-color 0.1s;
margin-bottom: 0.5em;
padding: 0.5em 1.3em;
font-size: 1rem;
width: 100%; width: 100%;
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
@ -370,14 +390,29 @@ body {
width: auto; width: auto;
} }
} }
.button--small {
font-size: 0.8em;
}
.button:hover { .button:hover {
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
background-color: #575757;
color: white;
background-color: #3e3e3e;
}
.button:disabled {
opacity: 0.5;
}
.button:disabled:hover {
cursor: not-allowed;
border: 1px solid #3e3e3e;
background-color: white;
color: #3e3e3e;
}
.button--danger {
border-color: #d95959;
} }
.button--secondary {
border: 1px solid #4a4a4a;
background-color: #7d7d7d;
.button--danger:hover {
background-color: #d95959;
} }
.field-group { .field-group {
@ -412,22 +447,40 @@ input.field-text, textarea.field-text, select.field-choice {
font-family: "IBM Plex Mono", sans-serif; font-family: "IBM Plex Mono", sans-serif;
font-size: 0.95rem; font-size: 0.95rem;
width: 100%; width: 100%;
border: 1px solid #8a8a8a;
border: 1px solid #a4a4a4;
background-color: white; background-color: white;
border-radius: 2px; border-radius: 2px;
margin: 0.7em 0 0; margin: 0.7em 0 0;
} }
input.field-text:focus, input.field-text:active, textarea.field-text:focus, textarea.field-text:active, select.field-choice:focus, select.field-choice:active { input.field-text:focus, input.field-text:active, textarea.field-text:focus, textarea.field-text:active, select.field-choice:focus, select.field-choice:active {
outline: 0; outline: 0;
border-color: #242424;
border-color: #3e3e3e;
} }
input.field-text, textarea.field-text { input.field-text, textarea.field-text {
padding: 0.8em 1.1em; padding: 0.8em 1.1em;
} }
/**
*
*
*/
select.field-choice { select.field-choice {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0.8em; padding: 0.8em;
position: relative;
}
select.field-choice::after {
position: absolute;
right: 0;
top: 0;
display: block;
content: " ";
width: 10px;
height: 10px;
background: red;
} }
/** /**
@ -466,7 +519,7 @@ input[type=radio].field-choice:checked ~ .field-choice__unchecked {
} }
svg.field-choice__unchecked { svg.field-choice__unchecked {
fill: #8a8a8a;
fill: #a4a4a4;
} }
svg.field-choice__checked { svg.field-choice__checked {
@ -492,7 +545,7 @@ svg.field-choice__checked {
vertical-align: middle; vertical-align: middle;
overflow: hidden; overflow: hidden;
font-size: 1.2rem; font-size: 1.2rem;
fill: #242424;
fill: #3e3e3e;
} }
.icon--success { .icon--success {
@ -504,13 +557,13 @@ svg.field-choice__checked {
} }
.panel { .panel {
border: 1px solid #242424;
border: 1px solid #3e3e3e;
border-radius: 2px; border-radius: 2px;
background: #fff; background: #fff;
} }
.panel__header { .panel__header {
display: flex; display: flex;
background-color: #242424;
background-color: #3e3e3e;
color: white; color: white;
padding: 0.8em 1.2em; padding: 0.8em 1.2em;
line-height: 1.6em; line-height: 1.6em;
@ -544,3 +597,73 @@ svg.field-choice__checked {
.panel__body { .panel__body {
padding: 0.6em 1.2em; padding: 0.6em 1.2em;
} }
.figure {
margin: 0;
display: inline-block;
line-height: 0;
border: 1px solid #3e3e3e;
border-radius: 2px;
overflow: hidden;
}
.figure__caption {
padding: 0.75em 1.1em;
font-size: 0.7rem;
background: #3e3e3e;
line-height: 1.4;
margin: 0;
color: white;
}
.figure img.media {
border: 0;
}
img.media {
border-radius: 2px;
border: 1px solid #3e3e3e;
width: 100%;
height: auto;
}
.table {
width: 100%;
border: 1px solid #cacaca;
background: white;
}
.table--striped tr:nth-child(even) {
background-color: #fdfdfd;
}
.table--scroll {
overflow-x: auto;
}
.table td {
color: #3e3e3e;
}
.table td,
.table th {
text-align: left;
border-bottom: 1px solid #cacaca;
padding: 0.5em 1.25em;
}
.table th {
border-bottom: 1px solid #8b8b8b;
background-color: #e4e4e4;
}
.table tr:hover {
background-color: #e4e4e4;
}
.hero {
position: relative;
}
.hero img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 50% 50%;
object-position: 50% 50%;
}
.hero--contain {
-o-object-fit: contain;
object-fit: contain;
}

+ 1
- 1
src/scss/_variables.scss View File

@ -57,7 +57,7 @@ $plain-ui__line-height__breakpoints: (
* *
*/ */
$plain-ui__primary-light: #242424 !default;
$plain-ui__primary-light: #3e3e3e !default;
$plain-ui__secondary: #b3b2af !default; $plain-ui__secondary: #b3b2af !default;
$plain-ui__success-light: #64ac64 !default; $plain-ui__success-light: #64ac64 !default;
$plain-ui__warning: #f0ad4e !default; $plain-ui__warning: #f0ad4e !default;


+ 2
- 2
src/scss/components/_badge.scss View File

@ -9,7 +9,7 @@
.badge { .badge {
display: inline-block; display: inline-block;
background-color: lighten($plain-ui__primary-light, 10%);
background-color: $plain-ui__primary-light;
color: white; color: white;
font-size: 0.85rem; font-size: 0.85rem;
@ -21,7 +21,7 @@
&--round { &--round {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
width: 2.5em; width: 2.5em;
} }


+ 33
- 14
src/scss/components/_button.scss View File

@ -8,44 +8,63 @@
{ {
.button { .button {
appearance: none; appearance: none;
position: relative; position: relative;
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
font-family: $plain-ui__font-family; font-family: $plain-ui__font-family;
border: 1px solid darken($plain-ui__primary-light, 30%);
background-color: lighten($plain-ui__primary-light, 10%);
color: white;
padding: 0.7em 1.5em;
margin-bottom: 0.5em;
font-size: 1.1rem;
border: 1px solid $plain-ui__primary-light;
background-color: white;
color: $plain-ui__primary-light;
border-radius: 2px; border-radius: 2px;
transition: background-color 0.5s;
transition: background-color 0.1s;
margin-bottom: 0.5em;
padding: 0.5em 1.3em;
font-size: 1rem;
// for mobile
width: 100%; width: 100%;
@include plain-ui__media-sm() { @include plain-ui__media-sm() {
width: auto; width: auto;
} }
&--small {
font-size: 0.8em;
}
&:hover { &:hover {
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
background-color: lighten($plain-ui__primary-light, 20%);
color: white;
background-color: $plain-ui__primary-light;
} }
&:focus, &:active { &:focus, &:active {
} }
&--secondary {
border: 1px solid lighten($plain-ui__primary-light, 15%);
background-color: lighten($plain-ui__primary-light, 35%);
&:disabled {
opacity: 0.5;
&:hover {
cursor: not-allowed;
border: 1px solid $plain-ui__primary-light;
background-color: white;
color: $plain-ui__primary-light;
}
}
&--danger {
border-color: $plain-ui__danger-light;
&:hover {
background-color: $plain-ui__danger-light;
}
} }
} }
} }

+ 18
- 0
src/scss/components/_field.scss View File

@ -68,8 +68,26 @@
padding: 0.8em 1.1em; padding: 0.8em 1.1em;
} }
/**
*
*
*/
select.field-choice { select.field-choice {
appearance: none;
padding: 0.8em; padding: 0.8em;
position: relative;
&::after {
position: absolute;
right: 0;
top: 0;
display: block;
content: " ";
width: 10px;
height: 10px;
background: red;
}
} }
/** /**


+ 23
- 0
src/scss/components/_hero.scss View File

@ -0,0 +1,23 @@
/**
* <div class="hero">
* <img src="image.png" alt="image" />
* </div>
*
*/
@mixin plain-ui__component__hero()
{
.hero {
position: relative;
img {
width: 100%;
object-fit: cover;
object-position: 50% 50%;
}
&--contain {
object-fit: contain;
}
}
}

+ 43
- 0
src/scss/components/_media.scss View File

@ -0,0 +1,43 @@
/**
* <figure class="media-figure">
* <img class="media__img" src="https://via.placeholder.com/150" />
* <figcaption class="media-figure__caption">
* food truck yr franzen pabst
* </figcaption>
* </figure>
*
*/
@mixin plain-ui__component__media()
{
.figure {
margin: 0;
display: inline-block;
line-height: 0;
border: 1px solid $plain-ui__primary-light;
border-radius: 2px;
overflow: hidden;
&__caption {
padding: 0.75em 1.1em;
font-size: 0.7rem;
background: $plain-ui__primary-light;
line-height: $plain-ui__line-height;
margin: 0;
color: white;
}
img.media {
border: 0;
}
}
img.media {
border-radius: 2px;
border: 1px solid $plain-ui__primary-light;
width: 100%;
height: auto;
}
}

+ 39
- 1
src/scss/components/_table.scss View File

@ -4,7 +4,45 @@
* *
*/ */
@mixin component__table()
@mixin plain-ui__component__table()
{ {
.table {
width: 100%;
border: 1px solid lighten($plain-ui__primary-light, 55%);
background: white;
&--striped {
tr {
&:nth-child(even) {
background-color: lighten($plain-ui__primary-light, 75%);
}
}
}
&--scroll {
overflow-x: auto;
}
td {
color: $plain-ui__primary-light;
}
td,
th {
text-align: left;
border-bottom: 1px solid lighten($plain-ui__primary-light, 55%);
padding: 0.5em 1.25em;
//@include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints);
}
th {
border-bottom: 1px solid lighten($plain-ui__primary-light, 30%);
background-color: lighten($plain-ui__primary-light, 65%);
}
tr:hover {
background-color: lighten($plain-ui__primary-light, 65%);
}
}
} }

+ 67
- 0
src/scss/components/_table0.scss View File

@ -0,0 +1,67 @@
/**
* components: table
*
* <table class="table table--striped">
* <thead>
* <tr>
* <th>name</th>
* <th>age</th>
* </tr>
* </thead>
* <tbody>
* <tr>
* <td>The Shawshank Redemption</td>
* <td>12</td>
* </tr>
* </tbody>
* </table>
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
$crispy__table__padding: $crispy__padding !default;
$crispy__table__padding-breakpoints: $crispy__padding-breakpoints !default;
$crispy__table__td__border: 1px solid $crispy__color-border !default;
$crispy__table__th__border-width: 2px !default;
$crispy__table__color: $crispy__color-text !default;
$crispy__table__striped__background-color: $crispy__color-grey-light !default;
@mixin crispy__table() {
.table {
width: 100%;
&--striped {
tr {
&:nth-child(even) {
background-color: $crispy__table__striped__background-color;
}
}
}
&--scroll {
overflow-x: auto;
}
td {
color: $crispy__table__color;
}
td,
th {
text-align: left;
border-bottom: $crispy__table__td__border;
padding: $crispy__table__padding;
@include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints);
}
th {
border-bottom-width: $crispy__table__th__border-width;
}
}
}

+ 8
- 2
src/scss/plain-ui.scss View File

@ -10,7 +10,10 @@
'components/button', 'components/button',
'components/field', 'components/field',
'components/icon', 'components/icon',
'components/panel';
'components/hero',
'components/panel',
'components/media',
'components/table';
@include plain-ui__core(); @include plain-ui__core();
@ -18,4 +21,7 @@
@include plain-ui__component__button(); @include plain-ui__component__button();
@include plain-ui__component__field(); @include plain-ui__component__field();
@include plain-ui__component__icon(); @include plain-ui__component__icon();
@include plain-ui__component__panel();
@include plain-ui__component__panel();
@include plain-ui__component__media();
@include plain-ui__component__table();
@include plain-ui__component__hero();

Write Preview
Loading…
Cancel
Save