From 96804d42f0f6aa6af85295933af6fd267b19e473 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 7 Oct 2018 19:59:22 +0300 Subject: Some themeing is working!! --- src/components/tab_switcher/tab_switcher.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src/components/tab_switcher') diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index 374a19c5..578caec2 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -17,8 +17,8 @@ .tab, &::after, &::before { border-bottom: 1px solid; - border-bottom-color: $fallback--btn; - border-bottom-color: var(--btn, $fallback--btn); + border-bottom-color: $fallback--fg; + border-bottom-color: var(--fg, $fallback--fg); } .tab { @@ -28,8 +28,8 @@ &:not(.active) { border-bottom: 1px solid; - border-bottom-color: $fallback--btn; - border-bottom-color: var(--btn, $fallback--btn); + border-bottom-color: $fallback--fg; + border-bottom-color: var(--fg, $fallback--fg); z-index: 4; } -- cgit v1.2.3-70-g09d2 From 4d77b0c86bbd711e76e8ed23b6b227332bbea3cf Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 7 Oct 2018 22:03:34 +0300 Subject: Transparency works without exploding now. All nice. --- src/components/opacity_input/opacity_input.vue | 19 ++++++++- src/components/style_switcher/style_switcher.js | 28 +++++++----- src/components/style_switcher/style_switcher.vue | 24 ++++------- src/components/tab_switcher/tab_switcher.scss | 8 ++-- src/services/style_setter/style_setter.js | 54 +++++++++++++++++------- 5 files changed, 87 insertions(+), 46 deletions(-) (limited to 'src/components/tab_switcher') diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue index cfe6de21..09972868 100644 --- a/src/components/opacity_input/opacity_input.vue +++ b/src/components/opacity_input/opacity_input.vue @@ -22,6 +22,16 @@ max="1" min="0" step=".05"> + @@ -64,12 +74,17 @@ export default { align-self: center; background: none; border: none; - padding: 0; margin: 0; height: auto; box-shadow: none; - min-width: 9em; + min-width: 7em; flex: 1; } + .input-number { + align-self: center; + margin: 0; + min-width: 4em; + flex: 0; + } } diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 203ca18a..c419a9ce 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -17,7 +17,6 @@ export default { bgOpacityLocal: undefined, fgColorLocal: '', - fgOpacityLocal: undefined, fgTextColorLocal: undefined, fgLinkColorLocal: undefined, @@ -37,7 +36,6 @@ export default { topBarColorLocal: undefined, topBarTextColorLocal: undefined, topBarLinkColorLocal: undefined, - topBarOpacityLocal: undefined, alertOpacityLocal: undefined, @@ -112,6 +110,15 @@ export default { cGreen: this.cGreenColorLocal, cOrange: this.cOrangeColorLocal }, + opacity: { + bg: this.bgOpacityLocal, + btn: this.btnOpacityLocal, + input: this.inputOpacityLocal, + panel: this.panelOpacityLocal, + topBar: this.topBarOpacityLocal, + border: this.borderOpacityLocal, + faint: this.faintOpacityLocal + }, radii: { btnRadius: this.btnRadiusLocal, inputRadius: this.inputRadiusLocal, @@ -136,8 +143,7 @@ export default { } }, previewTheme () { - if (!this.preview.theme) return { colors: {}, radii: {} } - console.log(this.preview.theme) + if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {} } return this.preview.theme }, previewRules () { @@ -226,7 +232,6 @@ export default { clearV1 () { this.bgOpacityLocal = undefined this.fgOpacityLocal = undefined - this.fgTextColorLocal = undefined this.fgLinkColorLocal = undefined this.btnColorLocal = undefined @@ -239,6 +244,7 @@ export default { this.panelColorLocal = undefined this.panelTextColorLocal = undefined + this.panelFaintColorLocal = undefined this.panelOpacityLocal = undefined this.topBarColorLocal = undefined @@ -246,8 +252,6 @@ export default { this.topBarLinkColorLocal = undefined this.topBarOpacityLocal = undefined - this.alertOpacityLocal = undefined - this.borderColorLocal = undefined this.borderOpacityLocal = undefined @@ -264,6 +268,7 @@ export default { normalizeLocalState (input, version = 0) { const colors = input.colors || input const radii = input.radii || input + const opacity = input.opacity || input if (version === 0) { if (input.version) version = input.version @@ -277,11 +282,8 @@ export default { } } - console.log('BENIS') - console.log(version) // Stuff that differs between V1 and V2 if (version === 1) { - console.log(colors) this.fgColorLocal = rgb2hex(colors.btn) this.textColorLocal = rgb2hex(colors.fg) } @@ -302,6 +304,7 @@ export default { this[key + 'ColorLocal'] = rgb2hex(colors[key]) }) + // TODO optimize this this.btnRadiusLocal = radii.btnRadius || 4 this.inputRadiusLocal = radii.inputRadius || 4 this.panelRadiusLocal = radii.panelRadius || 10 @@ -309,6 +312,11 @@ export default { this.avatarAltRadiusLocal = radii.avatarAltRadius || 50 this.tooltipRadiusLocal = radii.tooltipRadius || 2 this.attachmentRadiusLocal = radii.attachmentRadius || 5 + + Object.entries(opacity).forEach(([k, v]) => { + if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return + this[k + 'OpacityLocal'] = v + }) } }, watch: { diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 7ddc2d1c..1b00603c 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -51,13 +51,12 @@
- +
-
@@ -71,7 +70,7 @@

