diff options
Diffstat (limited to 'app/javascript/scss/components')
| -rw-r--r-- | app/javascript/scss/components/_body.scss | 167 | ||||
| -rw-r--r-- | app/javascript/scss/components/_debug.scss | 18 | ||||
| -rw-r--r-- | app/javascript/scss/components/_flash.scss | 35 | ||||
| -rw-r--r-- | app/javascript/scss/components/_fonts.scss | 12 | ||||
| -rw-r--r-- | app/javascript/scss/components/_footer.scss | 20 | ||||
| -rw-r--r-- | app/javascript/scss/components/_header.scss | 34 | ||||
| -rw-r--r-- | app/javascript/scss/components/_index.scss | 8 | ||||
| -rw-r--r-- | app/javascript/scss/components/_map.scss | 19 | ||||
| -rw-r--r-- | app/javascript/scss/components/_user_info.scss | 70 |
9 files changed, 383 insertions, 0 deletions
diff --git a/app/javascript/scss/components/_body.scss b/app/javascript/scss/components/_body.scss new file mode 100644 index 0000000..72d90df --- /dev/null +++ b/app/javascript/scss/components/_body.scss @@ -0,0 +1,167 @@ +/* + * SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc + * + * SPDX-License-Identifier: LAL-1.3 + */ + +html { + color: var(--primary); + font-family: var(--font-family); + font-size: .938em; + line-height: 1.4; + background-color: var(--secondary); + overflow-y: scroll; + direction: ltr; + display: block; + height: 100%; +} + +body { + min-width: 0; + min-height: 100%; + margin: 0 auto; + background-attachment: fixed; + background-size: cover; + display: block; + + &:before, &:after { + content: ""; + display: table; + } + &:after { + clear: both; + } + + > main, > header, > footer { + display: block; + width: calc(100% - 16px); + max-width: 1110px; + margin-left: auto; + margin-right: auto; + padding-left: 8px; + padding-right: 8px; + } +} + +img { + max-width: 100%; +} + +main { + position: relative; + padding-top: 5.8572em; + &:before { + content: ""; + display: table; + } +} + +main > article { + background-color: rgba(255, 255, 255, 0.8); + z-index: 990; +} + +body>aside { + position: fixed; + z-index: 1000; + background-color: var(--incommon-clear85); + top: 5rem; + bottom: 0; + border-top-right-radius: 1rem; +} + + +:root { + --font-family: Helvetica, Arial, sans-serif; + --scheme-type: light; + --primary: #222; + --secondary: #fff; + --tertiary: #08c; + --quaternary: #e45735; + --header-background: #fff; + --header-primary: #333; + --highlight: #ffff4d; + --danger: #e45735; + --success: #090; + --love: #fa6c8d; + --always-black-rgb: 0, 0, 0; + --primary-rgb: 34,34,34; + --primary-low-rgb: 232.9,232.9,232.9; + --secondary-rgb: 255,255,255; + --tertiary-rgb: 0,136,204; + --primary-very-low: #f8f8f8; + --primary-low: #e9e9e9; + --primary-low-mid: #bdbdbd; + --primary-medium: #919191; + --primary-high: #646464; + --primary-very-high: #434343; + --header-primary-low: #ebebeb; + --header-primary-low-mid: #c2c2c2; + --header-primary-medium: #999; + --header-primary-high: #707070; + --header-primary-very-high: #525252; + --secondary-low: #4d4d4d; + --secondary-medium: gray; + --secondary-high: #a6a6a6; + --secondary-very-high: #ededed; + --tertiary-low: #d1f0ff; + --tertiary-medium: #6cf; + --tertiary-high: #0aadff; + --tertiary-hover: #069; + --quaternary-low: #f7cdc2; + --highlight-low: #ffffca; + --highlight-medium: #ffffa6; + --highlight-high: #a6a600; + --danger-low: #fbe6e1; + --danger-low-mid: rgba(242,171,154,0.7); + --danger-medium: #ec8972; + --danger-hover: #c63c1b; + --success-low: #b8ffb8; + --success-medium: #4dff4d; + --success-hover: #007a00; + --love-low: #fee9ee; + --wiki: green; + --blend-primary-secondary-5: #f9f9f9; + --primary-med-or-secondary-med: #919191; + --primary-med-or-secondary-high: #919191; + --primary-high-or-secondary-low: #646464; + --primary-low-mid-or-secondary-high: #bdbdbd; + --primary-low-mid-or-secondary-low: #bdbdbd; + --primary-or-primary-low-mid: #222; + --highlight-low-or-medium: #ffffca; + --tertiary-low-or-tertiary-high: #d1f0ff; + --tertiary-med-or-tertiary: #6cf; + --secondary-or-primary: #fff; + --tertiary-or-white: #08c; + --facebook-or-white: #4267b2; + --twitter-or-white: #1da1f2; + --hljs-comment: #998; + --hljs-number: #099; + --hljs-string: #d14; + --hljs-literal: #458; + --hljs-tag: #000080; + --hljs-attribute: #008080; + --hljs-symbol: #990073; + --hljs-bg: #f8f8f8; + --google: #fff; + --google-hover: #f2f2f2; + --instagram: #e1306c; + --instagram-hover: #ac194b; + --facebook: #4267b2; + --facebook-hover: #2d477a; + --cas: #70ba61; + --twitter: #1da1f2; + --twitter-hover: #0c85d0; + --github: #100e0f; + --github-hover: #463e42; + --discord: #7289da; + --discord-hover: #4a67cf; + --gold: #e7c300; + --silver: silver; + --bronze: #cd7f32; + --incommon-blue: #216778; + --incommon-blue50: rgba(33, 103, 120, 0.5); + --incommon-clear85: rgba(237, 238, 201, 0.85); + --icon-menu-off: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQzNDQiCiAgIHdpZHRoPSIzNi4yNSIKICAgaGVpZ2h0PSIzNi4yNSIKICAgdmVyc2lvbj0iMS4xIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE0MzUwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzNDM0OCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoNDM0MiIKICAgICBkPSJtIDE5LjQ4NDMzLDIxLjIzNDQgcSAwLjY0MDYyLC0xLjQ4NDQgMC42NDA2MiwtMy4xMDk0IDAsLTEuNjI1IC0wLjY0MDYyLC0zLjA5MzcgLTAuNjI1LC0xLjQ4NDQgLTEuNzAzMSwtMi41NjI1IC0xLjA3ODE0LC0xLjA3ODEgLTIuNTYyNDksLTEuNzAzMSAtMS40Njg3MywtMC42NDA3IC0zLjA5MzcxLC0wLjY0MDcgLTEuNjI0OTcsMCAtMy4xMDkzOSwwLjY0MDcgUSA3LjU0NjksMTEuMzkwNyA2LjQ2ODc3LDEyLjQ2ODggNS4zOTA2MywxMy41NDY5IDQuNzUsMTUuMDMxMyA0LjEyNSwxNi41IDQuMTI1LDE4LjEyNSBxIDAsMS42MjUgMC42MjUsMy4xMDk0IDAuNjQwNjIsMS40Njg3IDEuNzE4NzcsMi41NDY5IDEuMDc4MTMsMS4wNzggMi41NDY4NywxLjcxODcgMS40ODQzNSwwLjYyNSAzLjEwOTM5LDAuNjI1IDEuNjI0OTgsMCAzLjA5MzcxLC0wLjYyNSAxLjQ4NDM1LC0wLjY0MDcgMi41NjI0OSwtMS43MTg3IDEuMDc4MTQsLTEuMDc4MiAxLjcwMzEsLTIuNTQ2OSB6IG0gMTIuMDAwMDYsMCBxIDAuNjQwNjMsLTEuNDg0NCAwLjY0MDYzLC0zLjEwOTQgMCwtMS42MjUgLTAuNjQwNjMsLTMuMDkzNyAtMC42MjUsLTEuNDg0NCAtMS43MDMwOSwtMi41NjI1IC0xLjA3ODEzLC0xLjA3ODEgLTIuNTYyNDgsLTEuNzAzMSAtMS40Njg3NCwtMC42NDA3IC0zLjA5MzcxLC0wLjY0MDcgaCAtNi4wMzEyNiBxIDEuODU5MzMsMS40MDYzIDIuOTM3NDcsMy41IDEuMDkzNzUsMi4wOTM4IDEuMDkzNzUsNC41IDAsMi40MDYzIC0xLjA5Mzc1LDQuNSAtMS4wNzgxNCwyLjA5MzcgLTIuOTM3NDcsMy41IGggNi4wMzEyNiBxIDEuNjI0OTcsMCAzLjA5MzcxLC0wLjYyNSAxLjQ4NDM1LC0wLjY0MDcgMi41NjI0OCwtMS43MTg3IDEuMDc4MTQsLTEuMDc4MiAxLjcwMzA5LC0yLjU0NjkgeiBNIDMzLjMyODEyLDE0LjI1IHEgMC43OTY4OCwxLjg0MzggMC43OTY4OCwzLjg3NSAwLDIuMDMxMyAtMC43OTY4OCwzLjg5MDYgLTAuNzk2ODcsMS44NDM4IC0yLjE0MDU5LDMuMTg3NSAtMS4zMjgxMSwxLjMyODEgLTMuMTg3NTEsMi4xMjUgLTEuODQzNzMsMC43OTY5IC0zLjg3NDk4LDAuNzk2OSBIIDEyLjEyNDk2IHEgLTIuMDMxMjYsMCAtMy44OTA1OSwtMC43OTY5IFEgNi4zOTA2NSwyNi41MzEyIDUuMDQ2ODYsMjUuMjAzMSAzLjcxODc1LDIzLjg1OTQgMi45MjE4NywyMi4wMTU2IDIuMTI1LDIwLjE1NjMgMi4xMjUsMTguMTI1IDIuMTI1LDE2LjA5MzggMi45MjE4NywxNC4yNSAzLjcxODc1LDEyLjM5MDYgNS4wNDY4NiwxMS4wNjI1IDYuMzkwNTgsOS43MTg4IDguMjM0MzcsOC45MjE5IDEwLjA5MzcsOC4xMjUgMTIuMTI0OTYsOC4xMjUgaCAxMi4wMDAwOCBxIDIuMDMxMjUsMCAzLjg3NDk4LDAuNzk2OSAxLjg1OTMzLDAuNzk2OSAzLjE4NzUxLDIuMTQwNiAxLjM0MzcyLDEuMzI4MSAyLjE0MDU5LDMuMTg3NSB6IgogICAgIHN0eWxlPSJmaWxsOiMwMDgwODAiIC8+CiAgPGNpcmNsZQogICAgIHI9IjguMDE1MDAwMyIKICAgICBjeT0iMTguMTMzODMxIgogICAgIGN4PSIxMi4xMjU3MDQiCiAgICAgaWQ9InBhdGg0ODk1IgogICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZWRlZWM5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxOC42MzU4NjIzNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOmZpbGwgbWFya2VycyBzdHJva2UiIC8+Cjwvc3ZnPgo='); + --icon-menu-on: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzM0NDMiCiAgIHdpZHRoPSIzNi4yNSIKICAgaGVpZ2h0PSIzNi4yNSIKICAgdmVyc2lvbj0iMS4xIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGEzNDQ5Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMzQ0NyIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMzQ0MSIKICAgICBkPSJtIDIuOTE4ODU3NCwyMi4wMTY3OSBxIC0wLjc5Mzg1NzEsLTEuODYzNjc0IC0wLjc5Mzg1NzEsLTMuODkzNjggMCwtMi4wMzAwMDYgMC43OTM4NTcxLC0zLjg3NDc3OSBRIDMuNzIwMjc0OSwxMi4zODg0MzggNS4wNDcxNTAxLDExLjA2MTU2MiA2LjM5MjkyNjgsOS43MTU3ODUzIDguMjMzOTE5NCw4LjkxODE0ODMgMTAuMDkzODEzLDguMTI0MjkxMyAxMi4xMjc2LDguMTI0MjkxMyBoIDExLjk5ODU4MiBxIDIuMDMwMDA2LDAgMy44NzQ3NzgsMC43OTM4NTcgMS44NTk4OTQsMC43OTc2MzcgMy4xODY3NjksMi4xNDM0MTM3IDEuMzQ1Nzc3LDEuMzI2ODc2IDIuMTQzNDE1LDMuMTg2NzY5IDAuNzkzODU2LDEuODQ0NzczIDAuNzkzODU2LDMuODc0Nzc5IDAsMi4wMzM3ODUgLTAuNzkzODU2LDMuODkzNjggLTAuNzk3NjM4LDEuODQ0NzcyIC0yLjE0MzQxNSwzLjE4Njc2OSAtMS4zMjMwOTUsMS4zMjY4NzUgLTMuMTg2NzY5LDIuMTI0NTEyIC0xLjg0NDc3MiwwLjc5NzYzOCAtMy44NzQ3NzgsMC43OTc2MzggSCAxMi4xMjc2IHEgLTIuMDMzNzg3LDAgLTMuODkzNjgwNiwtMC43OTM4NTggUSA2LjM5MjkyNjgsMjYuNTMwNDM0IDUuMDQ3MTUwMSwyNS4yMDM1NTkgMy43MjAyNzQ5LDIzLjg2MTU2MiAyLjkyMjYzNzYsMjIuMDE2NzkgWiBNIDIxLjAxODc5OSwyNS41MDIyIHEgMS40ODU2NDYsMC42MjM3NDUgMy4xMTExNjMsMC42MjM3NDUgMS42MjU1MTcsMCAzLjA5MjI2MiwtMC42MjM3NDUgMS40ODU2NDcsLTAuNjQyNjQ2IDIuNTYzMDI1LC0xLjcyMDAyNCAxLjA4MTE1NywtMS4wNzczNzcgMS43MDExMjIsLTIuNTQ3OTAzIDAuNjQyNjQ2LC0xLjQ4NTY0NiAwLjY0MjY0NiwtMy4xMTExNjMgMCwtMS42MjU1MTcgLTAuNjQyNjQ2LC0zLjA5MjI2MiAtMC42MTk5NjUsLTEuNDg1NjQ3IC0xLjcwMTEyMiwtMi41NjMwMjUgLTEuMDc3Mzc4LC0xLjA3NzM3NyAtMi41NjMwMjUsLTEuNzAxMTIyIC0xLjQ2Njc0NSwtMC42NDI2NDYgLTMuMDkyMjYyLC0wLjY0MjY0NiAtMS42MjU1MTcsMCAtMy4xMTExNjMsMC42NDI2NDYgLTEuNDcwNTI2LDAuNjIzNzQ1IC0yLjU0NzkwNCwxLjcwMTEyMiAtMS4wNzczNzcsMS4wNzczNzggLTEuNzIwMDIzLDIuNTYzMDI1IC0wLjYyMzc0NSwxLjQ2Njc0NSAtMC42MjM3NDUsMy4wOTIyNjIgMCwxLjYyNTUxNyAwLjYyMzc0NSwzLjExMTE2MyAwLjY0MjY0NiwxLjQ3MDUyNiAxLjcyMDAyMywyLjU0NzkwMyAxLjA3NzM3OCwxLjA3NzM3OCAyLjU0NzkwNCwxLjcyMDAyNCB6IgogICAgIHN0eWxlPSJmaWxsOiMwMDgwODA7ZmlsbC1vcGFjaXR5OjEiIC8+CiAgPGNpcmNsZQogICAgIHI9IjguMDE1MDAwMyIKICAgICBjeT0iMTguMTMyMDc4IgogICAgIGN4PSIyNC4xMjI3ODkiCiAgICAgaWQ9InBhdGg0ODk1IgogICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZWRlZWM5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxOC42MzU4NjIzNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOmZpbGwgbWFya2VycyBzdHJva2UiIC8+Cjwvc3ZnPgo='); +} diff --git a/app/javascript/scss/components/_debug.scss b/app/javascript/scss/components/_debug.scss new file mode 100644 index 0000000..0e3aaa7 --- /dev/null +++ b/app/javascript/scss/components/_debug.scss @@ -0,0 +1,18 @@ +/* + * SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc + * + * SPDX-License-Identifier: LAL-1.3 + */ + +/* + DEBUG +*/ + +#debug { + position: fixed; + bottom: 0; + left: 0; + padding: 0.5rem; + background-color: rgba(255,0,0,0.5); + color: white; +} diff --git a/app/javascript/scss/components/_flash.scss b/app/javascript/scss/components/_flash.scss new file mode 100644 index 0000000..f168e68 --- /dev/null +++ b/app/javascript/scss/components/_flash.scss @@ -0,0 +1,35 @@ +/* + * SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc + * + * SPDX-License-Identifier: LAL-1.3 + */ + +/* + FLASH +*/ + +#flashes { + position: absolute; + bottom: 2rem; + right: 0; + margin: 0 auto; + width: 50%; + min-width: 24rem; + max-width: 64rem; + max-height: 10rem; + overflow: auto; + padding: 0.25rem; + z-index: 500; + + > span { + display: block; + padding: 0.5rem; + } + + .alert { + background-color: var(--danger-medium); + } + .notice { + background-color: var(--highlight-low); + } +} diff --git a/app/javascript/scss/components/_fonts.scss b/app/javascript/scss/components/_fonts.scss new file mode 100644 index 0000000..2a921dc --- /dev/null +++ b/app/javascript/scss/components/_fonts.scss @@ -0,0 +1,12 @@ +/* Override ForkAwesome font path to match Webpack's */ +$fa-font-path: '../media/fonts/'; + +/* Align font icon with the marker's head */ +.extra-marker-svg i.fa { + position: absolute; + top: 9px; + font-size: 16px; + left: -2px; + right: 0px; + text-align: center; +} diff --git a/app/javascript/scss/components/_footer.scss b/app/javascript/scss/components/_footer.scss new file mode 100644 index 0000000..4ab34a2 --- /dev/null +++ b/app/javascript/scss/components/_footer.scss @@ -0,0 +1,20 @@ +body>footer { + position: absolute; + z-index: 1004; + margin: 0 auto; + background-color: rgba(0,0,0,0.5); + color: white; + text-align: center; + bottom: 0; + left: 0; + right: 0; + width: 10rem; + border-top-left-radius: 1rem; + border-top-right-radius: 1rem; +} + +.app-version a:link, +.app-version a:visited { + color: whitesmoke; +} + diff --git a/app/javascript/scss/components/_header.scss b/app/javascript/scss/components/_header.scss new file mode 100644 index 0000000..3c7d460 --- /dev/null +++ b/app/javascript/scss/components/_header.scss @@ -0,0 +1,34 @@ +/* + * SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc + * + * SPDX-License-Identifier: LAL-1.3 + */ + +/* ----------------------------------------------------------------------------- + HEADER +----------------------------------------------------------------------------- */ + +body > header { + position: fixed; + backface-visibility: hidden; + top: 0; + left: 0; + right: 0; + width: 100%; + margin: 0 auto; + height: 4em; + background-color: var(--header-background); + box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25); + margin-bottom: 15px; + display: flex; + align-items: center; + z-index: 999; + + > h1 { + display: flex; + font-size: 1em; + img { + height: 2.667em; + } + } +} diff --git a/app/javascript/scss/components/_index.scss b/app/javascript/scss/components/_index.scss new file mode 100644 index 0000000..3730d5e --- /dev/null +++ b/app/javascript/scss/components/_index.scss @@ -0,0 +1,8 @@ +@import "body"; +@import "debug"; +@import "flash"; +@import "fonts"; +@import "footer"; +@import "header"; +@import "map"; +@import "user_info"; diff --git a/app/javascript/scss/components/_map.scss b/app/javascript/scss/components/_map.scss new file mode 100644 index 0000000..ba86dd4 --- /dev/null +++ b/app/javascript/scss/components/_map.scss @@ -0,0 +1,19 @@ +/* + * SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc + * + * SPDX-License-Identifier: LAL-1.3 + */ + +/* + MAP +*/ + +#map { + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; +} diff --git a/app/javascript/scss/components/_user_info.scss b/app/javascript/scss/components/_user_info.scss new file mode 100644 index 0000000..765be0a --- /dev/null +++ b/app/javascript/scss/components/_user_info.scss @@ -0,0 +1,70 @@ +/* + * SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc + * + * SPDX-License-Identifier: LAL-1.3 + */ + +/* ----------------------------------------------------------------------------- +User Info +----------------------------------------------------------------------------- */ + +#user_info { + position: absolute; + right: 0.8rem; + + nav { + top: 0; + padding: 0.7rem; + + ul { + display: none; + position: absolute; + right: 0; + background-color: var(--header-background); + box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25); + margin: 0; + list-style: none; + padding-left: 0; + z-index: 1000; + + li { + padding: 0.25em 1em; + width: 12rem; + } + } + + &:focus, &:hover { + padding-left: 6rem; + ul { + display: block; + margin-top: 0.4em; + padding-top: 1em; + } + } + + > a { + display: block; + height: 100%; + width: 2.2857em; + height: 2.2857em; + padding: 0.2143em; + text-decoration: none; + cursor: pointer; + border-top: 1px solid transparent; + border-left: 1px solid transparent; + border-right: 1px solid transparent; + transition: all linear 0.15s; + outline: none; + + > img { + border-radius: 50%; + } + } + } + + &.authenticated { + + } + &.anonymous { + } +} |