diff --git a/app/assets/stylesheets/formadmin/atoms/_menu-button.scss b/app/assets/stylesheets/formadmin/atoms/_menu-button.scss index 9f80b2d..9cf0ac8 100644 --- a/app/assets/stylesheets/formadmin/atoms/_menu-button.scss +++ b/app/assets/stylesheets/formadmin/atoms/_menu-button.scss @@ -39,7 +39,6 @@ } } - @at-root .opened-menu & { i { background-color: transparent; diff --git a/app/assets/stylesheets/formadmin/layouts/_header.scss b/app/assets/stylesheets/formadmin/layouts/_header.scss index f33e752..1c2934f 100644 --- a/app/assets/stylesheets/formadmin/layouts/_header.scss +++ b/app/assets/stylesheets/formadmin/layouts/_header.scss @@ -1,7 +1,8 @@ .header { + align-items: center; background-color: rgba($primary-color, 0.95); backdrop-filter: blur(3px); - display: table; + display: flex; color: $white; height: 50px; position: fixed; @@ -12,11 +13,9 @@ z-index: 10; .site_title { - display: table-cell; font-weight: bold; margin: 0 20px 0 0; padding: 0 30px; - vertical-align: middle; } #site_title_image { @@ -25,9 +24,6 @@ } .header-item { - display: table-cell; - vertical-align: middle; - &, ul { margin: 0; @@ -145,7 +141,6 @@ #utility_nav { color: $silver; - display: table-cell; margin: 0; padding: 0 20px 0 0; text-align: right; @@ -171,31 +166,59 @@ // Medias @media #{$largest-phone-screen} { - .site_title { - padding: 0 15px; - } - #tabs, #utility_nav { display: none; left: 0; position: absolute; + right: 0; top: 50px; - width: 100%; + } + + .site_title { + padding: 0 15px; } .menu-button { display: block; - position: relative; - right: -23px; - top: 13px; + margin-left: auto; + margin-right: 15px; + margin-top: -5px; } - .opened-menu & { + @at-root .opened-menu & { #tabs, #utility_nav { display: block; } } + + // display: block; + // .site_title { + // padding: 0 15px; + // } + // + // #tabs, + // #utility_nav { + // display: none; + // left: 0; + // position: absolute; + // top: 50px; + // width: 100%; + // } + // + // .menu-button { + // float: left; + // margin-right: 15px; + // position: relative; + // top: 13px; + // } + // + // .opened-menu & { + // #tabs, + // #utility_nav { + // display: block; + // } + // } } }