diff options
Diffstat (limited to 'design/sass/_modal.scss')
| -rw-r--r-- | design/sass/_modal.scss | 201 |
1 files changed, 96 insertions, 105 deletions
diff --git a/design/sass/_modal.scss b/design/sass/_modal.scss index 57a7e51..dd21816 100644 --- a/design/sass/_modal.scss +++ b/design/sass/_modal.scss @@ -1,112 +1,103 @@ -/** - * Component: Overlay - */ -/* BACKDROP */ -.novi-backdrop { - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 7000; - position: fixed; - overflow-x: hidden; - overflow-y: auto; - background: rgba(0, 0, 0, 0.75); - opacity: 0; - animation-name: fadeIn; - animation-duration: .4s; - animation-fill-mode: forwards; +#overlay{ + font-family:Lato; + position:fixed; + width:100vw; + height:100vh; + overflow:hidden; + top:0; + left:0; + right:0; + bottom:0; + animation:overlay .3s forwards ease; + background-color:rgba(0,0,0,.8); + transform:scale(1); + transform-origin:center center; + z-index: 2000; + display: block; + > div { + position:absolute; + top:50%; + left:50%; + transform:translate(-50%,-50%); + } + header{ + @include fancy_sans; + @include fontsize(18); + padding: 1rem 1rem 1rem 0; + margin-left: 0; + } } -/* OVERLAY */ -.novi-overlay { - text-align: center; - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; +.top { + z-index: 10000; } -.novi-overlay:before { - content: ''; - display: inline-block; - height: 10%; - vertical-align: middle; -} -.novi-overlay__container { - width: 100%; - position: relative; - display: inline-block; - vertical-align: middle; - margin: 0 auto; - text-align: left; - z-index: 8000; - padding: 0 15px; -} -.novi-overlay__content { - position: relative; - background: #FFF; - padding: 40px; - width: auto; - margin: 15px auto; - width: 100%; - max-width: 700px; - animation-name: fadeZoomIn; - animation-duration: .4s; - opacity: 0; - animation-fill-mode: forwards; - animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); - border-radius: 8px; -} -.novi-overlay__content--video { - padding: 0; - height: 360px; -} -.novi-overlay__content--video .novi-overlay-close { - top: -25px; - right: 0; -} -/* CLOSE BUTTON */ -.novi-overlay-close { - padding: 0; - background: none; - position: absolute; - top: 15px; - right: 15px; - display: block; - width: 15px; - height: 15px; - z-index: 1; - border: 0; - background-size: 100%; - background-repeat: no-repeat; - background-position: 100% 0; - background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIxLjkgMjEuOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjEuOSAyMS45IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KICA8cGF0aCBkPSJNMTQuMSwxMS4zYy0wLjItMC4yLTAuMi0wLjUsMC0wLjdsNy41LTcuNWMwLjItMC4yLDAuMy0wLjUsMC4zLTAuN3MtMC4xLTAuNS0wLjMtMC43bC0xLjQtMS40QzIwLDAuMSwxOS43LDAsMTkuNSwwICBjLTAuMywwLTAuNSwwLjEtMC43LDAuM2wtNy41LDcuNWMtMC4yLDAuMi0wLjUsMC4yLTAuNywwTDMuMSwwLjNDMi45LDAuMSwyLjYsMCwyLjQsMFMxLjksMC4xLDEuNywwLjNMMC4zLDEuN0MwLjEsMS45LDAsMi4yLDAsMi40ICBzMC4xLDAuNSwwLjMsMC43bDcuNSw3LjVjMC4yLDAuMiwwLjIsMC41LDAsMC43bC03LjUsNy41QzAuMSwxOSwwLDE5LjMsMCwxOS41czAuMSwwLjUsMC4zLDAuN2wxLjQsMS40YzAuMiwwLjIsMC41LDAuMywwLjcsMC4zICBzMC41LTAuMSwwLjctMC4zbDcuNS03LjVjMC4yLTAuMiwwLjUtMC4yLDAuNywwbDcuNSw3LjVjMC4yLDAuMiwwLjUsMC4zLDAuNywwLjNzMC41LTAuMSwwLjctMC4zbDEuNC0xLjRjMC4yLTAuMiwwLjMtMC41LDAuMy0wLjcgIHMtMC4xLTAuNS0wLjMtMC43TDE0LjEsMTEuM3oiIGZpbGw9IiMwMDAwMDAiLz4KPC9zdmc+Cg==); +@keyframes modal{ + from{ + -webkit-transform: scale(0.5); + -moz-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + opacity: 0; + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + transition: all 0.4s; + }; + to{ + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + opacity: 1; + } } -.novi-overlay-close:hover, -.novi-overlay-close:focus, -.novi-overlay-close:active { - outline: none; - cursor: pointer; +@keyframes overlay{ + from{ + background-color:rgba(0,0,0,0); + }; + to{ + background-color:rgba(0,0,0,.8); + } } -/* HELPER CLASSES */ -.no-scroll { - overflow: hidden; +#overlay-wrapper { + max-width: 52%; + width: 90%; } -@keyframes fadeZoomIn { - from { - opacity: 0; - transform: scale(0.5) translateY(300px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } +#modal { + min-height: 330px; + padding: 0 1rem 1rem 1rem; + background-color: white; + border-radius: 4px; + overflow:hidden; + animation:modal .2s forwards ease; + -webkit-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.5); + -moz-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.5); + box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.5); + + + & > div { + color: #424242; + background-color: white; + } + // specific fixes for notebook create form + #nb-create-form { width: 99%;} + .flex-wrapper { + display: block; + margin-top: .5rem; + #color-picker { + margin-top: 3rem; + margin-left: .25rem; + } + .nb-name { width: 100%;} + } + input[type="submit"] { + float: right; + } + } -@keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } +#hed-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + & > * { + width: auto; + } } |