dbroqua/MusicTopus
2
0
Fork 1
Code Issues 12 Pull requests 1 Projects Releases 14 Packages Wiki Activity Actions

{WIP} Bulma => Knacss

Browse source
This commit is contained in:
Damien Broqua 2022-02-18 16:53:54 +01:00
parent ff9c3d0113
commit 4c80b6d9f1
9 changed files with 393 additions and 235 deletions
Download patch file Download diff file Expand all files Collapse all files

45
sass/ajouter-un-album.scss
View file

@ -1,15 +1,44 @@
.ajouter-un-album {
span.item {
margin-right: 0.6rem;
@include respond-to("small") {
display: block;
padding: 0 .75rem;
}
&::after {
content: ",";
.list{
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #dbdbdb;
&:nth-child(2n) {
background-color: #fafafa;
}
&:last-child {
margin-right: 0;
&::after {
content: "";
.title {
font-weight: 800;
font-size: 1.4rem;
}
.grid {
margin-top: 0.75rem;
}
img {
border: 2px solid #4a4a4a;
}
.items {
span {
margin-right: 0.6rem;
&::after {
content: ",";
}
&:last-child {
&::after {
margin-right: 0;
content: "";
}
}
}
}
}

1
sass/button.scss
View file

@ -11,6 +11,7 @@
margin-bottom: .5rem;
background-color: #fff;
border-color: #dbdbdb;
border-radius: 0.375rem;
&.is-danger {
background-color: #f14668;

19
sass/forms.scss
View file

@ -1,24 +1,41 @@
.field {
padding-top: .6rem;
display: flex;
flex-direction: column;
&.has-addons {
display: flex;
justify-content: flex-start;
flex-direction: row;
.button {
margin-bottom: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
label {
font-weight: 800;
}
input {
input,
select {
border-radius: 0.375rem;
box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
max-width: 100%;
width: 100%;
background-color: #fff;
border: 1px solid #dbdbdb !important;
color: #363636;
&:focus-visible {
border: 1px solid #b9b9b9 !important;
outline: unset;
}
}
}

55
sass/global.scss
View file

File diff suppressed because one or more lines are too long

4
sass/index.scss
View file

@ -33,7 +33,9 @@
@import './modal';
@import './toast';
@import './flash';
@import './pagination';
@import './home';
@import './connexion';
@import './ajouter-un-album';
@import './ajouter-un-album';
@import './ma-collection';

47
sass/ma-collection.scss Normal file
View file

@ -0,0 +1,47 @@
.ma-collection {
.filters {
display: flex;
justify-content: end;
padding: 0.5rem 0;
.field {
padding: 0 0.5rem;
select {
width: auto;
}
@include respond-to("small-up") {
&:last-child {
padding-right: 0;
}
}
}
@include respond-to("small") {
flex-direction: column;
}
}
.list{
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #dbdbdb;
&:nth-child(2n) {
background-color: #fafafa;
}
.title {
font-weight: 800;
font-size: 1.4rem;
}
.grid {
margin-top: 0.75rem;
}
img {
border: 2px solid #4a4a4a;
}
}
}

98
sass/pagination.scss
View file

@ -1,15 +1,85 @@
.pagination-link,
.pagination-link,
.pagination-next,
.pagination-next,
.pagination-previous,
.pagination-previous {
&.is-disabled,
&[disabled] {
background-color: #dbdbdb;
border-color: #dbdbdb;
box-shadow: none;
color: #7a7a7a;
opacity: .5;
}
.pagination {
font-size: 1rem;
align-items: center;
display: flex;
text-align: center;
justify-content: space-between;
margin: 1rem 0;
.pagination-previous,
.pagination-next,
.pagination-link {
align-items: center;
border: 1px solid transparent;
border-radius: .375em;
box-shadow: none;
display: inline-flex;
font-size: 1rem;
height: 2.5em;
justify-content: flex-start;
line-height: 1.5;
padding-bottom: calc(.5em - 1px);
padding-left: calc(.75em - 1px);
padding-right: calc(.75em - 1px);
padding-top: calc(.5em - 1px);
position: relative;
vertical-align: top;
text-decoration: none;
&:hover {
border-color: #b5b5b5;
color: #363636;
}
&.is-disabled {
background-color: #dbdbdb;
border-color: #dbdbdb;
box-shadow: none;
color: #7a7a7a;
opacity: .5;
}
}
.pagination-previous,
.pagination-next,
.pagination-link {
user-select: none;
text-align: center;
font-size: 1em;
justify-content: center;
margin: .25rem;
border-color: #dbdbdb;
color: #363636;
min-width: 2.5em;
padding-left: .75em;
padding-right: .75em;
white-space: nowrap;
margin-bottom: 0;
margin-top: 0;
}
.pagination-previous {
order: 2;
}
.pagination-next {
order: 3;
}
.pagination-link {
&.is-current {
background-color: #485fc7;
border-color: #485fc7;
color: #fff;
}
}
.pagination-list {
align-items: center;
display: flex;
text-align: center;
flex-wrap: wrap;
flex-grow: 1;
flex-shrink: 1;
justify-content: flex-start;
order: 1;
}
}