155 lines
2.8 KiB
SCSS
155 lines
2.8 KiB
SCSS
@import "../../../../node_modules/bulma/bulma.sass";
|
|
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
|
|
@import "../../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
|
|
@import "../../../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
|
|
$bg-color: yellow;
|
|
$border-color: red;
|
|
|
|
.app {
|
|
font-family: helvetica, arial, sans-serif;
|
|
padding: 2em;
|
|
border: 5px solid $border-color;
|
|
|
|
p {
|
|
background-color: $bg-color;
|
|
}
|
|
}
|
|
.navbar-item.is-mega {
|
|
position: static;
|
|
|
|
.is-mega-menu-title {
|
|
margin-bottom: 0;
|
|
padding: 0.375rem 1rem;
|
|
}
|
|
}
|
|
|
|
.min {
|
|
overflow: visible;
|
|
.tags {
|
|
display: inline;
|
|
margin-right: 5px;
|
|
margin-left: 5px;
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
pre {
|
|
border-radius: 0.4em;
|
|
margin: 10px 0 10px 0;
|
|
white-space: pre-wrap;
|
|
}
|
|
}
|
|
|
|
.generic-card {
|
|
max-width: 200px;
|
|
|
|
.truncate {
|
|
width: 100px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
img {
|
|
max-width: 200px;
|
|
}
|
|
}
|
|
.card-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
column-gap: 0.5em;
|
|
row-gap: 1.2em;
|
|
|
|
.card {
|
|
max-width: 200px;
|
|
margin: 0 0 15px 0;
|
|
.is-horizontal {
|
|
flex-direction: row;
|
|
display: flex;
|
|
flex-basis: 50ex;
|
|
flex-grow: 0;
|
|
flex-shrink: 1;
|
|
box-shadow: none;
|
|
|
|
.card-image {
|
|
align-self: center;
|
|
.image {
|
|
max-width: 60px;
|
|
img {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-top-left-radius: 0.25em;
|
|
border-bottom-left-radius: 0.25em;
|
|
}
|
|
}
|
|
}
|
|
.card-content {
|
|
align-self: center;
|
|
flex: 1;
|
|
padding-left: 1em;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
font-size: 0.8em;
|
|
ul {
|
|
li.status {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.truncate {
|
|
width: 400px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
.is-divider {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.comic-vine-match-drawer {
|
|
// comic detail drawer
|
|
.search-criteria-card {
|
|
width: 100%;
|
|
.card-content {
|
|
padding: 10px;
|
|
}
|
|
}
|
|
|
|
.field {
|
|
margin: 10px 0 0 0;
|
|
}
|
|
}
|
|
|
|
// comicvine search results
|
|
.search-results-container {
|
|
margin: 15px 0 0 0;
|
|
overflow: hidden;
|
|
|
|
table {
|
|
width: 100%;
|
|
tbody tr:nth-child(odd) {
|
|
background: #eee;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
|
|
.search-result {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 10px;
|
|
margin: 0 0 10px 0;
|
|
|
|
.cover-image {
|
|
border-radius: 5px;
|
|
}
|
|
.search-result-details {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|