diff --git a/app/assets/javascripts/views/measure_view.js.coffee b/app/assets/javascripts/views/measure_view.js.coffee index a806b90ee..95add4bfd 100644 --- a/app/assets/javascripts/views/measure_view.js.coffee +++ b/app/assets/javascripts/views/measure_view.js.coffee @@ -34,11 +34,10 @@ class Thorax.Views.Measure extends Thorax.View e.preventDefault() if @$('.measure-settings').hasClass('measure-settings-expanded-delete') @$('.delete-icon').click() - # @$('.measure-settings').toggleClass('measure-settings-expanded-delete') @$('.measure-settings').toggleClass('measure-settings-expanded') showDelete: (e) -> e.preventDefault() $btn = $(e.currentTarget) - @$('.measure-settings-expanded').toggleClass('measure-settings-expanded-delete') $btn.toggleClass('btn-danger btn-danger-inverse').prev().toggleClass('hide') + @$('.measure-settings-expanded').toggleClass('measure-settings-expanded-delete') diff --git a/app/assets/stylesheets/application.css.less b/app/assets/stylesheets/application.css.less index 124781bfe..cd31bf5d3 100644 --- a/app/assets/stylesheets/application.css.less +++ b/app/assets/stylesheets/application.css.less @@ -17,9 +17,3 @@ @import "measure_calculation"; @import "rationale"; @import "builder"; - - - - - - diff --git a/app/assets/stylesheets/measure.less b/app/assets/stylesheets/measure.less index 1a8965ef6..24d9b9331 100644 --- a/app/assets/stylesheets/measure.less +++ b/app/assets/stylesheets/measure.less @@ -24,37 +24,45 @@ .make-sm-column(12); .title-bar; .short-title { - font-size: 1.8em; + .vertical-spacing; padding-right: 15px; - line-height: 1.75; } .full-title { line-height: 1.6; padding-right: 2%; } .settings-btn { - position: absolute; - font-size: 1.8em; - line-height: 1.75; + .fixed-vertical-spacing; border: 0; - top: -2px; right: 0; background: transparent; } .measure-settings { - position: absolute; - line-height: 1.75; + .fixed-vertical-spacing; height: 100%; - top: -2px; right: 30px; width: 0px; overflow: hidden; - white-space:nowrap; - -webkit-transition: width 0.3s linear; - -moz-transition: width 0.3s linear; - -ms-transition: width 0.3s linear; - -o-transition: width 0.3s linear; - transition: width 0.3s linear; + .btn-transition(width 0.3s linear); + .btn-danger { + .fa { + color: @btn-danger-color; + } + } + .btn-danger-inverse { + .fa { + color: @btn-danger-bg; + } + } + .delete-measure { + .measure-settings-padding; + } + .update-measure { + .measure-settings-padding; + .fa { + color: @brand-primary; + } + } } .measure-settings-expanded { width: 16%; @@ -62,29 +70,6 @@ .measure-settings-expanded-delete { width: 27%; } - .btn-danger { - .fa { - color: @btn-danger-color; - } - } - .btn-danger-inverse { - .fa { - color: @btn-danger-bg; - } - } - .delete-measure { - margin-top: 7px; - padding-left: 6px; - padding-right: 6px; - } - .update-measure { - margin-top: 7px; - padding-left: 6px; - padding-right: 6px; - .fa { - color: @brand-primary; - } - } } .measure-dsp { diff --git a/app/assets/stylesheets/mixins.less b/app/assets/stylesheets/mixins.less index d397ef211..b4fda1e65 100644 --- a/app/assets/stylesheets/mixins.less +++ b/app/assets/stylesheets/mixins.less @@ -33,3 +33,29 @@ .btn-danger-inverse { .button-variant(@btn-danger-bg; @btn-danger-color; @btn-danger-border); } + +// Sliding transitions - used in Measure View settings +.btn-transition(@transition) { + -webkit-transition: @transition; + -moz-transition: @transition; + -ms-transition: @transition; + -o-transition: @transition; + transition: @transition; +} + +// Vertical spacing - used in Measure View title bar +.vertical-spacing() { + font-size: 1.8em; + line-height: 1.75; +} + +// Fixed vertical spacing and button padding - used in Measure View settings buttons +.fixed-vertical-spacing() { + .vertical-spacing; + position: absolute; + top: -3px; +} +.measure-settings-padding { + padding-left: 6px; + padding-right: 6px; +}