From 4fcdf32cff825bc93defe0001c482dc17e8b648b Mon Sep 17 00:00:00 2001 From: codecalm Date: Fri, 28 Feb 2020 12:00:50 +0100 Subject: css fix --- assets/style.scss | 32 ++++++++++++++++++++------------ 1 file changed, 20 insertions(+), 12 deletions(-) (limited to 'assets') diff --git a/assets/style.scss b/assets/style.scss index 5c331aa..a2dfe16 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -1,11 +1,12 @@ --- --- -$breakpoint: (min-width: 50rem); +$breakpoint: 50rem; $primary: #206bc4; $border: #eeeeee; $muted: #aaaaaa; $btn-form-height: 2rem; +$hover: rgba(0, 0, 0, .04); * { box-sizing: border-box; @@ -42,7 +43,7 @@ a { display: flex; flex-direction: column; - @media #{$breakpoint} { + @media (min-width: #{$breakpoint}) { flex-direction: row; } } @@ -55,7 +56,7 @@ a { width: 15rem; margin-top: 2rem; - @media #{$breakpoint} { + @media (min-width: #{$breakpoint}) { margin-top: 0; margin-left: 2rem; flex-direction: row; @@ -69,7 +70,6 @@ a { } .icon-preview-wrap { - margin-bottom: 3rem; position: relative; &:before { @@ -100,19 +100,27 @@ a { .icons-list { display: flex; - margin: -1rem; + margin: -.25rem; +} + +.icons-list-icon { + margin: .25rem; + width: 2rem; + height: 2rem; + color: inherit; + border-radius: 3px; + display: inline-flex; + align-items: center; + justify-content: center; + + &:hover { + background-color: $hover; + } .icon { display: block; - margin: .5rem; width: 1.5rem; height: 1.5rem; - } - - svg { - display: block; - width: 100%; - height: 100%; stroke-width: 2; } } -- cgit v1.2.1