GNOME.org
 

[beast: 45/47] EBEAST: transform all lesscss to scss

commit dabe84d0a351f8e68206f07fe0bf9ca55922c9d0
Author: Tim Janik <timj gnu org>
Date:   Fri Sep 1 12:04:15 2017 +0200

    EBEAST: transform all lesscss to scss
    
    Signed-off-by: Tim Janik <timj gnu org>

 ebeast/Makefile.am         |    8 ++---
 ebeast/app.scss            |   71 +++++++++++++++++++++----------------------
 ebeast/package.json.in     |    2 +-
 ebeast/vc/aboutdialog.vue  |    4 +-
 ebeast/vc/button-bar.vue   |   14 ++++----
 ebeast/vc/button.vue       |   16 +++++-----
 ebeast/vc/icon-button.vue  |    4 +-
 ebeast/vc/mixins.scss      |   20 ++++++------
 ebeast/vc/modaldialog.vue  |   28 ++++++++--------
 ebeast/vc/playcontrols.vue |    4 +-
 ebeast/vc/projectshell.vue |    4 +-
 ebeast/vc/styles.scss      |    6 ++--
 ebeast/vc/variables.scss   |   50 +++++++++++++++---------------
 13 files changed, 114 insertions(+), 117 deletions(-)
---
diff --git a/ebeast/Makefile.am b/ebeast/Makefile.am
index 401e631..3be1ca3 100644
--- a/ebeast/Makefile.am
+++ b/ebeast/Makefile.am
@@ -95,12 +95,10 @@ run: app
 GTK2_DARK = $(shell test -f /usr/share/themes/Ambiance/gtk-2.0/gtkrc && echo 
'GTK2_RC_FILES=/usr/share/themes/Ambiance/gtk-2.0/gtkrc')
 
 # == CSS generation ==
-objects/app.css: app.less package.json
-       $(AM_V_GEN)
+objects/app.css: app.scss package.json | *.scss */*.scss
+       $(QGEN) # NOTE: scss output file names must not be temporary, since .map is derived from it
        $(Q) mkdir -p objects/.deps/
-       $(Q) ./node_modules/.bin/lessc $< $@ --source-map=$@.map
-       $(Q) ./node_modules/.bin/lessc $< $@ -M >objects/.deps/app.P
--include objects/.deps/app.P
+       $(Q) INPUT=$$(readlink -f $<) && cd $(@D) && ../node_modules/.bin/node-sass $$INPUT $(@F) 
--source-map true
 clean-local: clean-objects
 clean-objects: ; rm -rf objects/
 
diff --git a/ebeast/app.scss b/ebeast/app.scss
index 688885b..09df0ef 100644
--- a/ebeast/app.scss
+++ b/ebeast/app.scss
@@ -1,48 +1,47 @@
-@import 'vc/styles.less';
+@import 'vc/styles.scss';
 
 /* == Settings == */
-@theme-foreground:             @vc-theme-foreground;
-@theme-background:             @vc-theme-background;
-@theme-border-radius:          @vc-theme-border-radius;
-@panel-background-lg0:         @vc-panel-background-lg0;
-@panel-background-lg1:         @vc-panel-background-lg1;
-@panel-background-lg:          @vc-panel-background-lg;
-@panel-background-border:      @vc-panel-background-border;
-@panel-background-light:       @vc-panel-background-light;
-@panel-background-dark:                @vc-panel-background-dark;
-@toolbar-background:           @vc-toolbar-background;
-@toolbar-background-lg:                @vc-toolbar-background-lg;
-@button-foreground:            @vc-button-foreground;
-@button-light:                 @vc-button-light;
-@button-lg:                    @vc-button-lg;
-@button-dark:                  @vc-button-dark;
-@button-radius:                        @vc-button-radius;
-@button-border:                        @vc-button-border;
-@button-hover:                 @vc-button-hover;
-@button-active:                        @vc-button-active;
-@button-active-fg:             @vc-button-active-fg;
-@button-active-lg:             @vc-button-active-lg;
-@button-active-border:         @vc-button-active-border;
-@glow-control:                 @vc-glow-control;
-@focus-outline:                        @vc-focus-outline;
+$theme-foreground:             $vc-theme-foreground;
+$theme-background:             $vc-theme-background;
+$theme-border-radius:          $vc-theme-border-radius;
+$panel-background-lg0:         $vc-panel-background-lg0;
+$panel-background-lg1:         $vc-panel-background-lg1;
+$panel-background-lg:          $vc-panel-background-lg;
+$panel-background-border:      $vc-panel-background-border;
+$panel-background-light:       $vc-panel-background-light;
+$panel-background-dark:                $vc-panel-background-dark;
+$toolbar-background:           $vc-toolbar-background;
+$toolbar-background-lg:                $vc-toolbar-background-lg;
+$button-foreground:            $vc-button-foreground;
+$button-light:                 $vc-button-light;
+$button-lg:                    $vc-button-lg;
+$button-dark:                  $vc-button-dark;
+$button-radius:                        $vc-button-radius;
+$button-border:                        $vc-button-border;
+$button-hover:                 $vc-button-hover;
+$button-active:                        $vc-button-active;
+$button-active-fg:             $vc-button-active-fg;
+$button-active-lg:             $vc-button-active-lg;
+$button-active-border:         $vc-button-active-border;
+$glow-control:                 $vc-glow-control;
+$focus-outline:                        $vc-focus-outline;
 
 /* == Body Styles == */
 BrowserWindowDefaults          { ; /* used by main.js */
-                                 backgroundColor:          @theme-background; /* #rrggbb needed */
+                                 backgroundColor:          $theme-background; /* #rrggbb needed */
                                  defaultFontSize:          14;              /* int needed */
                                  defaultMonospaceFontSize: 13;              /* int needed */ }
-gradient-01                    { -im-convert: "-size 67x1080 -attenuate 0.2 +noise Uniform
-                                               gradient:@{panel-background-lg0}-@{panel-background-lg1}"; }
-.gradient-01-bg                        { background-color: @theme-background;
+gradient-01    { -im-convert: "-size 67x1080 -attenuate 0.2 +noise Uniform 
gradient:#{$panel-background-lg0}-#{$panel-background-lg1}"; }
+@mixin gradient-01-bg          { background-color: $theme-background;
                                  /* gradient with banding */
-                                 background-image: @panel-background-lg;
+                                 background-image: $panel-background-lg;
                                  /* gradient image with reduced banding */
                                  background: url(gradient-01.png) center repeat-x; background-size: auto 
100%; }
 html                           { width: 100vw; height: 100vh; font-family: sans; }
 body                           { width: 100%; height: 100%; overflow: hidden; font: inherit;
-                                 padding: 0; margin: 0; color: @theme-foreground;
-                                 .gradient-01-bg; }
-body.window-inactive           { color: fade(@theme-foreground, 80%); }
+                                 padding: 0; margin: 0; color: $theme-foreground;
+                                 @include gradient-01-bg; }
+body.window-inactive           { color: fade($theme-foreground, 80%); }
 *                              { box-sizing: border-box; text-overflow: ellipsis; }
 
 /* == Scrollbars == */
@@ -52,15 +51,15 @@ body.window-inactive                { color: fade(@theme-foreground, 80%); }
                                  background-image: linear-gradient(45deg,
                                                                    #111 0%, #444 50%,
                                                                    #333 50%, #aaa 100%); }
-::-webkit-scrollbar-thumb      { background: @glow-control; -webkit-border-radius: 0.1ex;
+::-webkit-scrollbar-thumb      { background: $glow-control; -webkit-border-radius: 0.1ex;
                                  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); }
 ::-webkit-scrollbar-thumb:window-inactive      { background: #333;
-                                                 /* background: fade(@glow-control, 20%); */
+                                                 /* background: fade($glow-control, 20%); */
                                                  -webkit-box-shadow: none; }
 
 /* == Application Widgets == */
 .PlayControls                  { padding: 1em; margin: 1em;
-                                 background-color: @toolbar-background; background-image: 
@toolbar-background-lg; }
+                                 background-color: $toolbar-background; background-image: 
$toolbar-background-lg; }
 .StatusBar                     { text-align: left; background-color: #000; }
 .StatusBar .StatusField                { padding-left: 1em; }
 
diff --git a/ebeast/package.json.in b/ebeast/package.json.in
index 37d4d40..9a460e1 100644
--- a/ebeast/package.json.in
+++ b/ebeast/package.json.in
@@ -6,7 +6,7 @@
   "dependencies":    { "electron": "^1.4.15", "mithril": "^1.0.1",
                       "vue": "^2.2.6",
                       "jquery": "^3.1.1", "font-awesome": "^4.7.0" },
-  "devDependencies": { "node-gyp": "^3.5.0", "less": "^2.7.2",
+  "devDependencies": { "node-gyp": "^3.5.0", "node-sass": "^4.5.3",
                       "electron-packager": "^8.6.0",
                       "browserify": "^14.1.0",
                       "vueify": "^9.4.1",
diff --git a/ebeast/vc/aboutdialog.vue b/ebeast/vc/aboutdialog.vue
index 2210b3c..4895d14 100644
--- a/ebeast/vc/aboutdialog.vue
+++ b/ebeast/vc/aboutdialog.vue
@@ -6,8 +6,8 @@
   - **close** - A *close* event is emitted once the "Close" button activated.
 </docs>
 
-<style lang="less">
-  @import 'mixins.less';
+<style lang="scss">
+  @import 'mixins.scss';
   .vc-aboutdialog .vc-modaldialog-container    { max-width: 70em; }
   .vc-aboutdialog table        { table-layout: fixed; max-width: 100%; }
   .vc-aboutdialog th   { text-align: right; padding-right: .5em; min-width: 15em; }
diff --git a/ebeast/vc/button-bar.vue b/ebeast/vc/button-bar.vue
index f6c3d96..71b23ed 100644
--- a/ebeast/vc/button-bar.vue
+++ b/ebeast/vc/button-bar.vue
@@ -6,20 +6,20 @@
   - **slot** - All contents passed into this element will be packed tightly and styled as buttons.
 </docs>
 
-<style lang="less">
-  @import 'mixins.less';
+<style lang="scss">
+  @import 'mixins.scss';
   .vc-button-bar {
-      display: inline-flex; background-color: @vc-button-border;
-      border: 1px solid @vc-button-border;
-      border-radius: @vc-button-radius; }
+      display: inline-flex; background-color: $vc-button-border;
+      border: 1px solid $vc-button-border;
+      border-radius: $vc-button-radius; }
   .vc-button-bar .vc-button,
   .vc-button-bar button                        { margin: 0 0 0 1px; }
   .vc-button-bar .vc-button:first-of-type,
   .vc-button-bar button:first-of-type  { margin-left: 0; }
   .vc-button-bar > .vc-button:first-of-type,
-  .vc-button-bar > button:first-of-type        { border-top-left-radius: @vc-button-radius; 
border-bottom-left-radius: @vc-button-radius; }
+  .vc-button-bar > button:first-of-type        { border-top-left-radius: $vc-button-radius; 
border-bottom-left-radius: $vc-button-radius; }
   .vc-button-bar > .vc-button:last-of-type,
-  .vc-button-bar > button:last-of-type { border-top-right-radius: @vc-button-radius; 
border-bottom-right-radius: @vc-button-radius; }
+  .vc-button-bar > button:last-of-type { border-top-right-radius: $vc-button-radius; 
border-bottom-right-radius: $vc-button-radius; }
 </style>
 
 <template>
diff --git a/ebeast/vc/button.vue b/ebeast/vc/button.vue
index bbbade0..398b961 100644
--- a/ebeast/vc/button.vue
+++ b/ebeast/vc/button.vue
@@ -10,16 +10,16 @@
   - **default** - All contents passed into this element will be rendered as contents of the button.
 </docs>
 
-<style lang="less">
-  @import 'mixins.less';
-  .vc-button                   { .vc-buttonshade; display: inline-flex; text-align: center; margin: 0; 
padding: 3px 1em; }
-  .vc-button:focus             { outline: @vc-focus-outline; }
-  .vc-button:hover             { .vc-buttonhover; }
+<style lang="scss">
+  @import 'mixins.scss';
+  .vc-button                   { @include vc-buttonshade; display: inline-flex; text-align: center; margin: 
0; padding: 3px 1em; }
+  .vc-button:focus             { outline: $vc-focus-outline; }
+  .vc-button:hover             { @include vc-buttonhover; }
   .vc-button.vc-fakeactive,
-  .vc-button:active            { .vc-buttonactive; }
-  .vc-button, .vc-button *     { color: @vc-button-foreground; fill: @vc-button-foreground !important; }
+  .vc-button:active            { @include vc-buttonactive; }
+  .vc-button, .vc-button *     { color: $vc-button-foreground; fill: $vc-button-foreground !important; }
   .vc-button.vc-fakeactive *,  /* use '*' + fill!important to include svg elements in buttons */
-  .vc-button:active *          { color: @vc-button-active-fg;  fill: @vc-button-active-fg !important; }
+  .vc-button:active *          { color: $vc-button-active-fg;  fill: $vc-button-active-fg !important; }
 </style>
 
 <template>
diff --git a/ebeast/vc/icon-button.vue b/ebeast/vc/icon-button.vue
index 5fd96c3..1309160 100644
--- a/ebeast/vc/icon-button.vue
+++ b/ebeast/vc/icon-button.vue
@@ -11,8 +11,8 @@
   - **slot** - All contents passed into this element will be rendered as contents besides the icon.
 </docs>
 
-<style lang="less">
-  @import 'mixins.less';
+<style lang="scss">
+  @import 'mixins.scss';
   .vc-icon-button                      { margin: 0 0; padding: 7px; }
   .vc-icon-button .vc-icon-button-icon { font-size: 1.3em /*1.33333333em*/; }
 </style>
diff --git a/ebeast/vc/mixins.scss b/ebeast/vc/mixins.scss
index 73b4705..2c4ad40 100644
--- a/ebeast/vc/mixins.scss
+++ b/ebeast/vc/mixins.scss
@@ -3,15 +3,15 @@
 /* Only use variable declarations or mixin function declarations here */
 
 /* == Buttons Mixins == */
-.vc-buttonframe()              { border: 1px solid @vc-button-border; }
-.vc-buttonshade()              { background-image: @vc-button-lg;
-                                 border-top: 1px solid @vc-button-light; border-left: 1px solid 
@vc-button-light;
-                                 border-bottom: 1px solid @vc-button-dark; border-right: 1px solid 
@vc-button-dark; }
-.vc-buttonhover()              { box-shadow: inset 500px 500px @vc-button-hover; }
-.vc-buttonactive()             { box-shadow: inset 500px 500px @vc-button-active;
-                                 background-image: @vc-button-active-lg;
-                                 border-color: @vc-button-active-border; }
-.vc-popup-box-shadow()         { box-shadow: 0 2px 8px @vc-boxshadow-color; }
+@mixin vc-buttonframe()        { border: 1px solid $vc-button-border; }
+@mixin vc-buttonshade()        { background-image: $vc-button-lg;
+                                 border-top: 1px solid $vc-button-light; border-left: 1px solid 
$vc-button-light;
+                                 border-bottom: 1px solid $vc-button-dark; border-right: 1px solid 
$vc-button-dark; }
+@mixin vc-buttonhover()                { box-shadow: inset 500px 500px $vc-button-hover; }
+@mixin vc-buttonactive()       { box-shadow: inset 500px 500px $vc-button-active;
+                                 background-image: $vc-button-active-lg;
+                                 border-color: $vc-button-active-border; }
+@mixin vc-popup-box-shadow()   { box-shadow: 0 2px 8px $vc-boxshadow-color; }
 
 /* == User Settings & Overrides == */
-@import 'variables.less';
+@import 'variables.scss';
diff --git a/ebeast/vc/modaldialog.vue b/ebeast/vc/modaldialog.vue
index 5f8f89e..192f00f 100644
--- a/ebeast/vc/modaldialog.vue
+++ b/ebeast/vc/modaldialog.vue
@@ -17,36 +17,36 @@
   - **vc-modaldialog-container** - Css class for the actual dialog contents.
 </docs>
 
-<style lang="less">
-  @import 'mixins.less';
+<style lang="scss">
+  @import 'mixins.scss';
   .vc-modaldialog * { flex-shrink: 0; }
-  .vc-flex-vbox() {
+  @mixin vc-flex-vbox() {
       display: flex; flex-basis: auto; align-items: center; justify-content: center;
       flex-shrink: 0; flex-flow: column; height: auto;
   }
-  .vc-flex-hbox() {
+  @mixin vc-flex-hbox() {
       display: flex; flex-basis: auto; align-items: center; justify-content: center;
       flex-shrink: 0; flex-flow: row; width: auto;
   }
   .vc-modaldialog-mask {
-      .vc-flex-vbox;
+      @include vc-flex-vbox;
       position: fixed; top: 0; left: 0; right: 0; bottom: 0;
       z-index: 99998;
-      background-color: fadeout(darken(@vc-theme-background, 15%), 15%); /* backdrop */
+      background-color: fadeout(darken($vc-theme-background, 15%), 15%); /* backdrop */
   }
   .vc-modaldialog-wrapper {
-      .vc-flex-vbox;
+      @include vc-flex-vbox;
       max-height: 100%; max-width: 100%;
       padding: 1em;
   }
   .vc-modaldialog-container {
-      .vc-flex-vbox; flex-shrink: 1;
+      @include vc-flex-vbox; flex-shrink: 1;
       min-width: 25em; padding: 0;
-      background-color: @vc-theme-background;
-      border-radius: @vc-theme-border-radius;
-      border-top: 3px solid @vc-panel-background-light; border-left: 3px solid @vc-panel-background-light;
-      border-bottom: 3px solid @vc-panel-background-dark; border-right: 3px solid @vc-panel-background-dark;
-      .vc-popup-box-shadow;
+      background-color: $vc-theme-background;
+      border-radius: $vc-theme-border-radius;
+      border-top: 3px solid $vc-panel-background-light; border-left: 3px solid $vc-panel-background-light;
+      border-bottom: 3px solid $vc-panel-background-dark; border-right: 3px solid $vc-panel-background-dark;
+      @include vc-popup-box-shadow;
       /* fix vscrolling: https://stackoverflow.com/a/33455342 */
       justify-content: space-between;
       margin: auto;
@@ -58,7 +58,7 @@
   }
   .vc-modaldialog-header, .vc-modaldialog-footer {
       display: block; width: 100%; align-items: center; text-align: center;
-      background-color: darken(@vc-theme-background, 8%);
+      background-color: darken($vc-theme-background, 8%);
   }
   .vc-modaldialog-footer {
       padding: 1.2rem 0 1rem;
diff --git a/ebeast/vc/playcontrols.vue b/ebeast/vc/playcontrols.vue
index 3255f1f..5815e3f 100644
--- a/ebeast/vc/playcontrols.vue
+++ b/ebeast/vc/playcontrols.vue
@@ -6,8 +6,8 @@
   - **project** - The BSE object providing playback API.
 </docs>
 
-<style lang="less">
-  @import 'mixins.less';
+<style lang="scss">
+  @import 'mixins.scss';
   .vc-playcontrols { }
 </style>
 
diff --git a/ebeast/vc/projectshell.vue b/ebeast/vc/projectshell.vue
index 708fe40..877c7f1 100644
--- a/ebeast/vc/projectshell.vue
+++ b/ebeast/vc/projectshell.vue
@@ -7,8 +7,8 @@
   - **project** - Read-only, the value of *bse-project*.
 </docs>
 
-<style lang="less">
-  @import 'mixins.less';
+<style lang="scss">
+  @import 'mixins.scss';
   .vc-projectshell { }
 </style>
 
diff --git a/ebeast/vc/styles.scss b/ebeast/vc/styles.scss
index 66a2cd4..c2211e1 100644
--- a/ebeast/vc/styles.scss
+++ b/ebeast/vc/styles.scss
@@ -1,8 +1,8 @@
 /* GNU LGPL v2.1+: http://www.gnu.org/licenses/lgpl.html */
 
 /* == FontAwesome == */
-@import        'node_modules/font-awesome/less/font-awesome.less';
-@fa-font-path: '../node_modules/font-awesome/fonts/';
+@import        '../node_modules/font-awesome/scss/font-awesome.scss';
+$fa-font-path: '../node_modules/font-awesome/fonts/';
 
 /* == User Settings & Overrides == */
-@import 'mixins.less';
+@import 'mixins.scss';
diff --git a/ebeast/vc/variables.scss b/ebeast/vc/variables.scss
index a133b64..d5b4f4d 100644
--- a/ebeast/vc/variables.scss
+++ b/ebeast/vc/variables.scss
@@ -3,28 +3,28 @@
 /* Only use variable declarations or mixin function declarations here */
 
 /* == Theme Settings == */
-@vc-theme-foreground:          #ffffff;
-@vc-theme-background:          #505050;
-@vc-theme-border-radius:       3px;
-@vc-panel-background-lg0:      lighten(@vc-theme-background, 1%);
-@vc-panel-background-lg1:      darken(@vc-theme-background, 1%);
-@vc-panel-background-lg:       linear-gradient(to bottom, @vc-panel-background-lg0 0%, 
@vc-panel-background-lg1 100%);
-@vc-panel-background-border:   darken(@vc-theme-background, 25%);
-@vc-panel-background-light:    lighten(@vc-theme-background, 9%);
-@vc-panel-background-dark:     darken(@vc-theme-background, 9%);
-@vc-toolbar-background:                #606060;
-@vc-toolbar-background-lg:     linear-gradient(to bottom, #666666 0%, #5a5a5a 100%);
-@vc-button-foreground:         #dddddd;
-@vc-button-light:              #999999;
-@vc-button-lg:                 linear-gradient(to bottom, #777777 0%, #707070 45%, #606060 55%, #555555 
100%);
-@vc-button-dark:               #444444;
-@vc-button-radius:             @vc-theme-border-radius;
-@vc-button-border:             #333333;
-@vc-button-hover:              fade(#ffffff, 10%);
-@vc-button-active:             fade(#000000, 20%);
-@vc-button-active-fg:          #bbbbbb;
-@vc-button-active-lg:          linear-gradient(to bottom, #606060 0%, #707070 50%, #606060 100%);
-@vc-button-active-border:      #555555;
-@vc-glow-control:              #0080ff;
-@vc-focus-outline:             1px solid @vc-glow-control;
-@vc-boxshadow-color:           fade(#000000, 30%);
+$vc-theme-foreground:          #ffffff;
+$vc-theme-background:          #505050;
+$vc-theme-border-radius:       3px;
+$vc-panel-background-lg0:      lighten($vc-theme-background, 1%);
+$vc-panel-background-lg1:      darken($vc-theme-background, 1%);
+$vc-panel-background-lg:       linear-gradient(to bottom, $vc-panel-background-lg0 0%, 
$vc-panel-background-lg1 100%);
+$vc-panel-background-border:   darken($vc-theme-background, 25%);
+$vc-panel-background-light:    lighten($vc-theme-background, 9%);
+$vc-panel-background-dark:     darken($vc-theme-background, 9%);
+$vc-toolbar-background:                #606060;
+$vc-toolbar-background-lg:     linear-gradient(to bottom, #666666 0%, #5a5a5a 100%);
+$vc-button-foreground:         #dddddd;
+$vc-button-light:              #999999;
+$vc-button-lg:                 linear-gradient(to bottom, #777777 0%, #707070 45%, #606060 55%, #555555 
100%);
+$vc-button-dark:               #444444;
+$vc-button-radius:             $vc-theme-border-radius;
+$vc-button-border:             #333333;
+$vc-button-hover:              fade(#ffffff, 10%);
+$vc-button-active:             fade(#000000, 20%);
+$vc-button-active-fg:          #bbbbbb;
+$vc-button-active-lg:          linear-gradient(to bottom, #606060 0%, #707070 50%, #606060 100%);
+$vc-button-active-border:      #555555;
+$vc-glow-control:              #0080ff;
+$vc-focus-outline:             1px solid $vc-glow-control;
+$vc-boxshadow-color:           fade(#000000, 30%);
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]