aboutsummaryrefslogtreecommitdiff
path: root/src/components/settings_modal/settings_modal.scss
diff options
context:
space:
mode:
authorlain <lain@soykaf.club>2020-06-12 14:17:56 +0000
committerlain <lain@soykaf.club>2020-06-12 14:17:56 +0000
commitfd109fa355ac491b86d1e10fcbfcdd577f1ac4d7 (patch)
treec27c2f3b684540b10ef9d4477349b4a8681eb7b2 /src/components/settings_modal/settings_modal.scss
parent1946661911c97651ba5356db22a0ddd00ba04864 (diff)
parent48365819d14d80d2aeb7174bca05bf76eee2e8e0 (diff)
Merge branch 'develop' into 'chore/improve-default-tos'
# Conflicts: # static/terms-of-service.html
Diffstat (limited to 'src/components/settings_modal/settings_modal.scss')
-rw-r--r--src/components/settings_modal/settings_modal.scss44
1 files changed, 44 insertions, 0 deletions
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
new file mode 100644
index 00000000..833ff89a
--- /dev/null
+++ b/src/components/settings_modal/settings_modal.scss
@@ -0,0 +1,44 @@
+@import 'src/_variables.scss';
+.settings-modal {
+ overflow: hidden;
+
+ &.peek {
+ .settings-modal-panel {
+ /* Explanation:
+ * Modal is positioned vertically centered.
+ * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
+ * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
+ * + 100% - we move modal completely off-screen, it's top boundary touches
+ * bottom of the screen
+ * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
+ */
+ transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
+ }
+ }
+
+ .settings-modal-panel {
+ overflow: hidden;
+ transition: transform;
+ transition-timing-function: ease-in-out;
+ transition-duration: 300ms;
+ width: 1000px;
+ max-width: 90vw;
+ height: 90vh;
+
+ @media all and (max-width: 800px) {
+ max-width: 100vw;
+ height: 100vh;
+ }
+
+ .panel-body {
+ height: 100%;
+ overflow-y: hidden;
+
+ .btn {
+ min-height: 28px;
+ min-width: 10em;
+ padding: 0 2em;
+ }
+ }
+ }
+}