Mercurial > gemma

comparison 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
comparison
equal deleted inserted replaced
5628:a985f8c46cf3 5629:84d01a536bec
63 </div> 63 </div>
64 </div> 64 </div>
65 </transition> 65 </transition>
66 </template> 66 </template>
67 67
68 <style lang="sass" scoped> 68 <style scoped>
69 .dateselection 69 .dateselection {
70 width: 250px 70 width: 250px;
71 .overlay 71 }
72 position: fixed 72
73 z-index: 9 73 .overlay {
74 top: 0 74 position: fixed;
75 right: 0 75 z-index: 9;
76 bottom: 0 76 top: 0;
77 left: 0 77 right: 0;
78 background: rgba(0, 0, 0, .3) 78 bottom: 0;
79 .popup 79 left: 0;
80 display: flex 80 background: rgba(0, 0, 0, 0.3);
81 flex-direction: column 81 }
82 box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) 82 .overlay .popup {
83 background-color: #fff 83 display: flex;
84 border-radius: 0.25rem 84 flex-direction: column;
85 max-width: 320px 85 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
86 .popup-header 86 background-color: #fff;
87 display: flex 87 border-radius: 0.25rem;
88 justify-content: space-between 88 max-width: 320px;
89 align-items: center 89 }
90 padding-left: .5rem 90 .overlay .popup .popup-header {
91 border-bottom: 1px solid #dee2e6 91 display: flex;
92 color: var(--color-info) 92 justify-content: space-between;
93 margin-bottom: 0 93 align-items: center;
94 padding: 0.25rem 94 padding-left: 0.5rem;
95 font-weight: bold 95 border-bottom: 1px solid #dee2e6;
96 .popup-title 96 color: var(--color-info);
97 padding-left: 0.25rem 97 margin-bottom: 0;
98 .popup-icon 98 padding: 0.25rem;
99 margin-right: 0.25rem 99 font-weight: bold;
100 .popup-close 100 }
101 color: #aaa 101 .overlay .popup .popup-header .popup-title {
102 padding: 3px 5px 102 padding-left: 0.25rem;
103 border-radius: 0.25rem 103 }
104 cursor: pointer 104 .overlay .popup .popup-header .popup-title .popup-icon {
105 transition: background-color 0.3s, color 0.3s 105 margin-right: 0.25rem;
106 &:hover 106 }
107 color: #888 107 .overlay .popup .popup-header .popup-close {
108 background-color: #eee 108 color: #aaa;
109 .popup-footer 109 padding: 3px 5px;
110 display: flex 110 border-radius: 0.25rem;
111 justify-content: space-between 111 cursor: pointer;
112 align-items: center 112 transition: background-color 0.3s, color 0.3s;
113 border-top: 1px solid #dee2e6 113 }
114 padding: 0.25rem 114 .overlay .popup .popup-header .popup-close:hover {
115 color: #888;
116 background-color: #eee;
117 }
118 .overlay .popup .popup-footer {
119 display: flex;
120 justify-content: space-between;
121 align-items: center;
122 border-top: 1px solid #dee2e6;
123 padding: 0.25rem;
124 }
115 </style> 125 </style>
116 126
117 <script> 127 <script>
118 /* This is Free Software under GNU Affero General Public License v >= 3.0 128 /* This is Free Software under GNU Affero General Public License v >= 3.0
119 * without warranty, see README.md and license for details. 129 * without warranty, see README.md and license for details.