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 39ca4ac77a
commit aefb3c2ee1
9 changed files with 94 additions and 81 deletions
Show Stats Download Patch File Download Diff File

10
dist/components.html vendored
Unescape View File

@ -123,7 +123,7 @@
<div class="bar"> <div class="bar">
<div class="bar__start"> <div class="bar__start">
<button class="button button--transparent"> <button class="button button--transparent">
<svg class="icon fill-white marginless" aria-hidden="true"> <svg class="icon fill-text-contrast marginless" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use> <use xlink:href="symbol-defs.svg#icon-close"></use>
</svg> </svg>
</button> </button>
@ -161,7 +161,7 @@
</h3> </h3>
<div class="bar"> <div class="bar">
<div class="bar__start marginless"> <div class="bar__start marginless">
<div class="tabs tabs--secondary"> <div class="tabs tabs--contrast">
<a class="tabs__item tabs__item--selected"> <a class="tabs__item tabs__item--selected">
Tab A Tab A
</a> </a>
@ -209,7 +209,7 @@
<div class="bar"> <div class="bar">
<div class="bar__start"> <div class="bar__start">
<button type="button" class="button button--transparent"> <button type="button" class="button button--transparent">
<svg class="icon fill-white" aria-hidden="true"> <svg class="icon fill-text-contrast" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-expand"></use> <use xlink:href="symbol-defs.svg#icon-expand"></use>
</svg> </svg>
</button> </button>
@ -217,12 +217,12 @@
<div class="bar__main">Test</div> <div class="bar__main">Test</div>
<div class="bar__end"> <div class="bar__end">
<button type="button" class="button button--transparent"> <button type="button" class="button button--transparent">
<svg class="icon fill-white" aria-hidden="true"> <svg class="icon fill-text-contrast" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-edit"></use> <use xlink:href="symbol-defs.svg#icon-edit"></use>
</svg> </svg>
</button> </button>
<button type="button" class="button button--transparent"> <button type="button" class="button button--transparent">
<svg class="icon fill-white" aria-hidden="true"> <svg class="icon fill-text-contrast" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use> <use xlink:href="symbol-defs.svg#icon-close"></use>
</svg> </svg>
</button> </button>

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

