From 067c8618fee3d4fad9095c1353d676e3bae4f651 Mon Sep 17 00:00:00 2001 From: hellekin Date: Wed, 11 Nov 2020 22:17:53 +0100 Subject: Adjust Style for mobile and stimulus --- app/assets/stylesheets/welcome.scss | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) (limited to 'app/assets/stylesheets/welcome.scss') diff --git a/app/assets/stylesheets/welcome.scss b/app/assets/stylesheets/welcome.scss index 5042f7d..d7704ef 100644 --- a/app/assets/stylesheets/welcome.scss +++ b/app/assets/stylesheets/welcome.scss @@ -1,3 +1,37 @@ // Place all the styles related to the welcome controller here. // They will automatically be included in application.css. // You can use Sass (SCSS) here: https://sass-lang.com/ + +button[data-action="taxonomy#toggle"] { + position: absolute; + top: 9rem; + left: 0.7rem; + display: block; + cursor: pointer; + padding: 16px; + color: transparent; + z-index: 990; + background: transparent var(--icon-menu-off) top left/32px no-repeat; + border: none; + text-align: center; +} +button[data-action="taxonomy#toggle"].on { + background-image: var(--icon-menu-on); +} + +[data-controller="taxonomy"] nav { + display: block; + position: fixed; + top: 9rem; + bottom: 0; + max-width: 35rem; + background-color: rgba(0,128,128,0.5); + z-index: -1; + display: none; + border-top-right-radius: 1rem; +} +[data-controller="taxonomy"] nav.on { + width: 89vw; + z-index: 900; + display: block; +} -- cgit v1.2.3