insomnia/app/ui/css/components/modal.less
Gregory Schier 46d3719b99 Sync Proof of Concept (#33)
* Maybe working POC

* Change to use remote url

* Other URL too

* Some logic

* Got the push part working

* Made some updates

* Fix

* Update

* Add status code check

* Stuff

* Implemented new sync api

* A bit more robust

* Debounce changes

* Change timeout

* Some fixes

* Remove .less

* Better error handling

* Fix base url

* Support for created vs updated docs

* Try silent

* Silence removal too

* Small fix after merge

* Fix test

* Stuff

* Implement key generation algorithm

* Tidy

* stuff

* A bunch of stuff for the new API

* Integrated the session stuff

* Stuff

* Just started on encryption

* Lots of updates to encryption

* Finished createResourceGroup function

* Full encryption/decryption working (I think)

* Encrypt localstorage with sessionID

* Some more

* Some extra checks

* Now uses separate DB. Still needs to be simplified a LOT

* Fix deletion bug

* Fixed unicode bug with encryption

* Simplified and working

* A bunch of polish

* Some stuff

* Removed some workspace meta properties

* Migrated a few more meta properties

* Small changes

* Fix body scrolling and url cursor jumping

* Removed duplication of webpack port

* Remove workspaces reduces

* Some small fixes

* Added sync modal and opt-in setting

* Good start to sync flow

* Refactored modal footer css

* Update sync status

* Sync logger

* A bit better logging

* Fixed a bunch of sync-related bugs

* Fixed signup form button

* Gravatar component

* Split sync modal into tabs

* Tidying

* Some more error handling

* start sending 'user agent

* Login/signup error handling

* Use real UUIDs

* Fixed tests

* Remove unused function

* Some extra checks

* Moved cloud sync setting to about page

* Some small changes

* Some things
2016-10-21 10:20:36 -07:00

114 lines
2.2 KiB
Plaintext

@import '../constants/dimensions';
@import '../constants/colors';
.modal {
display: none;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: @padding-lg;
&:focus {
outline: 0;
}
&.modal--fixed-height .modal__content {
height: 100%;
}
&.modal--open {
display: block;
}
.modal__backdrop {
background: @bg-backdrop;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.modal__content {
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto minmax(0, 1fr) auto;
color: @font-super-light-bg;
border-radius: @radius-md;
overflow: hidden;
box-sizing: border-box;
box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.2);
width: @modal-width;
max-width: 100%;
max-height: 100%;
margin: auto;
}
&.modal--wide .modal__content {
width: @modal-width-wide;
}
&.modal--fixed-top .modal__content {
margin: 0 auto auto auto;
}
.modal__header {
border-bottom: 1px solid @hl-md;
height: @line-height-md;
font-size: @font-size-lg;
line-height: @line-height-md;
padding: 0 @padding-md;
position: relative;
background-color: @bg-light;
.modal__close-btn {
position: absolute;
height: 100%;
right: 0;
}
}
.modal__body {
overflow: auto;
background-color: @bg-super-light;
min-height: 2rem;
box-sizing: border-box;
max-width: 100%;
&.modal__body--no-scroll {
overflow: visible;
height: 100%;
}
}
.modal__footer {
border-top: 1px solid @hl-md;
background-color: @bg-super-light;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.modal__footer > *:last-child {
// Push last item of footer to right. This is very important to pull right
// if there is only a single item in the footer.
margin-left: auto;
}
.modal__content > *:not(.modal__backdrop):last-child {
border-bottom-left-radius: @radius-md;
border-bottom-right-radius: @radius-md;
}
// 2nd child because the backdrop is the first
.modal__content > *:nth-child(2) {
border-top-left-radius: @radius-md;
border-top-right-radius: @radius-md;
}
}