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

change colors

Browse Source
release/0.2
Björn 3 years ago
parent abd65612b0
commit 1eb65c4944
7 changed files with 333 additions and 335 deletions
Show Stats Download Patch File Download Diff File

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

@ -1614,12 +1614,14 @@
* *
*/ */
:root { :root {
--primary: #3e3e3e; --primary: #585858;
--primary-active: #585858; --primary-light: #585858;
--primary-dark: #0b0b0b; --primary-active: #717171;
--link: #3e3e3e; --primary-dark: #252525;
--link-hover: #d95959; --link: #585858;
--link-hover: #ecacac;
--danger: #d95959; --danger: #d95959;
--danger-light: #ecacac;
--success: #64ac64; --success: #64ac64;
--white: #ffffff; --white: #ffffff;
--black: #000000; --black: #000000;
@ -1974,7 +1976,7 @@ h6, .h6 {
padding: 0.25em; padding: 0.25em;
} }
.content blockquote { .content blockquote {
border-left: 1px solid #3e3e3e; border-left: 1px solid #585858;
margin-left: 0; margin-left: 0;
padding: 5px 12px; padding: 5px 12px;
} }
@ -2018,13 +2020,106 @@ h6, .h6 {
* A * A
* </span> * </span>
* *
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
* *
*/ */
.badge {
display: inline-block;
background-color: var(--primary);
color: var(--white);
font-size: 0.85rem;
padding: 0.4em 0.8em;
}
.badge--round {
display: inline-flex;
justify-content: center;
border-radius: 50%;
width: 2.5em;
}
/** /**
* *
* *
* *
*/ */
.button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
display: inline-flex;
align-items: center;
text-decoration: none;
font-family: "IBM Plex Mono", sans-serif;
font-size: 1rem;
border: 1px solid var(--primary);
background-color: var(--white);
color: var(--primary);
border-radius: 2px;
transition: background-color 0.1s;
margin-bottom: 0.5em;
padding: 0 1.3em;
min-height: 2.8em;
width: 100%;
}
@media only screen and (min-width: 768px) {
.button {
width: auto;
}
}
.button--small {
font-size: 0.8rem;
}
.button--clearfix {
margin: 0;
padding: 0;
border: none;
background: transparent;
}
.button--clearfix:focus, .button--clearfix:active {
outline: none;
}
.button:hover, .button--selected {
cursor: pointer;
text-decoration: none;
color: white;
background-color: var(--primary-active);
}
.button:focus, .button:active {
outline: 1px solid var(--primary-active);
}
.button:disabled {
opacity: 0.5;
}
.button:disabled:hover {
cursor: not-allowed;
border: 1px solid var(--primary);
background-color: white;
color: var(--primary);
}
.button--danger {
border-color: var(--danger);
}
.button--danger:hover {
background-color: var(--danger);
}
.button--danger:focus, .button--danger:active {
outline: 2px solid var(--primary-active);
}
.button--outline {
background-color: transparent;
}
.button--outline:hover {
color: var(--primary);
border-color: var(--primary-light);
background-color: transparent;
}
.button--danger.button--outline:hover {
border-color: var(--danger-light);
}
/** /**
* *
* *
@ -2103,6 +2198,36 @@ h6, .h6 {
* *
* *
*/ */
.bar {
display: flex;
min-height: 2.8em;
background-color: #585858;
color: var(--white);
}
.bar .icon {
font-size: 1.5rem;
}
.bar__start {
justify-content: start;
}
.bar__main {
flex-grow: 1;
}
.bar__end {
justify-content: end;
}
.bar__start, .bar__main, .bar__end {
display: flex;
align-self: center;
margin-left: 0.75em;
}
.bar__start:last-child, .bar__main:last-child, .bar__end:last-child {
margin-right: 0.75em;
}
.bar .button:active, .bar .button:focus {
outline: none;
}
/** /**
* <figure class="media-figure"> * <figure class="media-figure">
* <img class="media__img" src="https://via.placeholder.com/150" /> * <img class="media__img" src="https://via.placeholder.com/150" />
@ -2183,8 +2308,43 @@ h6, .h6 {
* </div> * </div>
* </div> * </div>
* *
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
* *
*/ */
.masonry {
display: flex;
width: 100%;
flex-flow: row wrap;
}
.masonry__item {
width: 100%;
height: 200px;
padding-left: 1px;
padding-bottom: 1px;
}
@media only screen and (min-width: 768px) {
.masonry__item {
height: 300px;
}
.masonry__item:nth-child(4n+1) {
width: 25%;
}
.masonry__item:nth-child(4n+2) {
width: 55%;
}
.masonry__item:nth-child(4n+3) {
width: 20%;
}
.masonry__item:nth-child(4n+4) {
width: 67%;
}
.masonry__item:nth-child(4n+5) {
width: 33%;
}
}
:root { :root {
--reflex-columns: 12; --reflex-columns: 12;
--reflex-grid-spacing: 15px; --reflex-grid-spacing: 15px;
@ -4586,7 +4746,7 @@ h6, .h6 {
* *
*/ */
.border, .badge { .border, .badge {
border: 1px solid #3e3e3e !important; border: 1px solid #585858 !important;
} }
.border-round, .badge { .border-round, .badge {
@ -4824,94 +4984,6 @@ h6, .h6 {
object-fit: cover; object-fit: cover;
} }
.badge {
display: inline-block;
background-color: var(--primary);
color: white;
font-size: 0.85rem;
padding: 0.4em 0.8em;
}
.badge--round {
display: inline-flex;
justify-content: center;
border-radius: 50%;
width: 2.5em;
}
.button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
display: inline-flex;
align-items: center;
text-decoration: none;
font-family: "IBM Plex Mono", sans-serif;
border: 1px solid #3e3e3e;
background-color: white;
color: #3e3e3e;
border-radius: 2px;
transition: background-color 0.1s;
margin-bottom: 0.5em;
padding: 0 1.3em;
min-height: 2.8em;
font-size: 1rem;
width: 100%;
}
@media only screen and (min-width: 768px) {
.button {
width: auto;
}
}
.button--small {
font-size: 0.8rem;
}
.button--outline {
background-color: transparent;
}
.button--no-style {
margin: 0;
padding: 0;
border: none;
background: transparent;
}
.button:hover, .button--selected {
cursor: pointer;
text-decoration: none;
color: white;
background-color: #585858;
}
.button:focus, .button:active {
outline: 1px solid #646464;
}
.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--danger:hover {
background-color: #d95959;
}
.button--danger:focus, .button--danger:active {
outline: 2px solid #e79797;
}
.button--outline:hover {
color: #3e3e3e;
border-color: #a4a4a4;
background-color: transparent;
}
.button--danger.button--outline:hover {
border-color: #ecacac;
}
.field-group { .field-group {
margin-bottom: 1.2em; margin-bottom: 1.2em;
} }
@ -4922,10 +4994,10 @@ h6, .h6 {
fill: #64ac64; fill: #64ac64;
} }
.field-group--error input.field-text, .field-group--error textarea.field-text { .field-group--error input.field-text, .field-group--error textarea.field-text {
border-color: #d95959; border-color: #ecacac;
} }
.field-group--error .icon { .field-group--error .icon {
fill: #d95959; fill: #ecacac;
} }
.field-label { .field-label {
@ -4943,14 +5015,14 @@ 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 #a4a4a4; border: 1px solid #bebebe;
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: #3e3e3e; border-color: #585858;
} }
input.field-text, textarea.field-text { input.field-text, textarea.field-text {
@ -5015,7 +5087,7 @@ input[type=radio].field-choice:checked ~ .field-choice__unchecked {
} }
svg.field-choice__unchecked { svg.field-choice__unchecked {
fill: #a4a4a4; fill: #bebebe;
} }
svg.field-choice__checked { svg.field-choice__checked {
@ -5030,17 +5102,17 @@ svg.field-choice__checked {
} }
.field-error { .field-error {
color: #d95959; color: #ecacac;
} }
.panel { .panel {
border: 1px solid #3e3e3e; border: 1px solid #585858;
border-radius: 2px; border-radius: 2px;
background: #fff; background: #fff;
} }
.panel__header { .panel__header {
display: flex; display: flex;
background-color: #3e3e3e; background-color: #585858;
color: white; color: white;
padding: 0.8em 1.2em; padding: 0.8em 1.2em;
line-height: 1.6em; line-height: 1.6em;
@ -5079,14 +5151,14 @@ svg.field-choice__checked {
margin: 0; margin: 0;
display: inline-block; display: inline-block;
line-height: 0; line-height: 0;
border: 1px solid #3e3e3e; border: 1px solid #585858;
border-radius: 2px; border-radius: 2px;
overflow: hidden; overflow: hidden;
} }
.figure__caption { .figure__caption {
padding: 0.75em 1.1em; padding: 0.75em 1.1em;
font-size: 0.7rem; font-size: 0.7rem;
background: #3e3e3e; background: #585858;
line-height: 1.618; line-height: 1.618;
margin: 0; margin: 0;
color: white; color: white;
@ -5097,37 +5169,37 @@ svg.field-choice__checked {
img.media { img.media {
border-radius: 2px; border-radius: 2px;
border: 1px solid #3e3e3e; border: 1px solid #585858;
width: 100%; width: 100%;
height: auto; height: auto;
} }
.table { .table {
width: 100%; width: 100%;
border: 1px solid #cacaca; border: 1px solid #e4e4e4;
background: white; background: white;
} }
.table--striped tr:nth-child(even) { .table--striped tr:nth-child(even) {
background-color: #fdfdfd; background-color: white;
} }
.table--scroll { .table--scroll {
overflow-x: auto; overflow-x: auto;
} }
.table td { .table td {
color: #3e3e3e; color: #585858;
} }
.table td, .table td,
.table th { .table th {
text-align: left; text-align: left;
border-bottom: 1px solid #cacaca; border-bottom: 1px solid #e4e4e4;
padding: 0.5em 1.25em; padding: 0.5em 1.25em;
} }
.table th { .table th {
color: white; color: white;
background-color: #3e3e3e; background-color: #585858;
} }
.table tr:hover { .table tr:hover {
background-color: #585858; background-color: #717171;
} }
.table tr:hover td { .table tr:hover td {
color: white; color: white;
@ -5148,36 +5220,6 @@ img.media {
flex-shrink: 0; flex-shrink: 0;
} }
.bar {
display: flex;
min-height: 2.8em;
background-color: #3e3e3e;
color: var(--white);
}
.bar .icon {
font-size: 1.5rem;
}
.bar__start {
justify-content: start;
}
.bar__main {
flex-grow: 1;
}
.bar__end {
justify-content: end;
}
.bar__start, .bar__main, .bar__end {
display: flex;
align-self: center;
margin-left: 0.75em;
}
.bar__start:last-child, .bar__main:last-child, .bar__end:last-child {
margin-right: 0.75em;
}
.bar .button:active {
outline: none;
}
.tabs { .tabs {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -5197,8 +5239,8 @@ img.media {
background-color: white; background-color: white;
transition: background-color 0.1s; transition: background-color 0.1s;
background-color: white; background-color: white;
color: #3e3e3e; color: #585858;
border: 1px solid #3e3e3e; border: 1px solid #585858;
border-bottom-width: 0; border-bottom-width: 0;
width: 100%; width: 100%;
} }
@ -5212,9 +5254,9 @@ img.media {
} }
.tabs__item:hover, .tabs__item--selected { .tabs__item:hover, .tabs__item--selected {
cursor: pointer; cursor: pointer;
background-color: #585858; background-color: #717171;
color: white; color: white;
border-color: #585858; border-color: #717171;
} }
.tabs__item:last-child { .tabs__item:last-child {
border-bottom-width: 1px; border-bottom-width: 1px;
@ -5281,35 +5323,3 @@ img.media {
.modal--open .modal__inner { .modal--open .modal__inner {
transform: scale(1); transform: scale(1);
} }
.masonry {
display: flex;
width: 100%;
flex-flow: row wrap;
}
.masonry__item {
height: 200px;
padding-left: 1px;
padding-bottom: 1px;
width: 100%;
}
@media only screen and (min-width: 768px) {
.masonry__item {
height: 300px;
}
.masonry__item:nth-child(4n+1) {
width: 25%;
}
.masonry__item:nth-child(4n+2) {
width: 55%;
}
.masonry__item:nth-child(4n+3) {
width: 20%;
}
.masonry__item:nth-child(4n+4) {
width: 67%;
}
.masonry__item:nth-child(4n+5) {
width: 33%;
}
}

10
src/scss/_variables.scss
Unescape View File

@ -56,14 +56,16 @@ $plain-ui__line-height__breakpoints: (
* *
*/ */
$plain-ui__primary-light: #3e3e3e !default; $plain-ui__primary: #3e3e3e !default;
$plain-ui__primary-light: lighten($plain-ui__primary, 10%) !default;
$plain-ui__primary-light-active: lighten($plain-ui__primary-light, 10%) !default; $plain-ui__primary-light-active: lighten($plain-ui__primary-light, 10%) !default;
$plain-ui__primary-light-dark: darken($plain-ui__primary-light, 20%) !default; $plain-ui__primary-light-dark: darken($plain-ui__primary-light, 20%) !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;
$plain-ui__danger-light: #d95959 !default; $plain-ui__danger: #d95959 !default;
$plain-ui__danger-light: lighten($plain-ui__danger, 20%);
$plain-ui__info: #0090d4 !default; $plain-ui__info: #0090d4 !default;
$plain-ui__background-light: #f9f9f9 !default; $plain-ui__background-light: #f9f9f9 !default;
@ -79,11 +81,13 @@ $plain-ui__colors: (
:root { :root {
--primary: #{$plain-ui__primary-light}; --primary: #{$plain-ui__primary-light};
--primary-light: #{$plain-ui__primary-light};
--primary-active: #{$plain-ui__primary-light-active}; --primary-active: #{$plain-ui__primary-light-active};
--primary-dark: #{$plain-ui__primary-light-dark}; --primary-dark: #{$plain-ui__primary-light-dark};
--link: #{$plain-ui__primary-light}; --link: #{$plain-ui__primary-light};
--link-hover: #{$plain-ui__danger-light}; --link-hover: #{$plain-ui__danger-light};
--danger: #{$plain-ui__danger-light}; --danger: #{$plain-ui__danger};
--danger-light: #{$plain-ui__danger-light};
--success: #{$plain-ui__success-light}; --success: #{$plain-ui__success-light};
--white: #ffffff; --white: #ffffff;
--black: #000000; --black: #000000;

32
src/scss/components/_badge.scss
Unescape View File

@ -3,29 +3,29 @@
* A * A
* </span> * </span>
* *
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
* *
*/ */
@mixin plain-ui__component__badge() .badge {
{ display: inline-block;
.badge {
display: inline-block;
background-color: var(--primary); background-color: var(--primary);
color: white; color: var(--white);
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.4em 0.8em; padding: 0.4em 0.8em;
@extend .border; @extend .border;
@extend .border-round; @extend .border-round;
&--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;
}
} }
} }

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

@ -5,45 +5,42 @@
* *
*/ */
@mixin plain-ui__component__bar() .bar {
{ display: flex;
.bar {
display: flex;
min-height: 2.8em; min-height: 2.8em;
background-color: $plain-ui__primary-light; background-color: $plain-ui__primary-light;
color: var(--white); color: var(--white);
.icon { .icon {
font-size: 1.5rem; font-size: 1.5rem;
} }
&__start { &__start {
justify-content: start; justify-content: start;
} }
&__main { &__main {
flex-grow: 1; flex-grow: 1;
} }
&__end { &__end {
justify-content: end; justify-content: end;
} }
&__start, &__main, &__end { &__start, &__main, &__end {
display: flex; display: flex;
align-self: center; align-self: center;
margin-left: 0.75em; margin-left: 0.75em;
&:last-child { &:last-child {
margin-right: 0.75em; margin-right: 0.75em;
}
} }
}
.button { .button {
&:active { &:active, &:focus {
outline: none; outline: none;
}
} }
} }
} }

140
src/scss/components/_button.scss
Unescape View File

@ -4,103 +4,95 @@
* *
*/ */
@mixin plain-ui__component__button() .button {
{ appearance: none;
.button { position: relative;
appearance: none;
position: relative;
display: inline-flex;
align-items: center;
text-decoration: none;
font-family: $plain-ui__font-family; display: inline-flex;
align-items: center;
text-decoration: none;
border: 1px solid $plain-ui__primary-light; font-family: $plain-ui__font-family;
background-color: white; font-size: 1rem;
color: $plain-ui__primary-light;
border-radius: $plain-ui__border-radius; border: 1px solid var(--primary);
transition: background-color 0.1s; background-color: var(--white);
color: var(--primary);
margin-bottom: 0.5em; border-radius: $plain-ui__border-radius;
padding: 0 1.3em; transition: background-color 0.1s;
min-height: 2.8em;
font-size: 1rem; margin-bottom: 0.5em;
padding: 0 1.3em;
min-height: 2.8em;
width: 100%;
width: 100%; @include plain-ui__media-sm() {
width: auto;
}
@include plain-ui__media-sm() { &--small {
width: auto; font-size: 0.8rem;
} }
&--small { &--clearfix {
font-size: 0.8rem; margin: 0;
} padding: 0;
border: none;
background: transparent;
&--outline { &:focus, &:active {
background-color: transparent; outline: none;
}
&--no-style {
margin: 0;
padding: 0;
border: none;
background: transparent;
} }
}
&:hover, &--selected { &:hover, &--selected {
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
color: white; color: white;
background-color: $plain-ui__primary-light-active; background-color: var(--primary-active);
} }
&:focus, &:active { &:focus, &:active {
outline: 1px solid lighten($plain-ui__primary-light, 15%); outline: 1px solid var(--primary-active);
} }
&:disabled { &:disabled {
opacity: 0.5; opacity: 0.5;
&:hover { &:hover {
cursor: not-allowed; cursor: not-allowed;
border: 1px solid $plain-ui__primary-light; border: 1px solid var(--primary);
background-color: white; background-color: white;
color: $plain-ui__primary-light; color: var(--primary);
}
} }
} }
}
@mixin plain-ui__component__button-colors() &--danger {
{ border-color: var(--danger);
.button {
&--danger {
border-color: $plain-ui__danger-light;
&:hover { &:hover {
background-color: $plain-ui__danger-light; background-color: var(--danger);
} }
&:focus, &:active { &:focus, &:active {
outline: 2px solid lighten($plain-ui__danger-light, 15%); outline: 2px solid var(--primary-active);
}
} }
}
&--outline {
background-color: transparent;
&--outline { &:hover {
&:hover { color: var(--primary);
color: $plain-ui__primary-light; border-color: var(--primary-light);
border-color: lighten($plain-ui__primary-light, 40%); background-color: transparent;
background-color: transparent;
}
} }
}
&--danger.button--outline { &--danger.button--outline {
&:hover { &:hover {
border-color: lighten($plain-ui__danger-light, 20%); border-color: var(--danger-light);
}
} }
} }
} }

52
src/scss/layout/_masonry.scss
Unescape View File

@ -7,37 +7,41 @@
* </div> * </div>
* </div> * </div>
* *
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
* *
*/ */
@mixin plain-ui__layout__masonry() $plain-ui__masonry_sizes: (
{ 1: 25%,
$plain-ui__masonry_sizes: ( 2: 55%,
1: 25%, 3: 20%,
2: 55%, 4: 67%,
3: 20%, 5: 33%
4: 67%, ) !default;
5: 33%
) !default;
.masonry { $plain-ui__masonry_height: 200px !default;
display: flex; $plain-ui__masonry_height--sm: 300px !default;
width: 100%;
flex-flow: row wrap; .masonry {
display: flex;
width: 100%;
flex-flow: row wrap;
&__item { &__item {
height: 200px; width: 100%;
padding-left: 1px; height: $plain-ui__masonry_height;
padding-bottom: 1px; padding-left: 1px;
width: 100%; padding-bottom: 1px;
@include plain-ui__media-sm() { @include plain-ui__media-sm() {
height: 300px; height: $plain-ui__masonry_height--sm;
@each $index, $size in $plain-ui__masonry_sizes { // add width from data
&:nth-child(4n+#{$index}) { @each $index, $size in $plain-ui__masonry_sizes {
width: #{$size}; &:nth-child(4n+#{$index}) {
} width: #{$size};
} }
} }
} }

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

@ -29,21 +29,12 @@
'helpers/sizing', 'helpers/sizing',
'helpers/spacing'; 'helpers/spacing';
@include plain-ui__helpers__core(); @include plain-ui__helpers__core();
@include plain-ui__component__badge();
@include plain-ui__component__button();
@include plain-ui__component__button-colors();
@include plain-ui__component__field(); @include plain-ui__component__field();
@include plain-ui__component__panel(); @include plain-ui__component__panel();
@include plain-ui__component__media(); @include plain-ui__component__media();
@include plain-ui__component__table(); @include plain-ui__component__table();
@include plain-ui__component__slider(); @include plain-ui__component__slider();
@include plain-ui__component__bar();
@include plain-ui__component__tabs(); @include plain-ui__component__tabs();
@include plain-ui__component__modal(); @include plain-ui__component__modal();
@include plain-ui__layout__masonry();
Write Preview
Loading…
Cancel
Save