From 3705d0fc3a56b6b632a3a40a7a2cd31136a0b295 Mon Sep 17 00:00:00 2001 From: Juan Cruz Viotti Date: Fri, 1 Jan 2016 16:13:29 -0400 Subject: [PATCH 1/6] Namespace ImageWriter progress in state object This change allows us to scale the state information to more properties than just the percentage. --- build/browser/app.js | 22 +++++++++++++--------- lib/browser/modules/image-writer.js | 22 +++++++++++++--------- lib/index.html | 16 ++++++++-------- tests/browser/modules/image-writer.spec.js | 6 +++--- 4 files changed, 37 insertions(+), 29 deletions(-) diff --git a/build/browser/app.js b/build/browser/app.js index 15ad827d..36d5f843 100644 --- a/build/browser/app.js +++ b/build/browser/app.js @@ -343,12 +343,16 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { var self = this; var burning = false; - /** - * @summary Progress percentage - * @type Number - * @public - */ - this.progress = 0; + this.state = { + + /** + * @summary Progress percentage + * @type Number + * @public + */ + progress: 0 + + }; /** * @summary Set progress percentage @@ -364,8 +368,8 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { // Safely bring the state to the world of Angular $timeout(function() { - self.progress = Math.floor(progress); - console.debug('Progress: ' + self.progress); + self.state.progress = Math.floor(progress); + console.debug('Progress: ' + self.state.progress); }); }; @@ -431,7 +435,7 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { * @public * * @description - * This function will update `.progress` with the current writing percentage. + * This function will update `state.progress` with the current writing percentage. * * @param {String} image - image path * @param {Object} drive - drive diff --git a/lib/browser/modules/image-writer.js b/lib/browser/modules/image-writer.js index 86120e40..6fd3ef72 100644 --- a/lib/browser/modules/image-writer.js +++ b/lib/browser/modules/image-writer.js @@ -35,12 +35,16 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { var self = this; var burning = false; - /** - * @summary Progress percentage - * @type Number - * @public - */ - this.progress = 0; + this.state = { + + /** + * @summary Progress percentage + * @type Number + * @public + */ + progress: 0 + + }; /** * @summary Set progress percentage @@ -56,8 +60,8 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { // Safely bring the state to the world of Angular $timeout(function() { - self.progress = Math.floor(progress); - console.debug('Progress: ' + self.progress); + self.state.progress = Math.floor(progress); + console.debug('Progress: ' + self.state.progress); }); }; @@ -123,7 +127,7 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { * @public * * @description - * This function will update `.progress` with the current writing percentage. + * This function will update `state.progress` with the current writing percentage. * * @param {String} image - image path * @param {Object} drive - drive diff --git a/lib/index.html b/lib/index.html index bae6774a..3bf32e5b 100644 --- a/lib/index.html +++ b/lib/index.html @@ -19,7 +19,7 @@
-
+
@@ -76,21 +76,21 @@ 3
- - Finishing... - Burn! - Starting... - + Finishing... + Burn! + Starting... +
-
+

Burn Complete!

diff --git a/tests/browser/modules/image-writer.spec.js b/tests/browser/modules/image-writer.spec.js index fb5651cd..774ab1d2 100644 --- a/tests/browser/modules/image-writer.spec.js +++ b/tests/browser/modules/image-writer.spec.js @@ -23,7 +23,7 @@ describe('Browser: ImageWriter', function() { })); it('should set progress to zero by default', function() { - m.chai.expect(ImageWriterService.progress).to.equal(0); + m.chai.expect(ImageWriterService.state.progress).to.equal(0); }); describe('.isBurning()', function() { @@ -66,13 +66,13 @@ describe('Browser: ImageWriter', function() { it('should be able to set the progress', function() { ImageWriterService.setProgress(50); $timeout.flush(); - m.chai.expect(ImageWriterService.progress).to.equal(50); + m.chai.expect(ImageWriterService.state.progress).to.equal(50); }); it('should floor the percentage', function() { ImageWriterService.setProgress(49.9999); $timeout.flush(); - m.chai.expect(ImageWriterService.progress).to.equal(49); + m.chai.expect(ImageWriterService.state.progress).to.equal(49); }); }); From e30de4570793bf8666e8d3ab39f1864091308181 Mon Sep 17 00:00:00 2001 From: Juan Cruz Viotti Date: Fri, 1 Jan 2016 16:41:14 -0400 Subject: [PATCH 2/6] Implement ImageWriterService.reset() This function allows the client to easily reset the progress state without breaking encapsulation. --- build/browser/app.js | 14 +++++++++++++- lib/browser/app.js | 2 +- lib/browser/modules/image-writer.js | 12 ++++++++++++ tests/browser/modules/image-writer.spec.js | 13 +++++++++++++ 4 files changed, 39 insertions(+), 2 deletions(-) diff --git a/build/browser/app.js b/build/browser/app.js index 36d5f843..956669cc 100644 --- a/build/browser/app.js +++ b/build/browser/app.js @@ -52,7 +52,7 @@ app.controller('AppController', function($q, DriveScannerService, SelectionState this.restart = function() { console.debug('Restarting'); this.selection.clear(); - this.writer.setProgress(0); + this.writer.reset(); this.scanner.start(2000).on('scan', function(drives) { // Notice we only autoselect the drive if there is an image, @@ -374,6 +374,18 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { }; + /** + * @summary Reset progress state + * @function + * @public + * + * @example + * ImageWriterService.reset(); + */ + this.reset = function() { + self.setProgress(0); + }; + /** * @summary Check if currently burning * @function diff --git a/lib/browser/app.js b/lib/browser/app.js index 556949d4..d0450ef6 100644 --- a/lib/browser/app.js +++ b/lib/browser/app.js @@ -51,7 +51,7 @@ app.controller('AppController', function($q, DriveScannerService, SelectionState this.restart = function() { console.debug('Restarting'); this.selection.clear(); - this.writer.setProgress(0); + this.writer.reset(); this.scanner.start(2000).on('scan', function(drives) { // Notice we only autoselect the drive if there is an image, diff --git a/lib/browser/modules/image-writer.js b/lib/browser/modules/image-writer.js index 6fd3ef72..c4048a54 100644 --- a/lib/browser/modules/image-writer.js +++ b/lib/browser/modules/image-writer.js @@ -66,6 +66,18 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { }; + /** + * @summary Reset progress state + * @function + * @public + * + * @example + * ImageWriterService.reset(); + */ + this.reset = function() { + self.setProgress(0); + }; + /** * @summary Check if currently burning * @function diff --git a/tests/browser/modules/image-writer.spec.js b/tests/browser/modules/image-writer.spec.js index 774ab1d2..b79a75e8 100644 --- a/tests/browser/modules/image-writer.spec.js +++ b/tests/browser/modules/image-writer.spec.js @@ -77,6 +77,19 @@ describe('Browser: ImageWriter', function() { }); + describe('.reset()', function() { + + it('should reset progress percentage to 0', function() { + ImageWriterService.setProgress(50); + $timeout.flush(); + m.chai.expect(ImageWriterService.state.progress).to.equal(50); + ImageWriterService.reset(); + $timeout.flush(); + m.chai.expect(ImageWriterService.state.progress).to.equal(0); + }); + + }); + describe('.burn()', function() { describe('given a succesful write', function() { From a46a7165123ff9a2263bfff809970f0881aac332 Mon Sep 17 00:00:00 2001 From: Juan Cruz Viotti Date: Fri, 1 Jan 2016 16:59:55 -0400 Subject: [PATCH 3/6] Make setProgress accept an options object This allows us to pass more things than just the percentage to `setProgress`. --- build/browser/app.js | 19 +++++++++++-------- lib/browser/modules/image-writer.js | 19 +++++++++++-------- tests/browser/modules/image-writer.spec.js | 15 ++++++++++++--- 3 files changed, 34 insertions(+), 19 deletions(-) diff --git a/build/browser/app.js b/build/browser/app.js index 956669cc..0b9ceba5 100644 --- a/build/browser/app.js +++ b/build/browser/app.js @@ -359,16 +359,19 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { * @function * @private * - * @param {Number} progress + * @param {Object} state - progress state + * @param {Number} state.percentage - progress percentage * * @example - * ImageWriterService.setProgress(50); + * ImageWriterService.setProgress({ + * percentage: 50 + * }); */ - this.setProgress = function(progress) { + this.setProgress = function(state) { // Safely bring the state to the world of Angular $timeout(function() { - self.state.progress = Math.floor(progress); + self.state.progress = Math.floor(state.percentage); console.debug('Progress: ' + self.state.progress); }); @@ -383,7 +386,9 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { * ImageWriterService.reset(); */ this.reset = function() { - self.setProgress(0); + self.setProgress({ + percentage: 0 + }); }; /** @@ -470,9 +475,7 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { self.setBurning(true); - return self.performWrite(image, drive, function(state) { - self.setProgress(state.percentage); - }).finally(function() { + return self.performWrite(image, drive, self.setProgress).finally(function() { self.setBurning(false); }); }; diff --git a/lib/browser/modules/image-writer.js b/lib/browser/modules/image-writer.js index c4048a54..c96b7be5 100644 --- a/lib/browser/modules/image-writer.js +++ b/lib/browser/modules/image-writer.js @@ -51,16 +51,19 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { * @function * @private * - * @param {Number} progress + * @param {Object} state - progress state + * @param {Number} state.percentage - progress percentage * * @example - * ImageWriterService.setProgress(50); + * ImageWriterService.setProgress({ + * percentage: 50 + * }); */ - this.setProgress = function(progress) { + this.setProgress = function(state) { // Safely bring the state to the world of Angular $timeout(function() { - self.state.progress = Math.floor(progress); + self.state.progress = Math.floor(state.percentage); console.debug('Progress: ' + self.state.progress); }); @@ -75,7 +78,9 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { * ImageWriterService.reset(); */ this.reset = function() { - self.setProgress(0); + self.setProgress({ + percentage: 0 + }); }; /** @@ -162,9 +167,7 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { self.setBurning(true); - return self.performWrite(image, drive, function(state) { - self.setProgress(state.percentage); - }).finally(function() { + return self.performWrite(image, drive, self.setProgress).finally(function() { self.setBurning(false); }); }; diff --git a/tests/browser/modules/image-writer.spec.js b/tests/browser/modules/image-writer.spec.js index b79a75e8..abaff962 100644 --- a/tests/browser/modules/image-writer.spec.js +++ b/tests/browser/modules/image-writer.spec.js @@ -64,13 +64,19 @@ describe('Browser: ImageWriter', function() { describe('.setProgress()', function() { it('should be able to set the progress', function() { - ImageWriterService.setProgress(50); + ImageWriterService.setProgress({ + percentage: 50 + }); + $timeout.flush(); m.chai.expect(ImageWriterService.state.progress).to.equal(50); }); it('should floor the percentage', function() { - ImageWriterService.setProgress(49.9999); + ImageWriterService.setProgress({ + percentage: 49.9999 + }); + $timeout.flush(); m.chai.expect(ImageWriterService.state.progress).to.equal(49); }); @@ -80,7 +86,10 @@ describe('Browser: ImageWriter', function() { describe('.reset()', function() { it('should reset progress percentage to 0', function() { - ImageWriterService.setProgress(50); + ImageWriterService.setProgress({ + percentage: 50 + }); + $timeout.flush(); m.chai.expect(ImageWriterService.state.progress).to.equal(50); ImageWriterService.reset(); From d9641fc557591ce5c431160b36b59fd116335763 Mon Sep 17 00:00:00 2001 From: Juan Cruz Viotti Date: Fri, 1 Jan 2016 17:02:13 -0400 Subject: [PATCH 4/6] Rename setProgress to setProgressState It shows the intention more clearly now that the function not only accepts a plain percentage. --- build/browser/app.js | 10 +++++----- lib/browser/modules/image-writer.js | 10 +++++----- tests/browser/modules/image-writer.spec.js | 8 ++++---- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/build/browser/app.js b/build/browser/app.js index 0b9ceba5..c905a7ea 100644 --- a/build/browser/app.js +++ b/build/browser/app.js @@ -355,7 +355,7 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { }; /** - * @summary Set progress percentage + * @summary Set progress state * @function * @private * @@ -363,11 +363,11 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { * @param {Number} state.percentage - progress percentage * * @example - * ImageWriterService.setProgress({ + * ImageWriterService.setProgressState({ * percentage: 50 * }); */ - this.setProgress = function(state) { + this.setProgressState = function(state) { // Safely bring the state to the world of Angular $timeout(function() { @@ -386,7 +386,7 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { * ImageWriterService.reset(); */ this.reset = function() { - self.setProgress({ + self.setProgressState({ percentage: 0 }); }; @@ -475,7 +475,7 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { self.setBurning(true); - return self.performWrite(image, drive, self.setProgress).finally(function() { + return self.performWrite(image, drive, self.setProgressState).finally(function() { self.setBurning(false); }); }; diff --git a/lib/browser/modules/image-writer.js b/lib/browser/modules/image-writer.js index c96b7be5..f59fc3e3 100644 --- a/lib/browser/modules/image-writer.js +++ b/lib/browser/modules/image-writer.js @@ -47,7 +47,7 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { }; /** - * @summary Set progress percentage + * @summary Set progress state * @function * @private * @@ -55,11 +55,11 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { * @param {Number} state.percentage - progress percentage * * @example - * ImageWriterService.setProgress({ + * ImageWriterService.setProgressState({ * percentage: 50 * }); */ - this.setProgress = function(state) { + this.setProgressState = function(state) { // Safely bring the state to the world of Angular $timeout(function() { @@ -78,7 +78,7 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { * ImageWriterService.reset(); */ this.reset = function() { - self.setProgress({ + self.setProgressState({ percentage: 0 }); }; @@ -167,7 +167,7 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { self.setBurning(true); - return self.performWrite(image, drive, self.setProgress).finally(function() { + return self.performWrite(image, drive, self.setProgressState).finally(function() { self.setBurning(false); }); }; diff --git a/tests/browser/modules/image-writer.spec.js b/tests/browser/modules/image-writer.spec.js index abaff962..f8cdc111 100644 --- a/tests/browser/modules/image-writer.spec.js +++ b/tests/browser/modules/image-writer.spec.js @@ -61,10 +61,10 @@ describe('Browser: ImageWriter', function() { }); - describe('.setProgress()', function() { + describe('.setProgressState()', function() { it('should be able to set the progress', function() { - ImageWriterService.setProgress({ + ImageWriterService.setProgressState({ percentage: 50 }); @@ -73,7 +73,7 @@ describe('Browser: ImageWriter', function() { }); it('should floor the percentage', function() { - ImageWriterService.setProgress({ + ImageWriterService.setProgressState({ percentage: 49.9999 }); @@ -86,7 +86,7 @@ describe('Browser: ImageWriter', function() { describe('.reset()', function() { it('should reset progress percentage to 0', function() { - ImageWriterService.setProgress({ + ImageWriterService.setProgressState({ percentage: 50 }); From cf41b6279d0e5f2cc4580d2ebc824293c5417475 Mon Sep 17 00:00:00 2001 From: Juan Cruz Viotti Date: Fri, 1 Jan 2016 17:24:07 -0400 Subject: [PATCH 5/6] Save burn progress speed in image writer state --- build/browser/app.js | 23 +++++++++++++-- lib/browser/modules/image-writer.js | 23 +++++++++++++-- tests/browser/modules/image-writer.spec.js | 33 ++++++++++++++++++++-- 3 files changed, 71 insertions(+), 8 deletions(-) diff --git a/build/browser/app.js b/build/browser/app.js index c905a7ea..38205d16 100644 --- a/build/browser/app.js +++ b/build/browser/app.js @@ -343,6 +343,11 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { var self = this; var burning = false; + /* + * @summary Progress state + * @type Object + * @public + */ this.state = { /** @@ -350,7 +355,14 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { * @type Number * @public */ - progress: 0 + progress: 0, + + /** + * @summary Progress speed + * @type Number + * @public + */ + speed: 0 }; @@ -372,7 +384,11 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { // Safely bring the state to the world of Angular $timeout(function() { self.state.progress = Math.floor(state.percentage); - console.debug('Progress: ' + self.state.progress); + + // Transform bytes to megabytes preserving only two decimal places + self.state.speed = Math.floor(state.speed / 1e+6 * 100) / 100 || 0; + + console.debug('Progress: ' + self.state.progress + ' at ' + self.state.speed + ' MB/s'); }); }; @@ -387,7 +403,8 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { */ this.reset = function() { self.setProgressState({ - percentage: 0 + percentage: 0, + speed: 0 }); }; diff --git a/lib/browser/modules/image-writer.js b/lib/browser/modules/image-writer.js index f59fc3e3..1d1fbe23 100644 --- a/lib/browser/modules/image-writer.js +++ b/lib/browser/modules/image-writer.js @@ -35,6 +35,11 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { var self = this; var burning = false; + /* + * @summary Progress state + * @type Object + * @public + */ this.state = { /** @@ -42,7 +47,14 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { * @type Number * @public */ - progress: 0 + progress: 0, + + /** + * @summary Progress speed + * @type Number + * @public + */ + speed: 0 }; @@ -64,7 +76,11 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { // Safely bring the state to the world of Angular $timeout(function() { self.state.progress = Math.floor(state.percentage); - console.debug('Progress: ' + self.state.progress); + + // Transform bytes to megabytes preserving only two decimal places + self.state.speed = Math.floor(state.speed / 1e+6 * 100) / 100 || 0; + + console.debug('Progress: ' + self.state.progress + ' at ' + self.state.speed + ' MB/s'); }); }; @@ -79,7 +95,8 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { */ this.reset = function() { self.setProgressState({ - percentage: 0 + percentage: 0, + speed: 0 }); }; diff --git a/tests/browser/modules/image-writer.spec.js b/tests/browser/modules/image-writer.spec.js index f8cdc111..964299c8 100644 --- a/tests/browser/modules/image-writer.spec.js +++ b/tests/browser/modules/image-writer.spec.js @@ -26,6 +26,10 @@ describe('Browser: ImageWriter', function() { m.chai.expect(ImageWriterService.state.progress).to.equal(0); }); + it('should set speed to zero by default', function() { + m.chai.expect(ImageWriterService.state.speed).to.equal(0); + }); + describe('.isBurning()', function() { it('should return false by default', function() { @@ -65,11 +69,13 @@ describe('Browser: ImageWriter', function() { it('should be able to set the progress', function() { ImageWriterService.setProgressState({ - percentage: 50 + percentage: 50, + speed: 949624 }); $timeout.flush(); m.chai.expect(ImageWriterService.state.progress).to.equal(50); + m.chai.expect(ImageWriterService.state.speed).to.equal(0.94); }); it('should floor the percentage', function() { @@ -81,13 +87,23 @@ describe('Browser: ImageWriter', function() { m.chai.expect(ImageWriterService.state.progress).to.equal(49); }); + it('should assume speed zero if no speed', function() { + ImageWriterService.setProgressState({ + percentage: 25 + }); + + $timeout.flush(); + m.chai.expect(ImageWriterService.state.speed).to.equal(0); + }); + }); describe('.reset()', function() { it('should reset progress percentage to 0', function() { ImageWriterService.setProgressState({ - percentage: 50 + percentage: 50, + speed: 949624 }); $timeout.flush(); @@ -97,6 +113,19 @@ describe('Browser: ImageWriter', function() { m.chai.expect(ImageWriterService.state.progress).to.equal(0); }); + it('should reset speed to 0', function() { + ImageWriterService.setProgressState({ + percentage: 50, + speed: 949624 + }); + + $timeout.flush(); + m.chai.expect(ImageWriterService.state.speed).to.equal(0.94); + ImageWriterService.reset(); + $timeout.flush(); + m.chai.expect(ImageWriterService.state.speed).to.equal(0); + }); + }); describe('.burn()', function() { From 7f724b6295cebd9af8e5bc07f024f90f638a4885 Mon Sep 17 00:00:00 2001 From: Juan Cruz Viotti Date: Fri, 1 Jan 2016 17:29:08 -0400 Subject: [PATCH 6/6] Show burn speed information during write The speed is shown right below the Burn button. --- build/browser/app.js | 2 +- build/css/main.css | 10 ++++++++-- lib/browser/modules/image-writer.js | 2 +- lib/index.html | 12 +++++++----- lib/scss/main.scss | 7 +++++++ lib/scss/modules/_space.scss | 5 +++-- 6 files changed, 27 insertions(+), 11 deletions(-) diff --git a/build/browser/app.js b/build/browser/app.js index 38205d16..806df0db 100644 --- a/build/browser/app.js +++ b/build/browser/app.js @@ -388,7 +388,7 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { // Transform bytes to megabytes preserving only two decimal places self.state.speed = Math.floor(state.speed / 1e+6 * 100) / 100 || 0; - console.debug('Progress: ' + self.state.progress + ' at ' + self.state.speed + ' MB/s'); + console.debug('Progress: ' + self.state.progress + '% at ' + self.state.speed + ' MB/s'); }); }; diff --git a/build/css/main.css b/build/css/main.css index 21010740..cfa63288 100644 --- a/build/css/main.css +++ b/build/css/main.css @@ -5904,8 +5904,8 @@ body { .space-horizontal-large { margin: 0 30px; } -.space-bottom-large { - margin-bottom: 45px; } +.space-bottom-huge { + margin-bottom: 55px; } .space-right-tiny { margin-right: 5px; } @@ -5987,3 +5987,9 @@ body { .step-border-right { right: -120px; } + +.step-footer { + margin-top: 10px; + margin-bottom: -40px; + color: #85898c; + font-size: 12px; } diff --git a/lib/browser/modules/image-writer.js b/lib/browser/modules/image-writer.js index 1d1fbe23..8c802e83 100644 --- a/lib/browser/modules/image-writer.js +++ b/lib/browser/modules/image-writer.js @@ -80,7 +80,7 @@ imageWriter.service('ImageWriterService', function($q, $timeout) { // Transform bytes to megabytes preserving only two decimal places self.state.speed = Math.floor(state.speed / 1e+6 * 100) / 100 || 0; - console.debug('Progress: ' + self.state.progress + ' at ' + self.state.speed + ' MB/s'); + console.debug('Progress: ' + self.state.progress + '% at ' + self.state.speed + ' MB/s'); }); }; diff --git a/lib/index.html b/lib/index.html index 3bf32e5b..e16abcb3 100644 --- a/lib/index.html +++ b/lib/index.html @@ -19,7 +19,7 @@
-
+
@@ -81,16 +81,18 @@ ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()"> Finishing... Burn! - Starting... - + Starting... + + +

-
+

Burn Complete!

diff --git a/lib/scss/main.scss b/lib/scss/main.scss index ce83fd5b..7caec0a9 100644 --- a/lib/scss/main.scss +++ b/lib/scss/main.scss @@ -144,3 +144,10 @@ body { @extend .step-border; right: -120px; } + +.step-footer { + margin-top: 10px; + margin-bottom: -40px; + color: lighten($color-disabled, 5%); + font-size: 12px; +} diff --git a/lib/scss/modules/_space.scss b/lib/scss/modules/_space.scss index df1b3a1a..a2c2d743 100644 --- a/lib/scss/modules/_space.scss +++ b/lib/scss/modules/_space.scss @@ -14,6 +14,7 @@ * limitations under the License. */ +$spacing-huge: 55px; $spacing-large: 30px; $spacing-medium: 15px; $spacing-tiny: 5px; @@ -30,8 +31,8 @@ $spacing-tiny: 5px; margin: 0 $spacing-large; } -.space-bottom-large { - margin-bottom: $spacing-large * 1.5; +.space-bottom-huge { + margin-bottom: $spacing-huge; } .space-right-tiny {