Alert opacity

- +
@@ -80,39 +79,38 @@

Panel header

- +

Top bar

-

Inputs

- +

Buttons

- +

Borders

- +

Faint text

- - - + + +
@@ -255,10 +253,6 @@ label { color: var(--faint, $fallback--faint); } - .opacity-control { - margin-top: 5px; - margin-bottom: 5px; - } } .radius-item { diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index 578caec2..6f3f9f27 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -17,8 +17,8 @@ .tab, &::after, &::before { border-bottom: 1px solid; - border-bottom-color: $fallback--fg; - border-bottom-color: var(--fg, $fallback--fg); + border-bottom-color: $fallback--border; + border-bottom-color: var(--border, $fallback--border); } .tab { @@ -28,8 +28,8 @@ &:not(.active) { border-bottom: 1px solid; - border-bottom-color: $fallback--fg; - border-bottom-color: var(--fg, $fallback--fg); + border-bottom-color: $fallback--border; + border-bottom-color: var(--border, $fallback--border); z-index: 4; } diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index cc408933..4de39f79 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -90,7 +90,6 @@ const setColors = (input, commit) => { } const generatePreset = (input) => { - console.log(input) const radii = input.radii || { btnRadius: input.btnRadius, inputRadius: input.inputRadius, @@ -101,6 +100,12 @@ const generatePreset = (input) => { attachmentRadius: input.attachmentRadius } const colors = {} + const opacity = Object.assign({ + alert: 0.5, + input: 0.5, + faint: 0.5 + }, input.opacity) + const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => { if (typeof v === 'object') { acc[k] = v @@ -110,11 +115,13 @@ const generatePreset = (input) => { return acc }, {}) + const isLightOnDark = convert(col.bg).hsl.l < convert(col.text).hsl.l + const mod = isLightOnDark ? 1 : -1 + colors.text = col.text - colors.lightText = colors.text + colors.lightText = brightness(20 * mod, colors.text).rgb colors.link = col.link - colors.border = col.border || col.fg - colors.faint = col.faint || col.text + colors.faint = col.faint || Object.assign({}, col.text) colors.bg = col.bg colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb @@ -123,21 +130,23 @@ const generatePreset = (input) => { colors.fgText = col.fgText || getTextColor(colors.fg, colors.text) colors.fgLink = col.fgLink || getTextColor(colors.fg, colors.link) - colors.btn = col.btn || col.fg + colors.border = col.border || brightness(20 * mod, colors.fg).rgb + + colors.btn = col.btn || Object.assign({}, col.fg) colors.btnText = col.btnText || getTextColor(colors.btn, colors.fgText) - colors.input = col.input || col.fg - colors.inputText = col.inputText || getTextColor(colors.input, colors.fgText) + colors.input = col.input || Object.assign({}, col.fg) + colors.inputText = col.inputText || getTextColor(colors.input, colors.lightText) - colors.panel = col.panel || col.fg + colors.panel = col.panel || Object.assign({}, col.fg) colors.panelText = col.panelText || getTextColor(colors.panel, colors.fgText) colors.panelFaint = col.panelFaint || getTextColor(colors.panel, colors.faint) - colors.topBar = col.topBar || col.fg + colors.topBar = col.topBar || Object.assign({}, col.fg) colors.topBarText = col.topBarText || getTextColor(colors.topBar, colors.fgText) colors.topBarLink = col.topBarLink || getTextColor(colors.topBar, colors.fgLink) - colors.faintLink = col.faintLink || col.link + colors.faintLink = col.faintLink || Object.assign({}, col.link) colors.icon = mixrgb(colors.bg, colors.text) @@ -146,20 +155,35 @@ const generatePreset = (input) => { colors.cGreen = col.cGreen colors.cOrange = col.cOrange - colors.cAlertRed = col.cAlertRed || Object.assign({ a: 0.5 }, col.cRed) + colors.cAlertRed = col.cAlertRed || Object.assign({}, col.cRed) + + Object.entries(opacity).forEach(([ k, v ]) => { + if (typeof v === 'undefined') return + if (k === 'alert') { + colors.cAlertRed.a = v + return + } + if (k === 'faint') { + colors[k + 'Link'].a = v + colors['panelFaint'].a = v + } + colors[k].a = v + }) const htmlColors = Object.entries(colors) .reduce((acc, [k, v]) => { if (!v) return acc - acc[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v) + acc.solid[k] = rgb2hex(v) + acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v) return acc - }, {}) + }, { complete: {}, solid: {} }) return { - colorRules: Object.entries(htmlColors).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';'), + colorRules: Object.entries(htmlColors.complete).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';'), radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';'), theme: { - colors: htmlColors, + colors: htmlColors.solid, + opacity, radii } } -- cgit v1.2.3-70-g09d2 From d7af2c8419df59d8b897bc57e94f6cc67bd60eca Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 20 Nov 2018 23:25:38 +0300 Subject: mentioned bug in tab-switcher, made shadow-control work in zero-state --- src/components/shadow_control/shadow_control.js | 19 +++++++++++++------ src/components/shadow_control/shadow_control.vue | 7 +++---- src/components/style_switcher/style_switcher.js | 4 ++++ src/components/style_switcher/style_switcher.vue | 2 +- src/components/tab_switcher/tab_switcher.jsx | 2 ++ 5 files changed, 23 insertions(+), 11 deletions(-) (limited to 'src/components/tab_switcher') diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js index 54813685..b4f48668 100644 --- a/src/components/shadow_control/shadow_control.js +++ b/src/components/shadow_control/shadow_control.js @@ -37,9 +37,12 @@ export default { this.selectedId += 1 } }, + beforeUpdate () { + this.cValue = this.value || this.fallback + }, computed: { selected () { - return this.cValue[this.selectedId] || { + return this.isReady && this.cValue[this.selectedId] || { x: 0, y: 0, blur: 0, @@ -50,13 +53,17 @@ export default { } }, moveUpValid () { - return this.selectedId > 0 + return this.isReady && this.selectedId > 0 }, moveDnValid () { - return this.selectedId < this.cValue.length - 1 + return this.isReady && this.selectedId < this.cValue.length - 1 + }, + isReady () { + return typeof this.cValue !== 'undefined' }, present () { - return typeof this.cValue[this.selectedId] !== 'undefined' && + return this.isReady && + typeof this.cValue[this.selectedId] !== 'undefined' && !this.usingFallback }, usingFallback () { @@ -66,9 +73,9 @@ export default { return hex2rgb(this.selected.color) }, style () { - return { + return this.isReady ? { boxShadow: getCssShadow(this.cValue) - } + } : {} } } } diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue index cd774d32..f8066947 100644 --- a/src/components/shadow_control/shadow_control.vue +++ b/src/components/shadow_control/shadow_control.vue @@ -43,7 +43,7 @@ - - @@ -137,7 +137,6 @@ flex-wrap: wrap; justify-content: center; - .shadow-preview-container, .shadow-tweak { margin: 5px 6px 0 0; diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 7cb6197c..acb1764d 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -93,6 +93,9 @@ export default { }, mounted () { this.normalizeLocalState(this.$store.state.config.customTheme) + if (typeof this.shadowSelected === 'undefined') { + this.shadowSelected = this.shadowsAvailable[0] + } }, computed: { selectedVersion () { @@ -180,6 +183,7 @@ export default { if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {} } return this.preview.theme }, + // This needs optimization maybe previewContrast () { if (!this.previewTheme.colors.bg) return {} const colors = this.previewTheme.colors diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 5f0c2566..5cf75636 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -198,7 +198,7 @@ - + diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx index 3fff38f6..ea582450 100644 --- a/src/components/tab_switcher/tab_switcher.jsx +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -1,5 +1,7 @@ import Vue from 'vue' +// FIXME: This doesn't like v-if directly inside the tab's contents, breaks vue really bad + import './tab_switcher.scss' export default Vue.component('tab-switcher', { -- cgit v1.2.3-70-g09d2 From acf414e4517434d8847e842930c697b168d94cde Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 21 Nov 2018 07:38:00 +0300 Subject: changed the way tab-switcher works to avoid removing/adding nodes since that seems to cause issues, instead hiding nodes with css. --- src/components/tab_switcher/tab_switcher.jsx | 19 ++++++++++--------- src/components/tab_switcher/tab_switcher.scss | 5 +++++ 2 files changed, 15 insertions(+), 9 deletions(-) (limited to 'src/components/tab_switcher') diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx index ea582450..a044b740 100644 --- a/src/components/tab_switcher/tab_switcher.jsx +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -1,7 +1,5 @@ import Vue from 'vue' -// FIXME: This doesn't like v-if directly inside the tab's contents, breaks vue really bad - import './tab_switcher.scss' export default Vue.component('tab-switcher', { @@ -27,11 +25,14 @@ export default Vue.component('tab-switcher', { } return () }); - const contents = ( -
- {this.$slots.default.filter(slot => slot.data)[this.active]} -
- ); + const contents = this.$slots.default.filter(_=>_.data).map(( slot, index ) => { + const active = index === this.active + return ( +
+ {slot} +
+ ) + }); return (
@@ -40,7 +41,7 @@ export default Vue.component('tab-switcher', {
{contents}
-
- ) +
+ ) } }) diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index 6f3f9f27..4740fbde 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -1,6 +1,11 @@ @import '../../_variables.scss'; .tab-switcher { + .contents { + .hidden { + display: none; + } + } .tabs { display: flex; position: relative; -- cgit v1.2.3-70-g09d2 From de88cfb94d9df08ad8afa7df66d499a2fa249a98 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 21 Nov 2018 21:28:22 +0300 Subject: compensate tab-switcher for fake borders --- src/components/tab_switcher/tab_switcher.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/components/tab_switcher') diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index 4740fbde..fee30800 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -13,6 +13,8 @@ width: 100%; overflow: hidden; padding-top: 5px; + height: 32px; + box-sizing: border-box; &::after, &::before { display: block; @@ -29,7 +31,7 @@ .tab { border-bottom-left-radius: 0; border-bottom-right-radius: 0; - padding: .3em 1em; + padding: .3em 1em 99px; &:not(.active) { border-bottom: 1px solid; -- cgit v1.2.3-70-g09d2 From b8b5dbf63e73e9ca7f5683cb6cca8d47e9cee49c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 21 Nov 2018 22:08:27 +0300 Subject: fix --- src/components/tab_switcher/tab_switcher.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/components/tab_switcher') diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx index a044b740..9e3dee04 100644 --- a/src/components/tab_switcher/tab_switcher.jsx +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -41,7 +41,7 @@ export default Vue.component('tab-switcher', {
{contents}
- - ) + + ) } }) -- cgit v1.2.3-70-g09d2 From cd6c5b3e33fc71d68892f5d6985a3d27125468bc Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 21 Nov 2018 23:30:47 +0300 Subject: fix for tab-switcher --- src/components/tab_switcher/tab_switcher.scss | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) (limited to 'src/components/tab_switcher') diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index fee30800..bd93e988 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -29,15 +29,24 @@ } .tab { + position: relative; border-bottom-left-radius: 0; border-bottom-right-radius: 0; - padding: .3em 1em 99px; + padding: 5px 1em 99px; &:not(.active) { - border-bottom: 1px solid; - border-bottom-color: $fallback--border; - border-bottom-color: var(--border, $fallback--border); z-index: 4; + + &::after { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 26px; + border-bottom: 1px solid; + border-bottom-color: $fallback--border; + border-bottom-color: var(--border, $fallback--border); + } } &.active { -- cgit v1.2.3-70-g09d2 From d6f7cb469c95af95791984eabeb301028962e22b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 22 Nov 2018 05:13:09 +0300 Subject: small tab-switcher tweak --- src/components/tab_switcher/tab_switcher.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'src/components/tab_switcher') diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index bd93e988..9fd9d905 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -34,6 +34,10 @@ border-bottom-right-radius: 0; padding: 5px 1em 99px; + &:hover { + z-index: 6; + } + &:not(.active) { z-index: 4; -- cgit v1.2.3-70-g09d2 From 29082e9aee3dc50acfd5f1635f1a09017b83a893 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 23 Nov 2018 00:24:16 +0300 Subject: fixed checkbox styles, optimized default shadows --- src/App.scss | 9 +---- src/components/tab_switcher/tab_switcher.scss | 8 ++--- src/services/style_setter/style_setter.js | 50 ++++++++------------------- 3 files changed, 20 insertions(+), 47 deletions(-) (limited to 'src/components/tab_switcher') diff --git a/src/App.scss b/src/App.scss index e8aa5846..3059d753 100644 --- a/src/App.scss +++ b/src/App.scss @@ -58,8 +58,6 @@ button { border-radius: $fallback--btnRadius; border-radius: var(--btnRadius, $fallback--btnRadius); cursor: pointer; - /* border-top: 1px solid rgba(255, 255, 255, 0.2); */ - /* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */ box-shadow: 0px 0px 2px black; box-shadow: var(--buttonShadow); font-size: 14px; @@ -80,8 +78,7 @@ button { } &:active { - /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */ - /* border-top: 1px solid rgba(0, 0, 0, 0.2); */ + box-shadow: var(--buttonPressedShadow); } &:disabled { @@ -106,8 +103,6 @@ input, textarea, .select { border: none; border-radius: $fallback--inputRadius; border-radius: var(--inputRadius, $fallback--inputRadius); - /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */ - /* border-top: 1px solid rgba(0, 0, 0, 0.2); */ box-shadow: 0px 0px 2px black inset; box-shadow: var(--inputShadow); background-color: $fallback--fg; @@ -184,8 +179,6 @@ input, textarea, .select { height: 1.1em; border-radius: $fallback--checkBoxRadius; border-radius: var(--checkBoxRadius, $fallback--checkBoxRadius); - border-bottom: 1px solid rgba(255, 255, 255, 0.2); - border-top: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 2px black inset; box-shadow: var(--inputShadow); margin-right: .5em; diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index 9fd9d905..d0e5ea87 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -34,13 +34,13 @@ border-bottom-right-radius: 0; padding: 5px 1em 99px; - &:hover { - z-index: 6; - } - &:not(.active) { z-index: 4; + &:hover { + z-index: 6; + } + &::after { content: ''; position: absolute; diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 4a48f419..10583722 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -256,40 +256,26 @@ const generateRadii = (input) => { } const generateShadows = (input) => { - const buttonInsetFakeBorders = [{ + const border = (top, shadow) => ({ x: 0, - y: 1, + y: top ? 1 : -1, blur: 0, spread: 0, - color: '#FFFFFF', + color: shadow ? '#000000' : '#FFFFFF', alpha: 0.2, inset: true - }, { - x: 0, - y: -1, - blur: 0, - spread: 0, - color: '#000000', - alpha: 0.2, - inset: true - }] - const inputInsetFakeBorders = [{ - x: 0, - y: 1, - blur: 0, - spread: 0, - color: '#000000', - alpha: 0.2, - inset: true - }, { + }) + const buttonInsetFakeBorders = [border(true, false), border(false, true)] + const inputInsetFakeBorders = [border(true, true), border(false, false)] + const hoverGlow = { x: 0, - y: -1, - blur: 0, + y: 0, + blur: 4, spread: 0, - color: '#FFFFFF', - alpha: 0.2, - inset: true - }] + color: '--faint', + alpha: 1 + } + const shadows = { panel: [{ x: 1, @@ -332,14 +318,8 @@ const generateShadows = (input) => { color: '#000000', alpha: 1 }, ...buttonInsetFakeBorders], - buttonHover: [{ - x: 0, - y: 0, - blur: 4, - spread: 0, - color: '--faint', - alpha: 1 - }, ...buttonInsetFakeBorders], + buttonHover: [hoverGlow, ...buttonInsetFakeBorders], + buttonPressed: [hoverGlow, ...inputInsetFakeBorders], input: [...inputInsetFakeBorders, { x: 0, y: 0, -- cgit v1.2.3-70-g09d2 From 6636c0f551a146622a1db40582140c59d3eb650d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 5 Dec 2018 12:01:24 +0300 Subject: mobile fixes --- src/components/style_switcher/style_switcher.scss | 6 ++++++ src/components/tab_switcher/tab_switcher.scss | 4 +++- src/i18n/en.json | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) (limited to 'src/components/tab_switcher') diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss index c8c5d9dd..f53f00a0 100644 --- a/src/components/style_switcher/style_switcher.scss +++ b/src/components/style_switcher/style_switcher.scss @@ -248,6 +248,12 @@ .panel-heading { .badge, .alert, .btn, .faint { margin-left: 1em; + white-space: nowrap; + } + .faint { + text-overflow: ellipsis; + min-width: 2em; + overflow-x: hidden; } .flex-spacer { flex: 1; diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index d0e5ea87..fbd3321b 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -11,7 +11,8 @@ position: relative; justify-content: center; width: 100%; - overflow: hidden; + overflow-y: hidden; + overflow-x: auto; padding-top: 5px; height: 32px; box-sizing: border-box; @@ -33,6 +34,7 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 5px 1em 99px; + white-space: nowrap; &:not(.active) { z-index: 4; diff --git a/src/i18n/en.json b/src/i18n/en.json index 890ed6c4..c0d30b59 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -273,7 +273,7 @@ "custom": "Custom" }, "preview": { - "header": "Preview of header", + "header": "Preview", "content": "Content", "error": "Example error", "button": "Button", -- cgit v1.2.3-70-g09d2