Mercurial > gemma
comparison 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 |
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. |