aboutsummaryrefslogtreecommitdiff
path: root/app/javascript/scss/_taxonomies.scss
diff options
context:
space:
mode:
authorhellekin <hellekin@cepheide.org>2021-01-23 15:35:49 +0100
committerhellekin <hellekin@cepheide.org>2021-01-23 15:35:49 +0100
commit73b3fffdbe730c33480682c40e7e8271e75ddf59 (patch)
tree94c60464d43c6d39150802e8110cf51be2c326ee /app/javascript/scss/_taxonomies.scss
parentb54d7d8aa172f85d53f44b601e4e81660d148342 (diff)
downloadincommon-map-73b3fffdbe730c33480682c40e7e8271e75ddf59.tar.gz
Move CSS to Webpack
Using both the asset pipeline and webpack is confusing and leads to unpredictable results in production. This commit moves all (S)CSS to Webpack under `app/javascript/scss` so that we can test whether the development interface results in a consistent production deployment. In order to load the ForkAwesome fonts we used a long path: `$fa-font-path: "../../../node_modules/fork-awesome/fonts";` Not sure whether this works...
Diffstat (limited to 'app/javascript/scss/_taxonomies.scss')
-rw-r--r--app/javascript/scss/_taxonomies.scss44
1 files changed, 44 insertions, 0 deletions
diff --git a/app/javascript/scss/_taxonomies.scss b/app/javascript/scss/_taxonomies.scss
new file mode 100644
index 0000000..5bf19e1
--- /dev/null
+++ b/app/javascript/scss/_taxonomies.scss
@@ -0,0 +1,44 @@
+@import "taxonomies/dewey";
+
+[data-controller="taxonomy"] {
+ height: 100%;
+ overflow: hidden auto;
+ scrollbar-color: var(--incommon-clear85) var(--incommon-blue);
+ scrollbar-width: thin;
+
+ nav {
+ position: relative;
+ bottom: 0;
+ margin: 0;
+ padding: 0;
+ height: calc(100% - 7.5rem);
+ padding-top: 32px;
+ max-width: 35rem;
+ width: 89vw;
+
+ display: none;
+ }
+ &.on {
+ nav {
+ display: block;
+ }
+ }
+}
+
+button[data-action="taxonomy#toggle"] {
+ position: absolute;
+ left: 0.7rem;
+ display: block;
+ cursor: pointer;
+ padding: 16px;
+ color: transparent;
+ background: transparent var(--icon-menu-off) top left/32px no-repeat;
+ border: none;
+ text-align: center;
+ z-index: 1002;
+
+ &.on {
+ background-image: var(--icon-menu-on);
+ }
+}
+