From 176ee7dfc78e1b611a7c2c54bd9ecd0f84884325 Mon Sep 17 00:00:00 2001 From: = Date: Wed, 26 Aug 2015 15:57:48 +0200 Subject: [PATCH 1/3] Fix control-tabs icons using filter instead of mask --- app/images/func.svg | 55 +++++++++++-- app/images/serif.svg | 62 +++++++++++++-- app/images/style.svg | 77 ++++++++++++++++--- .../components/controls-tabs.components.jsx | 10 +-- app/styles/components/controls-tabs.scss | 39 +++++----- 5 files changed, 194 insertions(+), 49 deletions(-) diff --git a/app/images/func.svg b/app/images/func.svg index 2274adb9a..3b180806e 100644 --- a/app/images/func.svg +++ b/app/images/func.svg @@ -1,8 +1,49 @@ - + - - - - + +image/svg+xml \ No newline at end of file diff --git a/app/images/serif.svg b/app/images/serif.svg index 85081d0c1..9ba51c82e 100644 --- a/app/images/serif.svg +++ b/app/images/serif.svg @@ -1,8 +1,56 @@ - + - - - - - + +image/svg+xml \ No newline at end of file diff --git a/app/images/style.svg b/app/images/style.svg index 8d4a17a95..1a3863334 100644 --- a/app/images/style.svg +++ b/app/images/style.svg @@ -1,11 +1,68 @@ - + - - - - - - - - + +image/svg+xml \ No newline at end of file diff --git a/app/scripts/components/controls-tabs.components.jsx b/app/scripts/components/controls-tabs.components.jsx index f15886503..244364155 100644 --- a/app/scripts/components/controls-tabs.components.jsx +++ b/app/scripts/components/controls-tabs.components.jsx @@ -20,12 +20,10 @@ export class ControlsTabs extends React.Component { }); return ( -
  • - { - this.changeTab(name) - }} key={`${name}ControlsHeader`}> - +
  • { + this.changeTab(name) + }} key={`${name}ControlsHeader`}>
    {name}
    • ); diff --git a/app/styles/components/controls-tabs.scss b/app/styles/components/controls-tabs.scss index edd0878db..a78fd0920 100644 --- a/app/styles/components/controls-tabs.scss +++ b/app/styles/components/controls-tabs.scss @@ -23,22 +23,26 @@ height:72px; float:left; width:90px; - background: lighten($dark-grey, 2%) no-repeat center; + background-color: $medium-grey no-repeat center; + background-repeat: no-repeat; + background-position: 50% 50%; + filter: contrast(40%); cursor: pointer; position:relative; border-right: $dark-grey 1px solid; + transition: background-color 300ms ease; &.is-active, &:hover { - background-color:$green; + background-color: $green; + filter: contrast(100%); border: none; - transition: all 300ms ease; .controls-tabs-icon-legend { display: none; } } &-legend { - color: $medium-grey; + color: white; position: absolute; bottom: 5px; text-align: center; @@ -55,10 +59,7 @@ display: block; width: 0; height: 0; - } - &.is-active:after { - -webkit-transform: translate(35px, 8px); transform: translate(35px, 8px); border-left: 10px solid transparent; border-right: 10px solid transparent; @@ -66,26 +67,26 @@ } } - &-icon span { - background-color: $medium-grey; + // &-icon span { + // background-color: $medium-grey; + // + // &.is-active, &:hover { + // background-color: white; + // } + // } + - &.is-active, &:hover { - background-color: white; - } - } } +// TODO: ids are forbidden, get rid of 'em #Func { - -webkit-mask: url('./images/func.svg') no-repeat 50% 50%; - mask: url('./images/func.svg') no-repeat 50% 50%; + background-image: url('./images/func.svg'); } #Style { - -webkit-mask: url('./images/style.svg') no-repeat 50% 50%; - mask: url('./images/style.svg') no-repeat 50% 50%; + background-image: url('./images/style.svg'); } #Serif { - -webkit-mask: url('./images/serif.svg') no-repeat 50% 50%; - mask: url('./images/serif.svg') no-repeat 50% 50%; + background-image: url('./images/serif.svg'); } From 6504bff8ee712b3c40102fb11fe8c997327eb8a1 Mon Sep 17 00:00:00 2001 From: = Date: Wed, 26 Aug 2015 16:29:06 +0200 Subject: [PATCH 2/3] Use textfield appearance for input[type=number] --- app/styles/components/sliders.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/app/styles/components/sliders.scss b/app/styles/components/sliders.scss index 1f60b3189..b25c7fb61 100644 --- a/app/styles/components/sliders.scss +++ b/app/styles/components/sliders.scss @@ -17,8 +17,7 @@ margin-left: 0.8rem; display: inline-block; cursor: pointer; - //TODO(franz): integrate in theme - color: #7e7e7e; + color: $medium-grey; transition: opacity 500ms ease; } @@ -34,8 +33,11 @@ background: none; border: 0; border-radius: 0; - //TODO(franz): integrate in theme - color: #7e7e7e; + color: $medium-grey; + + // we'll use textfield appearance until we've figured out sth better + -moz-appearance: textfield; + -webkit-appearance: textfield; } &-controller { @@ -82,7 +84,6 @@ } .sliders { - //TODO(franz): integrate in theme - color:$white; + color: $white; padding:1rem; } From 1e788fb47dc453db912eb3920464d5f8db197584 Mon Sep 17 00:00:00 2001 From: = Date: Wed, 26 Aug 2015 16:45:41 +0200 Subject: [PATCH 3/3] Optimize svg --- app/images/func.svg | 50 +---------------- app/images/serif.svg | 57 +------------------- app/images/style.svg | 69 +----------------------- app/styles/components/controls-tabs.scss | 10 ---- 4 files changed, 3 insertions(+), 183 deletions(-) diff --git a/app/images/func.svg b/app/images/func.svg index 3b180806e..72eb60f30 100644 --- a/app/images/func.svg +++ b/app/images/func.svg @@ -1,49 +1 @@ - - - -image/svg+xml \ No newline at end of file + diff --git a/app/images/serif.svg b/app/images/serif.svg index 9ba51c82e..6c409f221 100644 --- a/app/images/serif.svg +++ b/app/images/serif.svg @@ -1,56 +1 @@ - - - -image/svg+xml \ No newline at end of file + diff --git a/app/images/style.svg b/app/images/style.svg index 1a3863334..92dbe32b5 100644 --- a/app/images/style.svg +++ b/app/images/style.svg @@ -1,68 +1 @@ - - - -image/svg+xml \ No newline at end of file + diff --git a/app/styles/components/controls-tabs.scss b/app/styles/components/controls-tabs.scss index a78fd0920..1be32c2e4 100644 --- a/app/styles/components/controls-tabs.scss +++ b/app/styles/components/controls-tabs.scss @@ -66,16 +66,6 @@ border-top: 10px solid $green; } } - - // &-icon span { - // background-color: $medium-grey; - // - // &.is-active, &:hover { - // background-color: white; - // } - // } - - } // TODO: ids are forbidden, get rid of 'em