Mercurial > gemma

diff client/src/components/Popup.vue @ 5629:84d01a536bec 729-node-js-newer-version

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>