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__start">
<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>
</svg>
</button>
@ -161,7 +161,7 @@
</h3>
<div class="bar">
<div class="bar__start marginless">
<div class="tabs tabs--secondary">
<div class="tabs tabs--contrast">
<a class="tabs__item tabs__item--selected">
Tab A
</a>
@ -209,7 +209,7 @@
<div class="bar">
<div class="bar__start">
<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>
</svg>
</button>
@ -217,12 +217,12 @@
<div class="bar__main">Test</div>
<div class="bar__end">
<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>
</svg>
</button>
<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>
</svg>
</button>

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

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

19
src/scss/_functions.scss
Unescape View File

@ -21,14 +21,21 @@
@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 {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@if $index {
@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-contrast: #ffffff !default;
$plain-ui__background: #f9f9f9 !default;
$plain-ui__background: $plain-ui__primary !default;
$plain-ui__background-contrast: #ffffff !default;
$plain-ui__body: #f9f9f9 !default;

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

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

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

@ -18,9 +18,9 @@
font-family: $plain-ui__font-family;
font-size: 1rem;
border: 1px solid var(--primary);
background-color: var(--white);
color: var(--primary);
border: 1px solid var(--border);
background-color: var(--background-contrast);
color: var(--text);
border-radius: $plain-ui__border-radius;
transition: background-color 0.1s;
@ -38,27 +38,15 @@
font-size: 0.8rem;
}
&--transparent {
margin: 0;
padding: 0;
border: none;
background: transparent;
border-radius: 0;
&:focus, &:active {
outline: none;
}
}
&:hover, &--selected {
cursor: pointer;
text-decoration: none;
color: white;
background-color: var(--primary-active);
background-color: var(--active);
}
&:focus, &:active {
outline: 1px solid var(--primary-active);
outline: 1px solid var(--active);
}
&:disabled {
@ -66,9 +54,21 @@
&:hover {
cursor: not-allowed;
border: 1px solid var(--primary);
background-color: white;
color: var(--primary);
border: 1px solid var(--border);
background-color: var(--background-contrast);
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 {
outline: 2px solid var(--primary-active);
outline: 2px solid var(--active);
}
}
@ -92,7 +92,7 @@
}
&:focus, &:active {
outline: 2px solid var(--primary-active);
outline: 2px solid var(--active);
}
}
@ -100,21 +100,21 @@
background-color: transparent;
&:hover {
color: var(--primary);
border-color: var(--primary-light);
color: var(--border);
border-color: var(--border-contrast);
background-color: transparent;
}
}
&--danger.button--outline {
&:hover {
border-color: var(--danger-light);
border-color: var(--danger);
}
}
&--success.button--outline {
&: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%;
border: 1px solid var(--primary-active);
background-color: var(--white);
border: 1px solid var(--active);
background-color: var(--background-contrast);
border-radius: $plain-ui__border-radius;
margin: 0.7rem 0 0;
&:focus, &:active {
outline: 0;
border-color: var(--primary);
border-color: var(--border);
}
}
@ -125,7 +125,7 @@ input[type=radio].field-choice {
}
svg.field-choice__unchecked {
fill: var(--primary-active);
fill: var(--active);
}
svg.field-choice__checked {

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

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

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

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

Write Preview
Loading…
Cancel
Save