issue/2 (#28)
Co-authored-by: dbroqua <contact@darkou.fr> Reviewed-on: https://git.darkou.fr/dbroqua/MusicTopus/pulls/28 Co-authored-by: Damien Broqua <dbroqua@noreply.localhost> Co-committed-by: Damien Broqua <dbroqua@noreply.localhost>
This commit is contained in:
Damien Broqua
parent
cf63d8b6d8
commit
b27a81a0b6
26 changed files with 1094 additions and 97 deletions
|
|
@ -3,6 +3,10 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.inline {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&.has-addons {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -40,6 +44,28 @@
|
|||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
border-radius: 50%;
|
||||
appearance: none;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
vertical-align: text-bottom;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 0 0 1px var(--input-active-color);
|
||||
background-color: #fff;
|
||||
transition: background-size .15s;
|
||||
cursor: pointer;
|
||||
|
||||
&:checked {
|
||||
box-shadow: inset 0 0 0 4px var(--input-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] + label,
|
||||
label + input[type="radio"] {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
html {
|
||||
min-height: 100vh;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
|
|
@ -69,4 +70,16 @@ html {
|
|||
|
||||
.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ml-4 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.sm-hidden {
|
||||
display: none;
|
||||
|
||||
@include respond-to("small-up") {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
|
@ -39,6 +39,9 @@
|
|||
.icon-link:before { content: '\e804'; } /* '' */
|
||||
.icon-heart:before { content: '\e805'; } /* '' */
|
||||
.icon-eye:before { content: '\e806'; } /* '' */
|
||||
.icon-left-open:before { content: '\e807'; } /* '' */
|
||||
.icon-right-open:before { content: '\e808'; } /* '' */
|
||||
.icon-export:before { content: '\e809'; } /* '' */
|
||||
.icon-spin:before { content: '\e839'; } /* '' */
|
||||
.icon-link-ext:before { content: '\f08e'; } /* '' */
|
||||
.icon-sun:before { content: '\f185'; } /* '' */
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@
|
|||
// COMPOSANTS (à ajouter au besoin)
|
||||
// @import "../node_modules/knacss/sass/components/button";
|
||||
// @import "components/burger";
|
||||
// @import "components/checkbox";
|
||||
// @import "components/radio";
|
||||
// @import "../node_modules/knacss/sass/components/checkbox";
|
||||
@import "../node_modules/knacss/sass/components/radio";
|
||||
// @import "../node_modules/knacss/sass/components/select";
|
||||
// @import "components/quote";
|
||||
|
||||
|
|
@ -43,4 +43,5 @@
|
|||
@import './error';
|
||||
@import './home';
|
||||
@import './ajouter-un-album';
|
||||
@import './ma-collection';
|
||||
@import './ma-collection';
|
||||
@import './ma-collection-details';
|
||||
55
sass/ma-collection-details.scss
Normal file
55
sass/ma-collection-details.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
.ma-collection-details {
|
||||
.galerie {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
div {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0.25rem;
|
||||
padding: 0.25rem;
|
||||
border: 2px solid var(--font-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
button.close {
|
||||
height: 36px;
|
||||
max-height: 36px;
|
||||
max-width: 36px;
|
||||
min-height: 36px;
|
||||
min-width: 36px;
|
||||
width: 36px;
|
||||
position: absolute;
|
||||
background-color: rgba(10,10,10,.6);
|
||||
right: 12px;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
|
||||
&.previous {
|
||||
left: 12px;
|
||||
}
|
||||
&.next {
|
||||
right: 12px;
|
||||
}
|
||||
i {
|
||||
font-size: 2rem;
|
||||
color: $nord4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -24,6 +24,47 @@
|
|||
top: 0;
|
||||
}
|
||||
|
||||
button.close {
|
||||
user-select: none;
|
||||
background-color: rgba(10,10,10,.2);
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
display: inline-block;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
font-size: 0;
|
||||
height: 20px;
|
||||
max-height: 20px;
|
||||
max-width: 20px;
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
outline: none;
|
||||
position: relative;
|
||||
width: 20px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: var(--default-color);
|
||||
content: "";
|
||||
display: block;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
||||
transform-origin: center center;
|
||||
}
|
||||
&::before {
|
||||
height: 2px;
|
||||
width: 50%;
|
||||
}
|
||||
&::after {
|
||||
height: 50%;
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
|
|
@ -62,47 +103,6 @@
|
|||
justify-content: space-between;
|
||||
font-size: 1.5rem;
|
||||
@include transition() {}
|
||||
|
||||
button {
|
||||
user-select: none;
|
||||
background-color: rgba(10,10,10,.2);
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
display: inline-block;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
font-size: 0;
|
||||
height: 20px;
|
||||
max-height: 20px;
|
||||
max-width: 20px;
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
outline: none;
|
||||
position: relative;
|
||||
width: 20px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: var(--default-color);
|
||||
content: "";
|
||||
display: block;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
||||
transform-origin: center center;
|
||||
}
|
||||
&::before {
|
||||
height: 2px;
|
||||
width: 50%;
|
||||
}
|
||||
&::after {
|
||||
height: 50%;
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
section {
|
||||
background-color: var(--default-color);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue