From adbca1c299cc16618d9172562855321c8997213d Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Fri, 2 May 2014 16:09:43 +0200 Subject: [PATCH] Use autoprefixer to create vendor prefixes for css automatically, eliminating need for vendor prefixes in code. Update autoprefixer browser support. Add make command to see prefix outputs. Remove vendor prefixes - handled by autoprefixer. Rearrange elements. Rearrange elements. --- Makefile | 10 +++++ README.md | 3 +- src/styles/components/_audiolevel.scss | 14 +++---- src/styles/components/_bar.scss | 18 ++++----- src/styles/global/_animations.scss | 4 +- src/styles/global/_base.scss | 6 +-- src/styles/global/_mixins.scss | 51 -------------------------- src/styles/global/_overlaybar.scss | 2 +- src/styles/global/_variables.scss | 2 + src/styles/main.scss | 2 - 10 files changed, 32 insertions(+), 80 deletions(-) diff --git a/Makefile b/Makefile index 03901377..107448bb 100644 --- a/Makefile +++ b/Makefile @@ -25,6 +25,7 @@ CONFIG_PATH ?= /etc VENDOR = "$(CURDIR)/vendor" GOPATH = "$(VENDOR):$(CURDIR)" + SYSTEM_GOPATH := /usr/share/gocode/src/ OUTPUT := $(CURDIR)/bin OUTPUT_JS := $(CURDIR)/build/out @@ -48,6 +49,11 @@ NODEJS_BIN_EXISTS := $(shell [ -x "$(NODEJS_BIN)" ] && echo 1 || echo 0) ifneq ($(NODEJS_BIN_EXISTS), 1) $(error "Can't find node.js runtime, please install / check your PATH") endif +NPM_BIN_PATH := $(shell npm bin) + +# Tools +AUTOPREFIXER := autoprefixer +AUTOPREFIXER_BROWSER_SUPPORT := "> 1%, last 2 versions, Firefox ESR, Opera 12.1, Opera 12.0" build: get binary assets @@ -83,11 +89,15 @@ assets: styles javascript styles: sass --compass --scss $(SASSFLAGS) \ $(CURDIR)/src/styles/main.scss:$(CURDIR)/static/css/main.min.css + $(NPM_BIN_PATH)/$(AUTOPREFIXER) --browsers $(AUTOPREFIXER_BROWSER_SUPPORT) $(CURDIR)/static/css/main.min.css sass --compass --scss $(SASSFLAGS) \ $(CURDIR)/src/styles/bootstrap.scss:$(CURDIR)/static/css/bootstrap.min.css sass --compass --scss $(SASSFLAGS) \ $(CURDIR)/src/styles/font-awesome.scss:$(CURDIR)/static/css/font-awesome.min.css +style-vendor-prefix-info: + $(NPM_BIN_PATH)/$(AUTOPREFIXER) --browsers $(AUTOPREFIXER_BROWSER_SUPPORT) --info + releaseassets: RJSFLAGS = generateSourceMaps=false preserveLicenseComments=true releaseassets: SASSFLAGS = --style=compressed --no-cache releaseassets: dist_gopath assets diff --git a/README.md b/README.md index fd1e7374..a3b3a812 100644 --- a/README.md +++ b/README.md @@ -10,10 +10,11 @@ The latest version of Spreed Speak Freely can be found on GitHub: - [Go](http://golang.org) >= 1.1.0 - [NodeJS](http://nodejs.org/) + + [autoprefixer](https://www.npmjs.org/package/autoprefixer) + + [po2json](https://github.com/mikeedwards/po2json) - [Sass](http://sass-lang.com/) >= 3.2.0 - [Compass](http://compass-style.org/) - [Babel](http://babel.pocoo.org/) - - [po2json](https://github.com/mikeedwards/po2json) - make diff --git a/src/styles/components/_audiolevel.scss b/src/styles/components/_audiolevel.scss index fc0558ae..74de01b0 100644 --- a/src/styles/components/_audiolevel.scss +++ b/src/styles/components/_audiolevel.scss @@ -29,19 +29,15 @@ z-index: 6; .audio-level { background: #9dd53a; /* Old browsers */ - background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */ + background: gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */ background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */ + border-radius: 0 0 2px 2px; height: 4px; - position: absolute; - margin: 0 auto; left: 0; + margin: 0 auto; + position: absolute; right: 0; + transition: width 0.05s ease-in-out; width: 0; - @include border-radius(0 0 2px 2px); - @include transition(width 0.05s ease-in-out); } } diff --git a/src/styles/components/_bar.scss b/src/styles/components/_bar.scss index ab69db0d..42fbfa00 100644 --- a/src/styles/components/_bar.scss +++ b/src/styles/components/_bar.scss @@ -29,21 +29,19 @@ } .bar { - // without height bar jumps and disappears on reload - // use em to scale with text. - height: #{$minbarheight/$base-font-size}em; background-color: $componentbg; + box-shadow: 0 2px 10px 0 $componentfg3; color: $componentfg1; font: bold 1em/40px $font-sans-serif; + // without height bar jumps and disappears on reload, use em to scale with text. + height: #{$minbarheight/$base-font-size}em; text-align: center; - // @include adjust-leading-to(2); - @include box-shadow(0 2px 10px 0 $componentfg3); + touch-callout: none; + user-select: none; // @include debug-vertical-alignment(); - @include touch-callout(none); - @include user-select(none); @include breakpt($breakpoint-medium) { z-index: 40; - @include box-shadow(none); + box-shadow: none; } .btn { position: relative; @@ -66,7 +64,6 @@ text-align: left; width: 90px; vertical-align: middle; - // @include adjust-font-size-to(11px,0.4); span { font-style: italic; left: 38px; @@ -166,11 +163,10 @@ padding: 0; text-align: center; width: 42px; - // @include adjust-font-size-to(24px); &:focus { border: none; outline: none; - @include box-shadow(0); + box-shadow: 0; } &:hover { background-color: none; diff --git a/src/styles/global/_animations.scss b/src/styles/global/_animations.scss index 3b7bcce0..795d0297 100644 --- a/src/styles/global/_animations.scss +++ b/src/styles/global/_animations.scss @@ -28,7 +28,7 @@ &.ng-hide-add { opacity: 1; display: block !important; - @include transition(all linear 0.5s); + transition: all linear 0.5s; &.ng-hide-add-active { opacity: 0; } @@ -36,7 +36,7 @@ &.ng-hide-remove { opacity: 0; display: block !important; - @include transition(all linear 0.5s); + transition: all linear 0.5s; &.ng-hide-remove-active { opacity: 1; } diff --git a/src/styles/global/_base.scss b/src/styles/global/_base.scss index f45b4b80..37ce1d91 100644 --- a/src/styles/global/_base.scss +++ b/src/styles/global/_base.scss @@ -100,8 +100,8 @@ a { right: 15%; top: 15%; z-index: 20000; - @include transition-property(opacity); - @include transition-duration(.5s); + transition-property: opacity; + transition-duration: .5s; div { color: $lighter-text; display: block; @@ -124,7 +124,7 @@ a { position: absolute; right: 0; top: 44px; - @include user-select(none); + user-select: none; } .welcome { diff --git a/src/styles/global/_mixins.scss b/src/styles/global/_mixins.scss index 44a8e4e7..7021a24e 100644 --- a/src/styles/global/_mixins.scss +++ b/src/styles/global/_mixins.scss @@ -4,54 +4,3 @@ @content; } } - -@mixin user-select($select) { - -khtml-user-select: $select; - -moz-user-select: $select; - -ms-user-select: $select; - -o-user-select: $select; - -webkit-user-select: $select; - user-select: $select; -} - -@mixin touch-callout($callout) { - -webkit-touch-callout: $callout; -} - -@mixin box-shadow($shadow) { - -webkit-box-shadow: $shadow; - box-shadow: $shadow; -} - -@mixin transition-property($property) { - transition-property: $property; - -webkit-transition-property: $property; -} - -@mixin transition-duration($duration) { - transition-duration: $duration; - -webkit-transition-duration: $duration; -} - -@mixin transition($transition) { - transition: $transition; - -moz-transition: $transition; - -o-transition: $transition; - -webkit-transition: $transition; -} - -@mixin border-radius($radius) { - border-radius: $radius; - -moz-border-radius: $radius; - -webkit-border-radius: $radius; -} - -@mixin linear-gradient($gradient...) { - background: #9dd53a; /* Old browsers */ - background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */ - background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */ - background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */ -} diff --git a/src/styles/global/_overlaybar.scss b/src/styles/global/_overlaybar.scss index 531d103b..104c89bb 100644 --- a/src/styles/global/_overlaybar.scss +++ b/src/styles/global/_overlaybar.scss @@ -26,8 +26,8 @@ padding: 3px 8px 0 30px; position: absolute; text-shadow: 0 0 5px black; + user-select: none; vertical-align: middle; - @include user-select(none); } .overlaybar { diff --git a/src/styles/global/_variables.scss b/src/styles/global/_variables.scss index 3b247fa4..e14c5548 100644 --- a/src/styles/global/_variables.scss +++ b/src/styles/global/_variables.scss @@ -45,6 +45,8 @@ $breakpoint-medium: 700px; $breakpoint-large: 1280px; $font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif; + +// compass $base-font-size: 13px; $base-line-height: 19px; diff --git a/src/styles/main.scss b/src/styles/main.scss index da25cde0..7dbc8d18 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -22,8 +22,6 @@ // must set custom compass variables before import of compass @import "global/variables"; @import "compass"; -// auto import of user-interface not in css3 partial of compass 12.2 -@import "compass/css3/user-interface"; @import "libs/libs"; @import "global/mixins";