@ -1508,6 +1508,12 @@
* @return {number} * @return {number}
* *
*/ */
/**
*
*
* https://css-tricks.com/snippets/sass/str-replace-function/
*
*/
/** /**
* get value of key "default" in map * get value of key "default" in map
* *
@ -1631,7 +1637,7 @@
--success-contrast: #a6d0a6; --success-contrast: #a6d0a6;
--warning: #f0ad4e; --warning: #f0ad4e;
--warning-contrast: #f8d9ac; --warning-contrast: #f8d9ac;
--background: #f9f9f9; --background: #3e3e3e;
--background-contrast: #ffffff; --background-contrast: #ffffff;
--border: #3e3e3e; --border: #3e3e3e;
--border-contrast: #ffffff; --border-contrast: #ffffff;
@ -2123,9 +2129,9 @@ h6, .h6 {
text-decoration: none; text-decoration: none;
font-family: "IBM Plex Mono", sans-serif; font-family: "IBM Plex Mono", sans-serif;
font-size: 1rem; font-size: 1rem;
border: 1px solid var(--primary); border: 1px solid var(--border);
background-color: var(--white); background-color: var(--background-contrast);
color: var(--primary); color: var(--text);
border-radius: 2px; border-radius: 2px;
transition: background-color 0.1s; transition: background-color 0.1s;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@ -2141,33 +2147,33 @@ h6, .h6 {
.button--small { .button--small {
font-size: 0.8rem; font-size: 0.8rem;
} }
.button--transparent {
margin: 0;
padding: 0;
border: none;
background: transparent;
border-radius: 0;
}
.button--transparent:focus, .button--transparent:active {
outline: none;
}
.button:hover, .button--selected { .button:hover, .button--selected {
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
color: white; color: white;
background-color: var(--primary-active); background-color: var(--active);
} }
.button:focus, .button:active { .button:focus, .button:active {
outline: 1px solid var(--primary-active); outline: 1px solid var(--active);
} }
.button:disabled { .button:disabled {
opacity: 0.5; opacity: 0.5;
} }
.button:disabled:hover { .button:disabled:hover {
cursor: not-allowed; cursor: not-allowed;
border: 1px solid var(--primary); border: 1px solid var(--border);
background-color: white; background-color: var(--background-contrast);
color: var(--primary); color: var(--border);
}
.button--transparent {
margin: 0;
padding: 0;
border: none;
background: transparent;
border-radius: 0;
}
.button--transparent:focus, .button--transparent:active {
outline: none;
} }
.button--danger { .button--danger {
border-color: var(--danger); border-color: var(--danger);
@ -2176,7 +2182,7 @@ h6, .h6 {
background-color: var(--danger); background-color: var(--danger);
} }
.button--danger:focus, .button--danger:active { .button--danger:focus, .button--danger:active {
outline: 2px solid var(--primary-active); outline: 2px solid var(--active);
} }
.button--success { .button--success {
border-color: var(--success); border-color: var(--success);
@ -2185,21 +2191,21 @@ h6, .h6 {
background-color: var(--sucess); background-color: var(--sucess);
} }
.button--success:focus, .button--success:active { .button--success:focus, .button--success:active {
outline: 2px solid var(--primary-active); outline: 2px solid var(--active);
} }
.button--outline { .button--outline {
background-color: transparent; background-color: transparent;
} }
.button--outline:hover { .button--outline:hover {
color: var(--primary); color: var(--border);
border-color: var(--primary-light); border-color: var(--border-contrast);
background-color: transparent; background-color: transparent;
} }
.button--danger.button--outline:hover { .button--danger.button--outline:hover {
border-color: var(--danger-light); border-color: var(--danger);
} }
.button--success.button--outline:hover { .button--success.button--outline:hover {
border-color: var(--success-light); border-color: var(--success);
} }
/** /**
@ -2239,14 +2245,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 var(--primary-active); border: 1px solid var(--active);
background-color: var(--white); background-color: var(--background-contrast);
border-radius: 2px; border-radius: 2px;
margin: 0.7rem 0 0; margin: 0.7rem 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: var(--primary); border-color: var(--border);
} }
input.field-text, textarea.field-text { input.field-text, textarea.field-text {
@ -2312,7 +2318,7 @@ input[type=radio].field-choice:checked ~ .field-choice__unchecked {
} }
svg.field-choice__unchecked { svg.field-choice__unchecked {
fill: var(--primary-active); fill: var(--active);
} }
svg.field-choice__checked { svg.field-choice__checked {
@ -2410,7 +2416,7 @@ svg.field-choice__checked {
} }
.tabs__item:hover { .tabs__item:hover {
cursor: pointer; cursor: pointer;
background-color: var(--primary-active); background-color: var(--active);
color: var(--text-contrast); color: var(--text-contrast);
border-top-left-radius: 2px; border-top-left-radius: 2px;
border-top-right-radius: 2px; border-top-right-radius: 2px;
@ -2426,7 +2432,7 @@ svg.field-choice__checked {
color: var(--text-contrast); color: var(--text-contrast);
} }
.tabs--contrast .tabs__item:hover { .tabs--contrast .tabs__item:hover {
background-color: var(--primary-active-contrast); background-color: var(--background-contrast);
color: var(--text); color: var(--text);
border-radius: 0; border-radius: 0;
} }
@ -2569,7 +2575,7 @@ svg.field-choice__checked {
.bar { .bar {
display: flex; display: flex;
min-height: 2.8em; min-height: 2.8em;
background-color: var(--primary); background-color: var(--background);
color: var(--text-contrast); color: var(--text-contrast);
border: 1px solid var(--primary); border: 1px solid var(--primary);
border-radius: 2px; border-radius: 2px;
@ -2632,13 +2638,13 @@ svg.field-choice__checked {
font-size: 3rem; font-size: 3rem;
} }
.modal__title, .modal__body { .modal__title, .modal__body {
color: var(--white); color: var(--text-contrast);
} }
.modal__body { .modal__body {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.modal .button { .modal .button {
color: var(--white); color: var(--text-contrast);
} }
.modal:before { .modal:before {
position: fixed; position: fixed;

19
src/scss/_functions.scss
Unescape View File

@ -21,14 +21,21 @@
@return $value / ($value * 0 + 1); @return $value / ($value * 0 + 1);
} }
@function str-replace($string, $search, $replace: '') { /**
$index: str-index($string, $search); *
*
* https://css-tricks.com/snippets/sass/str-replace-function/
*
*/
@function str-replace($string, $search, $replace: '')
{
$index: str-index($string, $search);
@if $index { @if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
} }
@return $string; @return $string;
} }

2
src/scss/_variables.scss
Unescape View File

@ -64,7 +64,7 @@ $plain-ui__primary-contrast: $plain-ui__primary !default;
$plain-ui__active: lighten($plain-ui__primary, 20%) !default; $plain-ui__active: lighten($plain-ui__primary, 20%) !default;
$plain-ui__active-contrast: #ffffff !default; $plain-ui__active-contrast: #ffffff !default;
$plain-ui__background: #f9f9f9 !default; $plain-ui__background: $plain-ui__primary !default;
$plain-ui__background-contrast: #ffffff !default; $plain-ui__background-contrast: #ffffff !default;
$plain-ui__body: #f9f9f9 !default; $plain-ui__body: #f9f9f9 !default;

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

