mirror of https://github.com/Requarks/wiki.git
6 changed files with 35 additions and 305 deletions
Unified View
Diff Options
-
19client/components/admin-dev.vue
-
2client/components/admin-groups.vue
-
14client/components/admin-logging.vue
-
2client/scss/app.scss
-
11client/scss/components/_dialog.scss
-
292client/scss/components/navigator.scss
@ -0,0 +1,11 @@ |
|||||
|
.dialog-header { |
||||
|
background-color: mc('blue', '700'); |
||||
|
background: radial-gradient(ellipse at top, mc('blue', '500'), transparent), |
||||
|
radial-gradient(ellipse at bottom, mc('blue', '800'), transparent); |
||||
|
height: 60px; |
||||
|
color: #FFF; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 0 1rem; |
||||
|
font-size: 1.2rem; |
||||
|
} |
@ -1,292 +0,0 @@ |
|||||
.navigator { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
width: 100%; |
|
||||
z-index: 100; |
|
||||
|
|
||||
&-bar { |
|
||||
display: flex; |
|
||||
justify-content: flex-start; |
|
||||
align-items: stretch; |
|
||||
background-color: rgba(mc('grey', '900'), .7); |
|
||||
} |
|
||||
|
|
||||
&-fab { |
|
||||
|
|
||||
&-button { |
|
||||
width: 50px; |
|
||||
height: 50px; |
|
||||
background-color: #FFF; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
cursor: pointer; |
|
||||
transition: all .4s ease; |
|
||||
|
|
||||
svg use { |
|
||||
transition: all .4s ease; |
|
||||
} |
|
||||
|
|
||||
&:hover { |
|
||||
svg use { |
|
||||
color: mc('blue', '500'); |
|
||||
fill: mc('blue', '500'); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&-title { |
|
||||
background-image: linear-gradient(to bottom right, mc('blue', '500') 0%, mc('blue', '700') 50%, mc('blue', '900') 100%); |
|
||||
background-size: 200%; |
|
||||
background-repeat: no-repeat; |
|
||||
padding: 0 1rem; |
|
||||
display: inline-flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
transition: all .4s ease; |
|
||||
cursor: pointer; |
|
||||
|
|
||||
&:hover { |
|
||||
background-position-y: -50px; |
|
||||
} |
|
||||
|
|
||||
h1 { |
|
||||
font-size: 1.2rem; |
|
||||
color: #FFF; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&-subtitle { |
|
||||
background-repeat: no-repeat; |
|
||||
background-position-x: -100vw; |
|
||||
color: #FFF; |
|
||||
flex: 1 1 auto; |
|
||||
display: flex; |
|
||||
justify-content: flex-start; |
|
||||
align-items: center; |
|
||||
padding: 0 1rem; |
|
||||
transition: background-position-x 1s ease; |
|
||||
|
|
||||
&.is-error { |
|
||||
background-image: linear-gradient(to right, rgba(mc('red', '500'), 1), rgba(mc('red', '500'), 0)); |
|
||||
} |
|
||||
&.is-warning { |
|
||||
background-image: linear-gradient(to right, rgba(mc('orange', '500'), 1), rgba(mc('orange', '500'), 0)); |
|
||||
} |
|
||||
&.is-success { |
|
||||
background-image: linear-gradient(to right, rgba(mc('green', '500'), 1), rgba(mc('green', '500'), 0)); |
|
||||
} |
|
||||
&.is-info { |
|
||||
background-image: linear-gradient(to right, rgba(mc('blue', '500'), 1), rgba(mc('blue', '500'), 0)); |
|
||||
} |
|
||||
|
|
||||
&.is-active { |
|
||||
background-position-x: 0; |
|
||||
} |
|
||||
|
|
||||
svg { |
|
||||
margin-right: .5rem; |
|
||||
animation: flash 1s linear 1s; |
|
||||
|
|
||||
&.navigator-subtitle-icon { |
|
||||
transition: all 1s ease; |
|
||||
|
|
||||
&-enter-active, &-leave-active { |
|
||||
transform: scale(1); |
|
||||
width: 24px; |
|
||||
margin-right: .5rem; |
|
||||
} |
|
||||
&-enter, &-leave-to { |
|
||||
transform: scale(0); |
|
||||
width: 0; |
|
||||
margin-right: 0; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
use { |
|
||||
color: #FFF; |
|
||||
fill: #FFF; |
|
||||
stroke: #FFF; |
|
||||
transition: all .4s ease; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
h2 { |
|
||||
font-size: 1rem; |
|
||||
font-weight: 400; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&-action { |
|
||||
display: flex; |
|
||||
justify-content: flex-end; |
|
||||
align-items: stretch; |
|
||||
position: relative; |
|
||||
|
|
||||
&-item { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
width: 50px; |
|
||||
cursor: pointer; |
|
||||
transition: all .4s ease; |
|
||||
|
|
||||
svg use { |
|
||||
color: #FFF; |
|
||||
fill: #FFF; |
|
||||
transition: all .4s ease; |
|
||||
} |
|
||||
|
|
||||
&:hover { |
|
||||
svg use { |
|
||||
color: mc('blue', '500'); |
|
||||
fill: mc('blue', '500'); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&.is-active { |
|
||||
background-color: #FFF; |
|
||||
|
|
||||
svg use { |
|
||||
color: mc('grey', '500'); |
|
||||
fill: mc('grey', '500'); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&-dropdown { |
|
||||
position: absolute; |
|
||||
right: 0; |
|
||||
top: 100%; |
|
||||
width: 250px; |
|
||||
border-radius: 0 0 0 5px; |
|
||||
transition: all .4s ease; |
|
||||
transform-origin: top right; |
|
||||
|
|
||||
&-enter-active, &-leave-active { |
|
||||
transform: scale(1); |
|
||||
} |
|
||||
&-enter, &-leave-to { |
|
||||
transform: scale(.1, 0); |
|
||||
} |
|
||||
|
|
||||
li { |
|
||||
background-color: #FFF; |
|
||||
height: 50px; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
padding: 0 .8rem 0 1rem; |
|
||||
|
|
||||
& + li { |
|
||||
border-top: 1px solid mc('grey', '100'); |
|
||||
} |
|
||||
|
|
||||
&:hover { |
|
||||
background-color: mc('grey', '100'); |
|
||||
} |
|
||||
|
|
||||
label { |
|
||||
font-size: .8rem; |
|
||||
font-weight: 600; |
|
||||
color: mc('blue', '800'); |
|
||||
text-transform: uppercase; |
|
||||
} |
|
||||
|
|
||||
&:last-child { |
|
||||
border-radius: 0 0 0 5px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&-sd { |
|
||||
width: 350px; |
|
||||
background-color: #FFF; |
|
||||
border-radius: 0 0 5px 0; |
|
||||
transition: all .4s ease; |
|
||||
transform-origin: top left; |
|
||||
|
|
||||
&-enter-active, &-leave-active { |
|
||||
transform: scale(1); |
|
||||
} |
|
||||
&-enter, &-leave-to { |
|
||||
transform: scale(.1, 0); |
|
||||
} |
|
||||
|
|
||||
&-actions { |
|
||||
background-color: mc('blue-grey', '50'); |
|
||||
display: flex; |
|
||||
|
|
||||
a { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
height: 50px; |
|
||||
width: 50px; |
|
||||
transition: all .4s ease; |
|
||||
|
|
||||
&.is-active { |
|
||||
background-color: #FFF; |
|
||||
} |
|
||||
|
|
||||
&:hover { |
|
||||
background-color: #FFF; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&-search { |
|
||||
position: relative; |
|
||||
|
|
||||
input { |
|
||||
display: block; |
|
||||
width: 100%; |
|
||||
padding: 0 3rem 0 1rem; |
|
||||
height: 40px; |
|
||||
border: 0; |
|
||||
font-size: .9rem; |
|
||||
color: mc('grey', '700'); |
|
||||
position: relative; |
|
||||
|
|
||||
&:focus { |
|
||||
outline: none; |
|
||||
border: 0; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&::after { |
|
||||
content: " "; |
|
||||
@include spinner(mc('blue', '200'),0.5s,18px); |
|
||||
position: absolute; |
|
||||
display: block; |
|
||||
top: 11px; |
|
||||
right: 1rem; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&-footer { |
|
||||
background-color: mc('blue-grey', '100'); |
|
||||
border-top: 5px solid mc('blue-grey', '200'); |
|
||||
border-radius: 0 0 5px 0; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
|
|
||||
a { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
height: 50px; |
|
||||
width: 50px; |
|
||||
transition: all .4s ease; |
|
||||
|
|
||||
&:hover { |
|
||||
background-color: mc('blue-grey', '200'); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
Write
Preview
Loading…
Cancel
Save