work on design
This commit is contained in:
bkfox
@ -380,6 +380,9 @@ aside {
|
||||
--highlight-color-alpha: rgba(255, 255, 0, 0.6);
|
||||
--highlight-color-2: rgb(0, 0, 254);
|
||||
--highlight-color-2-alpha: rgb(0, 0, 254, 0.6);
|
||||
|
||||
--header-height: 30em;
|
||||
|
||||
--heading-height: 30em;
|
||||
--heading-title-bg-color: rgba(255, 255, 0, 1);
|
||||
--heading-bg-color: var(--highlight-color);
|
||||
@ -389,12 +392,24 @@ aside {
|
||||
--preview-media-cover-size: 10em;
|
||||
|
||||
--preview-cover-size: 24em;
|
||||
--preview-cover-small-size: 14em;
|
||||
--preview-cover-small-size: 10em;
|
||||
|
||||
--heading-font-family: default;
|
||||
}
|
||||
|
||||
.page a {
|
||||
background-color: var(--highlight-color-alpha);
|
||||
color: var(--text-color);
|
||||
|
||||
// ---- main theme & layout
|
||||
h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
font-family: var(--heading-font-family);
|
||||
}
|
||||
|
||||
.page {
|
||||
padding-bottom: 5em;
|
||||
a {
|
||||
background-color: var(--highlight-color-alpha);
|
||||
color: var(--highlight-color-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -415,6 +430,7 @@ aside {
|
||||
|
||||
.is-clickable { cursor: pointer; }
|
||||
|
||||
|
||||
// ---- components
|
||||
.btn-hg, .btn-outline-hg {
|
||||
border: 0.1em var(--highlight-color) solid;
|
||||
@ -422,10 +438,9 @@ aside {
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
|
||||
.button {
|
||||
&.action {
|
||||
border-color: var(--highlight-color-2-alpha);
|
||||
background-color: var(--highlight-color);
|
||||
justify-content: center;
|
||||
padding: $mp-2 !important;
|
||||
min-width: 2em;
|
||||
@ -437,19 +452,58 @@ aside {
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-trigger {
|
||||
border-radius: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.list-filters {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.content {
|
||||
.title.is-3 {
|
||||
margin-top: $mp-3;
|
||||
}
|
||||
|
||||
.content, .navbar-item {
|
||||
font-size: $text-size-medium;
|
||||
}
|
||||
|
||||
.app-nav .navbar-item {
|
||||
font-size: $text-size-medium;
|
||||
padding-top: $mp-4;
|
||||
padding-bottom: $mp-4;
|
||||
}
|
||||
|
||||
// ---- items
|
||||
|
||||
.heading, .headings-container > * {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:empty) {
|
||||
background-color: var(--heading-bg-color);
|
||||
padding: $mp-2;
|
||||
margin-top: 0em !important;
|
||||
vertical-align: top;
|
||||
|
||||
&.highlight {
|
||||
background-color: var(--heading-bg-highlight-color);
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.title {
|
||||
background-color: var(--heading-title-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
&.no-label label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- ---- previews & page items
|
||||
.preview {
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
@ -484,7 +538,8 @@ aside {
|
||||
.headings {
|
||||
background-size: cover;
|
||||
|
||||
* { margin: 0em; padding: 0em; }
|
||||
* { margin: 0em; }
|
||||
.column { padding: 0em; }
|
||||
|
||||
a {
|
||||
color: var(--text-color);
|
||||
@ -492,32 +547,6 @@ aside {
|
||||
}
|
||||
}
|
||||
|
||||
.heading, .headings-container > * {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:empty) {
|
||||
background-color: var(--heading-bg-color);
|
||||
padding: $mp-1;
|
||||
margin-top: 0em !important;
|
||||
vertical-align: top;
|
||||
|
||||
&.highlight {
|
||||
background-color: var(--heading-bg-highlight-color);
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.title {
|
||||
background-color: var(--heading-title-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
&.no-label label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -566,33 +595,19 @@ aside {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.preview-card {
|
||||
height: var(--preview-cover-size);
|
||||
min-width: var(--preview-cover-size);
|
||||
|
||||
&:not(.header) {
|
||||
box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.card-grid & {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.headings {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
|
||||
padding-top: $mp-3;
|
||||
|
||||
& > div:not(:last-child) {
|
||||
margin-bottom: $mp-3;
|
||||
}
|
||||
|
||||
nav a {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
margin-bottom: $mp-3;
|
||||
}
|
||||
|
||||
.actions {
|
||||
position: absolute;
|
||||
bottom: $mp-3;
|
||||
@ -606,24 +621,67 @@ aside {
|
||||
|
||||
|
||||
|
||||
.header {
|
||||
background-size: cover;
|
||||
.preview-card-headings {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
|
||||
.preview {
|
||||
height: var(--heading-height);
|
||||
padding-top: $mp-3;
|
||||
|
||||
&.no-cover {
|
||||
height: unset;
|
||||
& > div:not(:last-child),
|
||||
& .column > div {
|
||||
margin-bottom: $mp-3;
|
||||
}
|
||||
|
||||
preview-header:not(.no-cover) & .heading {
|
||||
margin-bottom: $mp-3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.preview-nav {
|
||||
margin-top: $mp-3;
|
||||
|
||||
.nav-item {
|
||||
font-size: $text-size-bigger;
|
||||
font-family: unset;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: $mp-2;
|
||||
}
|
||||
|
||||
.headings, > .container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .container, {
|
||||
height: 100%;
|
||||
a {
|
||||
padding: $mp-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.preview-header {
|
||||
width: 100%;
|
||||
|
||||
&:not(.no-cover) {
|
||||
min-height: var(--header-height);
|
||||
}
|
||||
|
||||
&.no-cover {
|
||||
height: unset;
|
||||
}
|
||||
|
||||
.headings, > .container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .container, {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.header {
|
||||
background-size: cover;
|
||||
|
||||
.preview-card {
|
||||
max-width: unset;
|
||||
@ -651,19 +709,6 @@ aside {
|
||||
|
||||
|
||||
// -- program grid
|
||||
.preview-card {
|
||||
header {
|
||||
.info {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border-bottom: 1px var(--highlight-color) solid;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card-grid {
|
||||
@ -672,8 +717,14 @@ aside {
|
||||
gap: $mp-4;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $screen-normal) {
|
||||
.page {
|
||||
margin: 0em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $screen-wide) {
|
||||
.preview:not(.list-item) {
|
||||
.preview-card:not(.preview-header) {
|
||||
height: 20em !important;
|
||||
}
|
||||
|
||||
|
||||
@ -1,15 +1,19 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :class="itemClass" @click="noButton && toggle()">
|
||||
<div :class="['a-dropdown', itemClass, active ? activeClass : '']"
|
||||
style="display: flex; flex-direction: row"
|
||||
@click="noButton && toggle()">
|
||||
<div style="flex:auto">
|
||||
<slot name="item"></slot>
|
||||
</div>
|
||||
<slot name="button">
|
||||
<span :class="['float-right', buttonClass]" @click="toggle()">
|
||||
<span :class="[buttonClass]" style="flex-grow:0" @click="toggle()">
|
||||
<span class="icon">
|
||||
<i v-if="!active" :class="buttonIconOpen"></i>
|
||||
<i v-if="active" :class="buttonIconClose"></i>
|
||||
</span>
|
||||
</span>
|
||||
</slot>
|
||||
<slot name="item"></slot>
|
||||
</div>
|
||||
<div :class="contentClass" v-if="active">
|
||||
<slot></slot>
|
||||
@ -20,12 +24,13 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
"active": this.open,
|
||||
active: this.open,
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
itemClass: String,
|
||||
activeClass: {type: String, default: "is-active"},
|
||||
buttonClass: String,
|
||||
buttonIconOpen: { type: String, default:"fa fa-angle-down"},
|
||||
buttonIconClose: { type: String, default:"fa fa-angle-up"},
|
||||
|
||||
Reference in New Issue
Block a user