Mercurial > gemma

comparison client/src/components/Sidebar.vue @ 1449:bb47531bdd22

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
sass to scss
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 03 Dec 2018 10:19:59 +0100
parents f4b3fb43b311
children 33dda08d67be
comparison
equal deleted inserted replaced
1448:ef388dcbb946 1449:bb47531bdd22
134 } 134 }
135 } 135 }
136 }; 136 };
137 </script> 137 </script>
138 138
139 <style lang="sass" scoped> 139 <style lang="scss" scoped>
140 .menubutton 140 .menubutton {
141 height: $icon-height 141 height: 2rem;
142 width: $icon-width 142 width: 2rem;
143 top: 0 143 top: 0;
144 left: 0 144 left: 0;
145 color: #666 145 color: #666;
146 }
146 147
147 .menu 148 .menu a {
148 a 149 display: block;
149 display: block 150 text-align: left;
150 text-align: left 151 padding: 0.5rem 1rem;
151 padding: 0.5rem 1rem 152 color: #333;
152 color: #333 153 text-decoration: none;
153 text-decoration: none 154 }
154 svg path
155 fill: #666
156 &:hover
157 background-color: #f8f8f8
158 &.router-link-exact-active
159 background-color: $color-info
160 color: #fff
161 svg path
162 fill: #fff
163 &.secondary
164 &.active
165 background: lighten($color-info, 55)
166 color: darken($color-info, 15)
167 svg path
168 fill: darken($color-info, 15)
169 155
170 .sidebar 156 .menu a svg path {
171 background-color: #ffffff 157 fill: #666;
172 padding-top: $large-offset 158 }
173 opacity: $slight-transparent
174 transition: $transition-fast
175 overflow: hidden
176 159
177 .sidebarcollapsed 160 .menu a:hover {
178 max-height: $icon-height 161 background-color: #f8f8f8;
179 max-width: $icon-width 162 }
180 163
181 .sidebarextended 164 .menu a.router-link-exact-active {
182 max-height: 35rem 165 background-color: #17a2b8;
183 max-width: $sidebar-width 166 color: #fff;
167 }
168
169 .menu a.router-link-exact-active svg path {
170 fill: #fff;
171 }
172
173 .menu a.secondary.active {
174 background: #ebfafd;
175 color: #0f6674;
176 }
177
178 .menu a.secondary.active svg path {
179 fill: #0f6674;
180 }
181
182 .sidebar {
183 background-color: #ffffff;
184 padding-top: $large-offset;
185 opacity: $slight-transparent;
186 transition: $transition-fast;
187 overflow: hidden;
188 }
189
190 .sidebarcollapsed {
191 max-height: $icon-height;
192 max-width: $icon-width;
193 }
194
195 .sidebarextended {
196 max-height: 35rem;
197 max-width: $sidebar-width;
198 }
184 </style> 199 </style>