diff --git a/assets/stylesheets/components/_header.scss b/assets/stylesheets/components/_header.scss index a16d082e..003a49ca 100644 --- a/assets/stylesheets/components/_header.scss +++ b/assets/stylesheets/components/_header.scss @@ -138,17 +138,24 @@ position: absolute; top: .5em; right: 0; - padding: .5em; - width: 1rem; - height: 1rem; + width: 2rem; + height: 2rem; opacity: .3; - @extend %content-box, %hide-text; + @extend %hide-text; &:hover { opacity: .5; } + + &:before { + position: absolute; + top: .5rem; + left: .5rem; + @extend %icon; + } + @if $style == 'dark' { - &:before { @extend %icon, %icon-close-white; } + &:before { @extend %icon-close-white; } } @else { - &:before { @extend %icon, %icon-clear; } + &:before { @extend %icon-clear; } } ._search-active > & { display: block; } } diff --git a/assets/stylesheets/components/_notif.scss b/assets/stylesheets/components/_notif.scss index 304759e1..52a9340c 100644 --- a/assets/stylesheets/components/_notif.scss +++ b/assets/stylesheets/components/_notif.scss @@ -43,13 +43,17 @@ position: absolute; top: 0; right: 0; - width: 1rem; - height: 1rem; - padding: .625rem; + width: 2.25rem; + height: 2.25rem; opacity: .9; - @extend %content-box, %hide-text; + @extend %hide-text; - &:before { @extend %icon, %icon-close-white; } + &:before { + position: absolute; + top: .625rem; + left: .625rem; + @extend %icon, %icon-close-white; + } } ._notif-content { diff --git a/assets/stylesheets/global/_base.scss b/assets/stylesheets/global/_base.scss index 113fbe55..990f95a3 100644 --- a/assets/stylesheets/global/_base.scss +++ b/assets/stylesheets/global/_base.scss @@ -171,6 +171,7 @@ input, button { } button { + padding: 0; background: none; border: 0; cursor: pointer; diff --git a/assets/stylesheets/global/_classes.scss b/assets/stylesheets/global/_classes.scss index a4c1810d..db71ca9e 100644 --- a/assets/stylesheets/global/_classes.scss +++ b/assets/stylesheets/global/_classes.scss @@ -7,11 +7,6 @@ box-sizing: border-box; } -%content-box { - -moz-box-sizing: content-box; - box-sizing: content-box; -} - %user-select-none { -webkit-user-select: none; -moz-user-select: -moz-none; @@ -22,7 +17,7 @@ %hide-text { white-space: nowrap; overflow: hidden; - text-indent: -1000px; + text-indent: 100%; @extend %user-select-none; }