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 {
--primary: #3e3e3e;
--primary-active: #585858;
--primary-dark: #0b0b0b;
--link: #3e3e3e;
--link-hover: #d95959;
--primary: #585858;
--primary-light: #585858;
--primary-active: #717171;
--primary-dark: #252525;
--link: #585858;
--link-hover: #ecacac;
--danger: #d95959;
--danger-light: #ecacac;
--success: #64ac64;
--white: #ffffff;
--black: #000000;
@ -1974,7 +1976,7 @@ h6, .h6 {
padding: 0.25em;
}
.content blockquote {
border-left: 1px solid #3e3e3e;
border-left: 1px solid #585858;
margin-left: 0;
padding: 5px 12px;
}
@ -2018,13 +2020,106 @@ h6, .h6 {
* A
* </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">
* <img class="media__img" src="https://via.placeholder.com/150" />
@ -2183,8 +2308,43 @@ h6, .h6 {
* </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 {
--reflex-columns: 12;
--reflex-grid-spacing: 15px;
@ -4586,7 +4746,7 @@ h6, .h6 {
*
*/
.border, .badge {
border: 1px solid #3e3e3e !important;
border: 1px solid #585858 !important;
}
.border-round, .badge {
@ -4824,94 +4984,6 @@ h6, .h6 {
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 {
margin-bottom: 1.2em;
}
@ -4922,10 +4994,10 @@ h6, .h6 {
fill: #64ac64;
}
.field-group--error input.field-text, .field-group--error textarea.field-text {
border-color: #d95959;
border-color: #ecacac;
}
.field-group--error .icon {
fill: #d95959;
fill: #ecacac;
}
.field-label {
@ -4943,14 +5015,14 @@ input.field-text, textarea.field-text, select.field-choice {
font-family: "IBM Plex Mono", sans-serif;
font-size: 0.95rem;
width: 100%;
border: 1px solid #a4a4a4;
border: 1px solid #bebebe;
background-color: white;
border-radius: 2px;
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 {
outline: 0;
border-color: #3e3e3e;
border-color: #585858;
}
input.field-text, textarea.field-text {
@ -5015,7 +5087,7 @@ input[type=radio].field-choice:checked ~ .field-choice__unchecked {
}
svg.field-choice__unchecked {
fill: #a4a4a4;
fill: #bebebe;
}
svg.field-choice__checked {
@ -5030,17 +5102,17 @@ svg.field-choice__checked {
}
.field-error {
color: #d95959;
color: #ecacac;
}
.panel {
border: 1px solid #3e3e3e;
border: 1px solid #585858;
border-radius: 2px;
background: #fff;
}
.panel__header {
display: flex;
background-color: #3e3e3e;
background-color: #585858;
color: white;
padding: 0.8em 1.2em;
line-height: 1.6em;
@ -5079,14 +5151,14 @@ svg.field-choice__checked {
margin: 0;
display: inline-block;
line-height: 0;
border: 1px solid #3e3e3e;
border: 1px solid #585858;
border-radius: 2px;
overflow: hidden;
}
.figure__caption {
padding: 0.75em 1.1em;
font-size: 0.7rem;
background: #3e3e3e;
background: #585858;
line-height: 1.618;
margin: 0;
color: white;
@ -5097,37 +5169,37 @@ svg.field-choice__checked {
img.media {
border-radius: 2px;
border: 1px solid #3e3e3e;
border: 1px solid #585858;
width: 100%;
height: auto;
}
.table {
width: 100%;
border: 1px solid #cacaca;
border: 1px solid #e4e4e4;
background: white;
}
.table--striped tr:nth-child(even) {
background-color: #fdfdfd;
background-color: white;
}
.table--scroll {
overflow-x: auto;
}
.table td {
color: #3e3e3e;
color: #585858;
}
.table td,
.table th {
text-align: left;
border-bottom: 1px solid #cacaca;
border-bottom: 1px solid #e4e4e4;
padding: 0.5em 1.25em;
}
.table th {
color: white;
background-color: #3e3e3e;
background-color: #585858;
}
.table tr:hover {
background-color: #585858;
background-color: #717171;
}
.table tr:hover td {
color: white;
@ -5148,36 +5220,6 @@ img.media {
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 {
display: flex;
flex-direction: column;
@ -5197,8 +5239,8 @@ img.media {
background-color: white;
transition: background-color 0.1s;
background-color: white;
color: #3e3e3e;
border: 1px solid #3e3e3e;
color: #585858;
border: 1px solid #585858;
border-bottom-width: 0;
width: 100%;
}
@ -5212,9 +5254,9 @@ img.media {
}
.tabs__item:hover, .tabs__item--selected {
cursor: pointer;
background-color: #585858;
background-color: #717171;
color: white;
border-color: #585858;
border-color: #717171;
}
.tabs__item:last-child {
border-bottom-width: 1px;
@ -5281,35 +5323,3 @@ img.media {
.modal--open .modal__inner {
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-dark: darken($plain-ui__primary-light, 20%) !default;
$plain-ui__secondary: #b3b2af !default;
$plain-ui__success-light: #64ac64 !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__background-light: #f9f9f9 !default;
@ -79,11 +81,13 @@ $plain-ui__colors: (
:root {
--primary: #{$plain-ui__primary-light};
--primary-light: #{$plain-ui__primary-light};
--primary-active: #{$plain-ui__primary-light-active};
--primary-dark: #{$plain-ui__primary-light-dark};
--link: #{$plain-ui__primary-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};
--white: #ffffff;
--black: #000000;

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

@ -3,29 +3,29 @@
* A
* </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);
color: white;
background-color: var(--primary);
color: var(--white);
font-size: 0.85rem;
padding: 0.4em 0.8em;
font-size: 0.85rem;
padding: 0.4em 0.8em;
@extend .border;
@extend .border-round;
@extend .border;
@extend .border-round;
&--round {
display: inline-flex;
justify-content: center;
&--round {
display: inline-flex;
justify-content: center;
border-radius: 50%;
width: 2.5em;
}
border-radius: 50%;
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;
background-color: $plain-ui__primary-light;
color: var(--white);
min-height: 2.8em;
background-color: $plain-ui__primary-light;
color: var(--white);
.icon {
font-size: 1.5rem;
}
.icon {
font-size: 1.5rem;
}
&__start {
justify-content: start;
}
&__start {
justify-content: start;
}
&__main {
flex-grow: 1;
}
&__main {
flex-grow: 1;
}
&__end {
justify-content: end;
}
&__end {
justify-content: end;
}
&__start, &__main, &__end {
display: flex;
align-self: center;
margin-left: 0.75em;
&__start, &__main, &__end {
display: flex;
align-self: center;
margin-left: 0.75em;
&:last-child {
margin-right: 0.75em;
}
&:last-child {
margin-right: 0.75em;
}
}
.button {
&:active {
outline: none;
}
.button {
&:active, &:focus {
outline: none;
}
}
}

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

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

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

@ -7,37 +7,41 @@
* </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%,
2: 55%,
3: 20%,
4: 67%,
5: 33%
) !default;
$plain-ui__masonry_sizes: (
1: 25%,
2: 55%,
3: 20%,
4: 67%,
5: 33%
) !default;
.masonry {
display: flex;
width: 100%;
flex-flow: row wrap;
$plain-ui__masonry_height: 200px !default;
$plain-ui__masonry_height--sm: 300px !default;
.masonry {
display: flex;
width: 100%;
flex-flow: row wrap;
&__item {
height: 200px;
padding-left: 1px;
padding-bottom: 1px;
width: 100%;
&__item {
width: 100%;
height: $plain-ui__masonry_height;
padding-left: 1px;
padding-bottom: 1px;
@include plain-ui__media-sm() {
height: 300px;
@include plain-ui__media-sm() {
height: $plain-ui__masonry_height--sm;
@each $index, $size in $plain-ui__masonry_sizes {
&:nth-child(4n+#{$index}) {
width: #{$size};
}
// add width from data
@each $index, $size in $plain-ui__masonry_sizes {
&:nth-child(4n+#{$index}) {
width: #{$size};
}
}
}

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

@ -29,21 +29,12 @@
'helpers/sizing',
'helpers/spacing';
@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__panel();
@include plain-ui__component__media();
@include plain-ui__component__table();
@include plain-ui__component__slider();
@include plain-ui__component__bar();
@include plain-ui__component__tabs();
@include plain-ui__component__modal();
@include plain-ui__layout__masonry();
@include plain-ui__component__modal();
Write Preview
Loading…
Cancel
Save