mirror of
https://github.com/YunoHost/yunohost-admin.git
synced 2024-09-03 20:06:15 +02:00
use variables instead of hardcoded styles
This commit is contained in:
axolotle
parent
d9deee78e7
commit
5f1ae01222
8 changed files with 32 additions and 34 deletions
|
|
@ -210,7 +210,7 @@ main {
|
|||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid #eee;
|
||||
border-top: $thin-border;
|
||||
font-size: $font-size-sm;
|
||||
margin-top: 2rem;
|
||||
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export default {
|
|||
async fetch (method, uri, data = {}, { wait = true, websocket = true, initial = false, asFormData = false } = {}) {
|
||||
// `await` because Vuex actions returns promises by default.
|
||||
const request = await store.dispatch('INIT_REQUEST', { method, uri, initial, wait, websocket })
|
||||
|
||||
console.log(JSON.parse(JSON.stringify(request)), data)
|
||||
if (websocket) {
|
||||
await openWebSocket(request)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,6 +60,9 @@ $alert-padding-x: 1rem;
|
|||
$card-spacer-y: .6rem;
|
||||
$card-spacer-x: 1rem;
|
||||
|
||||
$input-btn-padding-y: .45rem;
|
||||
|
||||
$list-group-item-padding-x: 1rem;
|
||||
|
||||
// Import default variables after the above setup to compute all other variables.
|
||||
@import '~bootstrap/scss/functions.scss';
|
||||
|
|
@ -68,8 +71,11 @@ $card-spacer-x: 1rem;
|
|||
@import '~bootstrap-vue/src/variables';
|
||||
|
||||
|
||||
$body-color: $gray-800;
|
||||
|
||||
$hr-border-color: $gray-200;
|
||||
|
||||
$list-group-action-color: $gray-800;
|
||||
|
||||
// ╭──────────────────────────────────────╮
|
||||
// │ ┌─╴╭─╮┌─╮╷ ╭ ╭─┐╷╷╷┌─╴╭─╴╭─╮╭╮╮┌─╴ │
|
||||
|
|
@ -81,16 +87,15 @@ $card-spacer-x: 1rem;
|
|||
// default: `app/node_modules/fork-awesome/scss/_variables.scss`
|
||||
|
||||
$fa-font-path: '~fork-awesome/fonts';
|
||||
$fa-font-size-base: 1rem;
|
||||
$fa-font-size-base: $font-size-base;
|
||||
|
||||
@import '~fork-awesome/scss/variables';
|
||||
|
||||
|
||||
$thin-border: 1px solid #eee;
|
||||
// ╭────────────────────╮
|
||||
// │ ╭─╴╷ ╷╭─╴╶┬╴╭─╮╭╮╮ │
|
||||
// │ │ │ │╰─╮ │ │ ││││ │
|
||||
// │ ╰─╴╰─╯╶─╯ ╵ ╰─╯╵╵╵ │
|
||||
// ╰────────────────────╯
|
||||
|
||||
$skeleton-color: #eaeaea;
|
||||
$thin-border: $hr-border-width solid $hr-border-color;
|
||||
|
|
|
|||
|
|
@ -25,8 +25,6 @@ body {
|
|||
overflow-x: hidden;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#app {
|
||||
|
|
@ -37,29 +35,29 @@ body {
|
|||
|
||||
.menu-list {
|
||||
.list-group-item {
|
||||
padding: 0.75rem 0;
|
||||
padding: $list-group-item-padding-y 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.font-weight-bold {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
// Bootstrap overrides
|
||||
|
||||
.list-group-item {
|
||||
padding: 0.75rem 1rem;
|
||||
// Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
|
||||
@each $color, $value in $theme-colors {
|
||||
@include list-group-item-variant($color, theme-color-level($color, -11), theme-color-level($color, 6));
|
||||
}
|
||||
.list-group-item-action {
|
||||
color: #333;
|
||||
|
||||
// Add breakpoints for w-*
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@each $size, $length in $sizes {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.w-#{$breakpoint}-#{$size} {
|
||||
width: $length !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Allow state of input group to be displayed under the group
|
||||
|
|
@ -94,15 +92,15 @@ body {
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
.card, .list-group-item {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.card-header, .list-group-item {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 400;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -117,7 +115,7 @@ body {
|
|||
}
|
||||
|
||||
.list-group-item .icon {
|
||||
margin-left: 0.3em;
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
|
||||
// Fork-awesome overrides
|
||||
|
|
@ -141,8 +139,3 @@ code {
|
|||
padding: 1rem;
|
||||
background-color: $light;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 1em;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
:to="{ name: item.routeName }"
|
||||
>
|
||||
<icon :iname="item.icon" class="lg" />
|
||||
<h2>{{ $t(item.translation) }}</h2>
|
||||
<h4>{{ $t(item.translation) }}</h4>
|
||||
<icon iname="chevron-right" class="lg fs-sm ml-auto" />
|
||||
</b-list-group-item>
|
||||
</b-list-group>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<view-base :queries="queries" @queries-response="onQueriesResponse" ref="view">
|
||||
<!-- BASIC INFOS -->
|
||||
<card v-if="infos" :title="`${infos.label}`" icon="cube">
|
||||
<card v-if="infos" :title="infos.label" icon="cube">
|
||||
<b-row
|
||||
v-for="(value, prop) in infos" :key="prop"
|
||||
no-gutters class="row-line"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
:to="{name: item.routeName}"
|
||||
>
|
||||
<icon :iname="item.icon" class="lg" />
|
||||
<h2>{{ $t(item.translation) }}</h2>
|
||||
<h4>{{ $t(item.translation) }}</h4>
|
||||
<icon iname="chevron-right" class="lg fs-sm ml-auto" />
|
||||
</b-list-group-item>
|
||||
</b-list-group>
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ export default {
|
|||
|
||||
.row {
|
||||
+ .row {
|
||||
border-top: 1px solid #eee;
|
||||
border-top: $thin-border;
|
||||
}
|
||||
|
||||
padding: .5rem;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue