Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

unification of stylings

Browse source
This commit is contained in:
Henry Jameson 2018-11-20 22:14:49 +03:00
parent 32132e225c
commit 2609c0d0d2
5 changed files with 104 additions and 310 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/App.scss
View file

@ -64,6 +64,11 @@ button {
font-size: 14px;
font-family: sans-serif;
i[class*=icon-] {
color: $fallback--text;
color: var(--btnText, $fallback--text);
}
&::-moz-focus-inner {
border: none;
}
@ -145,6 +150,14 @@ input, textarea, .select {
line-height: 16px;
}
&[type=range] {
background: none;
border: none;
margin: 0;
box-shadow: none;
flex: 1;
}
&[type=radio],
&[type=checkbox] {
display: none;

35
src/components/color_input/color_input.vue
View file

@ -5,7 +5,7 @@
</label>
<input
v-if="typeof fallback !== 'undefined'"
class="opt"
class="opt exlcude-disabled"
:id="name + '-o'"
type="checkbox"
:checked="present"
@ -45,40 +45,9 @@ export default {
<style lang="scss">
.color-control {
display: flex;
align-items: baseline;
&.disabled *:not(.opt-l){
opacity: .5
}
.label {
flex: 2;
min-width: 7em;
}
.opt-l {
align-self: center;
flex: 0;
&::before {
width: 14px;
height: 14px;
}
}
.text-input {
input.text-input {
max-width: 7em;
flex: 1;
}
.color-input {
flex: 0;
padding: 1px;
cursor: pointer;
height: 29px;
min-width: 2em;
border: none;
align-self: stretch;
}
}
</style>

42
src/components/opacity_input/opacity_input.vue
View file

@ -5,7 +5,7 @@
</label>
<input
v-if="typeof fallback !== 'undefined'"
class="opt"
class="opt exclude-disabled"
:id="name + '-o'"
type="checkbox"
:checked="present"
@ -36,43 +36,3 @@ export default {
}
}
</script>
<style lang="scss">
.opacity-control {
display: flex;
align-items: baseline;
&.disabled *:not(.opt-l) {
opacity: .5
}
.opt-l {
align-self: center;
&::before {
width: 14px;
height: 14px;
}
}
.label {
flex: 2;
min-width: 7em;
}
.input-range {
background: none;
border: none;
margin: 0;
height: auto;
box-shadow: none;
min-width: 7em;
flex: 1;
}
.input-number {
margin: 0;
min-width: 4em;
flex: 0;
}
}
</style>

48
src/components/shadow_control/shadow_control.vue
View file

@ -39,7 +39,7 @@
</div>
<div class="shadow-tweak">
<div :disabled="usingFallback" class="id-control">
<div :disabled="usingFallback" class="id-control style-control">
<label for="shadow-switcher" class="select">
<select
v-model="selectedId" class="shadow-switcher"
@ -64,7 +64,7 @@
<i class="icon-plus"/>
</button>
</div>
<div :disabled="!present" class="inset-control">
<div :disabled="!present" class="inset-control style-control">
<label for="inset" class="label">
{{$t('settings.style.shadows.inset')}}
</label>
@ -77,7 +77,7 @@
type="checkbox">
<label class="checkbox-label" for="inset"></label>
</div>
<div :disabled="!present" class="blur-control">
<div :disabled="!present" class="blur-control style-control">
<label for="spread" class="label">
{{$t('settings.style.shadows.blur')}}
</label>
@ -97,7 +97,7 @@
type="number"
min="0">
</div>
<div :disabled="!present" class="spread-control">
<div :disabled="!present" class="spread-control style-control">
<label for="spread" class="label">
{{$t('settings.style.shadows.spread')}}
</label>
@ -137,6 +137,11 @@
flex-wrap: wrap;
justify-content: center;
.shadow-preview-container,
.shadow-tweak {
margin: 5px 6px 0 0;
}
.shadow-preview-container {
flex: 0;
display: flex;
@ -210,39 +215,18 @@
}
.shadow-tweak {
.label {
flex: 1;
min-width: 3em;
}
.inset-control {
justify-content: flex-end;
label {
flex: 0
.id-control {
align-items: stretch;
.select, .btn {
margin-right: 5px;
}
}
.blur-control,
.id-control,
.inset-control,
.spread-control {
display: flex;
align-items: baseline;
max-width: 100%;
&[disabled=disabled] *{
opacity: .5
}
.input-range {
.select {
flex: 1;
align-self: center;
select {
align-self: initial;
}
.input-number {
width: 4em;
min-width: 4em;
flex: 0;
}
}
}

156
src/components/style_switcher/style_switcher.vue
View file

@ -1,10 +1,10 @@
<template>
<div>
<div class="style-switcher">
<div class="presets-container">
<div>
{{$t('settings.presets')}}
<label for="style-switcher" class='select'>
<select id="style-switcher" v-model="selected" class="style-switcher">
<label for="preset-switcher" class='select'>
<select id="preset-switcher" v-model="selected" class="preset-switcher">
<option v-for="style in availableStyles"
:value="style"
:style="{
@ -46,7 +46,8 @@
</div>
<p>{{$t('settings.theme_help')}}</p>
<tab-switcher>
<keep-alive>
<tab-switcher key="style-tweak">
<div :label="$t('settings.style.basic_colors._tab_label')" class="color-container">
<div class="color-item">
<h4>{{ $t('settings.style.basic_colors.main') }}</h4>
@ -171,9 +172,10 @@
</div>
</div>
<div :label="$t('settings.style.shadows._tab_label')" class="shadow-container">
<div class="shadow-selector">
<div>
{{$t('settings.style.shadows.component')}}
<label for="shadow-switcher" class="shadow-selector select">
<label for="shadow-switcher" class="select">
<select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher">
<option v-for="shadow in shadowsAvailable"
:value="shadow">
@ -182,6 +184,8 @@
</select>
<i class="icon-down-open"/>
</label>
</div>
<div class="override">
<label for="override" class="label">
{{$t('settings.style.shadows.override')}}
</label>
@ -193,9 +197,11 @@
type="checkbox">
<label class="checkbox-label" for="override"></label>
</div>
</div>
<shadow-control v-if="currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
</div>
</tab-switcher>
</keep-alive>
<div class="apply-container">
<button class="btn submit" @click="setCustomTheme">{{$t('general.apply')}}</button>
@ -205,142 +211,4 @@
<script src="./style_switcher.js"></script>
<style lang="scss">
@import '../../_variables.scss';
.style-switcher {
margin-right: 1em;
}
.import-warning {
color: $fallback--cRed;
color: var(--cRed, $fallback--cRed);
}
.apply-container,
.radius-container,
.color-container,
.presets-container {
display: flex;
p {
margin-left: 1em
}
}
.radius-container {
flex-direction: column;
}
.color-container{
flex-wrap: wrap;
justify-content: space-between;
}
.presets-container {
justify-content: center;
.import-export {
display: flex;
.btn {
margin-left: .5em;
}
}
}
.preview-container {
border-top: 1px dashed;
border-bottom: 1px dashed;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
margin: 1em -1em 0;
padding: 1em;
background: var(--body-background-image);
background-size: cover;
background-position: 50% 50%;
.btn {
margin-top: 1em;
min-height: 30px;
width: 10em;
}
}
.apply-container {
justify-content: center;
}
.radius-item,
.color-item {
min-width: 20em;
margin: 5px 6px 0 0;
display:flex;
flex-direction: column;
flex: 1 1 0;
&.wide {
min-width: 60%
}
&:not(.wide):nth-child(2n+1) {
margin-right: 7px;
}
.color, .opacity {
display:flex;
align-items: baseline;
}
h4 {
margin-top: 1em;
}
}
.radius-item {
flex-basis: auto;
}
.theme-radius-rn,
.theme-color-cl {
border: 0;
box-shadow: none;
background: transparent;
color: var(--faint, $fallback--faint);
align-self: stretch;
}
.theme-color-cl,
.theme-radius-in,
.theme-color-in {
margin-left: 4px;
}
.theme-radius-in {
min-width: 1em;
}
.theme-radius-in {
max-width: 7em;
flex: 1;
}
.theme-radius-lb{
max-width: 50em;
}
.theme-preview-content {
padding: 20px;
}
.dummy {
.avatar {
background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
color: black;
text-align: center;
height: 48px;
line-height: 48px;
width: 48px;
float: left;
margin-right: 1em;
}
}
</style>
<style src="./style_switcher.scss" lang="scss"></style>