diff --git a/css/_mixins.scss b/css/_mixins.scss index c0ea9b2d..588287de 100644 --- a/css/_mixins.scss +++ b/css/_mixins.scss @@ -92,7 +92,14 @@ } } - +@mixin button () { + .button { + background:none; + border:none; + margin:0; + padding:0; + } +} /* Images & icons */ @mixin icon_display () { background-repeat: no-repeat; diff --git a/css/_vars.scss b/css/_vars.scss index dd99a792..7f6604b0 100644 --- a/css/_vars.scss +++ b/css/_vars.scss @@ -8,8 +8,8 @@ $color--neutral-bg: #f5f5f5; /* Popup */ $popup__width: 270px; -$popup__height: 505px; -$popup__height--moz: 520px; +$popup__height: 540px; +$popup__height--moz: 540px; /* Cards */ $card__bg-color: $white; diff --git a/css/trackers.scss b/css/trackers.scss index 2bee6fee..9c81ed50 100644 --- a/css/trackers.scss +++ b/css/trackers.scss @@ -255,6 +255,20 @@ body { margin-top: 5px; } } + + .site-info__li--report { + height: 24.5px; + + .site-info__report-text { + font-weight: bold; + margin-top: 3.5px; + display: inline-block; + } + + .pull-right { + margin-top: 5px; + } + } } .linkable { @@ -372,7 +386,7 @@ body { /* Generic toggle button styling */ @include toggle_button(); - +@include button(); /* Sliding subviews */ @include sliding_subview(); diff --git a/js/ui/templates/shared/button.js b/js/ui/templates/shared/button.js new file mode 100644 index 00000000..93c1bb67 --- /dev/null +++ b/js/ui/templates/shared/button.js @@ -0,0 +1,11 @@ +const bel = require('bel'); + +module.exports = function (site, text, klass) { + + return bel` + `; +} + diff --git a/js/ui/templates/site.es6.js b/js/ui/templates/site.es6.js index 253d9980..c680e98b 100644 --- a/js/ui/templates/site.es6.js +++ b/js/ui/templates/site.es6.js @@ -1,5 +1,6 @@ const bel = require('bel'); const toggleButton = require('./shared/toggle-button'); +const Button = require('./shared/button'); module.exports = function () { @@ -32,6 +33,10 @@ module.exports = function () { ${this.model.whitelistStatusText} ${toggleButton(!this.model.isWhitelisted, 'js-site-toggle pull-right')} +