@ -18,7 +18,7 @@
display: flex; display: flex;
min-height: 2.8em; min-height: 2.8em;
background-color: var(--primary); background-color: var(--background);
color: var(--text-contrast); color: var(--text-contrast);
border: $plain-ui__border; border: $plain-ui__border;

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

@ -18,9 +18,9 @@
font-family: $plain-ui__font-family; font-family: $plain-ui__font-family;
font-size: 1rem; font-size: 1rem;
border: 1px solid var(--primary); border: 1px solid var(--border);
background-color: var(--white); background-color: var(--background-contrast);
color: var(--primary); color: var(--text);
border-radius: $plain-ui__border-radius; border-radius: $plain-ui__border-radius;
transition: background-color 0.1s; transition: background-color 0.1s;
@ -38,27 +38,15 @@
font-size: 0.8rem; font-size: 0.8rem;
} }
&--transparent {
margin: 0;
padding: 0;
border: none;
background: transparent;
border-radius: 0;
&:focus, &:active {
outline: none;
}
}
&:hover, &--selected { &:hover, &--selected {
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
color: white; color: white;
background-color: var(--primary-active); background-color: var(--active);
} }
&:focus, &:active { &:focus, &:active {
outline: 1px solid var(--primary-active); outline: 1px solid var(--active);
} }
&:disabled { &:disabled {
@ -66,9 +54,21 @@
&:hover { &:hover {
cursor: not-allowed; cursor: not-allowed;
border: 1px solid var(--primary); border: 1px solid var(--border);
background-color: white; background-color: var(--background-contrast);
color: var(--primary); color: var(--border);
}
}
&--transparent {
margin: 0;
padding: 0;
border: none;
background: transparent;
border-radius: 0;
&:focus, &:active {
outline: none;
} }
} }
@ -80,7 +80,7 @@
} }
&:focus, &:active { &:focus, &:active {
outline: 2px solid var(--primary-active); outline: 2px solid var(--active);
} }
} }
@ -92,7 +92,7 @@
} }
&:focus, &:active { &:focus, &:active {
outline: 2px solid var(--primary-active); outline: 2px solid var(--active);
} }
} }
@ -100,21 +100,21 @@
background-color: transparent; background-color: transparent;
&:hover { &:hover {
color: var(--primary); color: var(--border);
border-color: var(--primary-light); border-color: var(--border-contrast);
background-color: transparent; background-color: transparent;
} }
} }
&--danger.button--outline { &--danger.button--outline {
&:hover { &:hover {
border-color: var(--danger-light); border-color: var(--danger);
} }
} }
&--success.button--outline { &--success.button--outline {
&:hover { &:hover {
border-color: var(--success-light); border-color: var(--success);
} }
} }
} }

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

@ -48,15 +48,15 @@ input.field-text, textarea.field-text, select.field-choice {
width: 100%; width: 100%;
border: 1px solid var(--primary-active); border: 1px solid var(--active);
background-color: var(--white); background-color: var(--background-contrast);
border-radius: $plain-ui__border-radius; border-radius: $plain-ui__border-radius;
margin: 0.7rem 0 0; margin: 0.7rem 0 0;
&:focus, &:active { &:focus, &:active {
outline: 0; outline: 0;
border-color: var(--primary); border-color: var(--border);
} }
} }
@ -125,7 +125,7 @@ input[type=radio].field-choice {
} }
svg.field-choice__unchecked { svg.field-choice__unchecked {
fill: var(--primary-active); fill: var(--active);
} }
svg.field-choice__checked { svg.field-choice__checked {

4
src/scss/components/_modal.scss
Unescape View File

@ -50,7 +50,7 @@
} }
&__title, &__body { &__title, &__body {
color: var(--white); color: var(--text-contrast);
} }
&__body { &__body {
@ -58,7 +58,7 @@
} }
.button { .button {
color: var(--white); color: var(--text-contrast);
} }
&:before { &:before {

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

@ -38,7 +38,7 @@
&:hover { &:hover {
cursor: pointer; cursor: pointer;
background-color: var(--primary-active); background-color: var(--active);
color: var(--text-contrast); color: var(--text-contrast);
border-top-left-radius: $plain-ui__border-radius; border-top-left-radius: $plain-ui__border-radius;
@ -58,7 +58,7 @@
color: var(--text-contrast); color: var(--text-contrast);
&:hover { &:hover {
background-color: var(--primary-active-contrast); background-color: var(--background-contrast);
color: var(--text); color: var(--text);
border-radius: 0; border-radius: 0;
} }

Write Preview
Loading…
Cancel
Save