Mercurial > gemma
diff client/src/components/Popup.vue @ 5629:84d01a536bec 729-node-js-newer-version
Transformed scss and sass styles into css
author | Luisa Beerboom <lbeerboom@intevation.de> |
---|---|
date | Thu, 11 May 2023 13:23:52 +0200 |
parents | 7768f14f6535 |
children |
line wrap: on
line diff
--- a/client/src/components/Popup.vue Tue May 09 13:20:28 2023 +0200 +++ b/client/src/components/Popup.vue Thu May 11 13:23:52 2023 +0200 @@ -65,53 +65,63 @@ </transition> </template> -<style lang="sass" scoped> -.dateselection - width: 250px -.overlay - position: fixed - z-index: 9 - top: 0 - right: 0 - bottom: 0 - left: 0 - background: rgba(0, 0, 0, .3) - .popup - display: flex - flex-direction: column - box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) - background-color: #fff - border-radius: 0.25rem - max-width: 320px - .popup-header - display: flex - justify-content: space-between - align-items: center - padding-left: .5rem - border-bottom: 1px solid #dee2e6 - color: var(--color-info) - margin-bottom: 0 - padding: 0.25rem - font-weight: bold - .popup-title - padding-left: 0.25rem - .popup-icon - margin-right: 0.25rem - .popup-close - color: #aaa - padding: 3px 5px - border-radius: 0.25rem - cursor: pointer - transition: background-color 0.3s, color 0.3s - &:hover - color: #888 - background-color: #eee - .popup-footer - display: flex - justify-content: space-between - align-items: center - border-top: 1px solid #dee2e6 - padding: 0.25rem +<style scoped> +.dateselection { + width: 250px; +} + +.overlay { + position: fixed; + z-index: 9; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(0, 0, 0, 0.3); +} +.overlay .popup { + display: flex; + flex-direction: column; + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); + background-color: #fff; + border-radius: 0.25rem; + max-width: 320px; +} +.overlay .popup .popup-header { + display: flex; + justify-content: space-between; + align-items: center; + padding-left: 0.5rem; + border-bottom: 1px solid #dee2e6; + color: var(--color-info); + margin-bottom: 0; + padding: 0.25rem; + font-weight: bold; +} +.overlay .popup .popup-header .popup-title { + padding-left: 0.25rem; +} +.overlay .popup .popup-header .popup-title .popup-icon { + margin-right: 0.25rem; +} +.overlay .popup .popup-header .popup-close { + color: #aaa; + padding: 3px 5px; + border-radius: 0.25rem; + cursor: pointer; + transition: background-color 0.3s, color 0.3s; +} +.overlay .popup .popup-header .popup-close:hover { + color: #888; + background-color: #eee; +} +.overlay .popup .popup-footer { + display: flex; + justify-content: space-between; + align-items: center; + border-top: 1px solid #dee2e6; + padding: 0.25rem; +} </style> <script>