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 142d7a3d7e
commit eba5730db7
4 changed files with 25 additions and 22 deletions
Show Stats Download Patch File Download Diff File

28
dist/index.html vendored
Unescape View File

@ -43,7 +43,7 @@
<button class="button button--danger"> <button class="button button--danger">
Danger Danger
</button> </button>
<button class="button button--hover"> <button class="button button--selected">
Hover Hover
</button> </button>
</div> </div>
@ -130,21 +130,23 @@
<h2>Panel</h2> <h2>Panel</h2>
<div class="panel"> <div class="panel">
<div class="panel__header"> <div class="bar">
<button type="button"> <div class="bar__start">
<svg class="icon icon--first" aria-hidden="true"> <button type="button" class="button button--no-style">
<use xlink:href="symbol-defs.svg#icon-expand"></use> <svg class="icon fill-white" aria-hidden="true">
</svg> <use xlink:href="symbol-defs.svg#icon-expand"></use>
</button> </svg>
<div class="panel__title">Test</div> </button>
<div class="panel__buttons"> </div>
<button type="button"> <div class="bar__main">Test</div>
<svg class="icon" aria-hidden="true"> <div class="bar__end">
<button type="button" class="button button--no-style">
<svg class="icon fill-white" 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"> <button type="button" class="button button--no-style">
<svg class="icon" aria-hidden="true"> <svg class="icon fill-white" 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>

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

@ -943,13 +943,19 @@ img.media {
} }
.bar__start { .bar__start {
justify-content: start; justify-content: start;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
} }
.bar__main { .bar__main {
width: 100%; width: 100%;
} }
.bar__end { .bar__end {
justify-content: end; text-align: right;
margin-left: 0.75em; margin-left: 0.75em;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
} }
.bar__start, .bar__main, .bar__end { .bar__start, .bar__main, .bar__end {
align-self: center; align-self: center;
@ -974,9 +980,6 @@ img.media {
border: 1px solid #3e3e3e; border: 1px solid #3e3e3e;
border-right: 0; border-right: 0;
} }
.tab__item:last-child {
margin-right: 0;
}
.tab__item:hover, .tab__item--selected { .tab__item:hover, .tab__item--selected {
cursor: pointer; cursor: pointer;
background-color: #585858; background-color: #585858;

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

@ -20,6 +20,7 @@
&__start { &__start {
justify-content: start; justify-content: start;
width: fit-content;
} }
&__main { &__main {
@ -27,8 +28,9 @@
} }
&__end { &__end {
justify-content: end; text-align: right;
margin-left: 0.75em; margin-left: 0.75em;
width: fit-content;
} }
&__start, &__main, &__end { &__start, &__main, &__end {

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

@ -25,10 +25,6 @@
border: 1px solid $plain-ui__primary-light; border: 1px solid $plain-ui__primary-light;
border-right: 0; border-right: 0;
&:last-child {
margin-right: 0;
}
&:hover, &--selected { &:hover, &--selected {
cursor: pointer; cursor: pointer;
background-color: lighten($plain-ui__primary-light, 10%); background-color: lighten($plain-ui__primary-light, 10%);

Write Preview
Loading…
Cancel
Save