mirror of https://github.com/Requarks/wiki.git
34 changed files with 9453 additions and 45 deletions
Unified View
Diff Options
-
1.eslintrc.json
-
14agent.js
-
53client/scss/app.scss
-
107client/scss/base/base.scss
-
327client/scss/base/colors.scss
-
2027client/scss/base/fonts.scss
-
142client/scss/base/mixins.scss
-
138client/scss/base/reset.scss
-
25client/scss/base/variables.scss
-
114client/scss/components/alert.scss
-
122client/scss/components/button.scss
-
26client/scss/components/footer.scss
-
213client/scss/components/form.scss
-
501client/scss/components/grid.scss
-
68client/scss/components/hero.scss
-
62client/scss/components/list.scss
-
355client/scss/components/markdown-content.scss
-
356client/scss/components/modal.scss
-
182client/scss/components/nav.scss
-
112client/scss/components/panel.scss
-
57client/scss/components/search.scss
-
83client/scss/components/sidebar.scss
-
90client/scss/components/table.scss
-
16client/scss/components/typography.scss
-
3486client/scss/libs/animate.scss
-
52client/scss/pages/_error.scss
-
306client/scss/pages/_login.scss
-
243libs/auth.js
-
58libs/config.js
-
120libs/rights.js
-
19middlewares/auth.js
-
2middlewares/security.js
-
12package.json
-
9server.js
@ -1,31 +1,38 @@ |
|||||
|
@charset "utf-8"; |
||||
|
|
||||
$primary: 'indigo'; |
$primary: 'indigo'; |
||||
|
|
||||
@import 'core-client/scss/core'; |
@import "base/variables"; |
||||
@import 'core-client/scss/components/alert'; |
@import "base/colors"; |
||||
@import 'core-client/scss/components/button'; |
@import "base/reset"; |
||||
@import 'core-client/scss/components/footer'; |
@import "base/mixins"; |
||||
@import 'core-client/scss/components/form'; |
@import "base/fonts"; |
||||
@import 'core-client/scss/components/grid'; |
@import "base/base"; |
||||
@import 'core-client/scss/components/hero'; |
@import "libs/animate"; |
||||
@import 'core-client/scss/components/markdown-content'; |
@import 'components/alert'; |
||||
@import 'core-client/scss/components/modal'; |
@import 'components/button'; |
||||
@import 'core-client/scss/components/nav'; |
@import 'components/footer'; |
||||
@import 'core-client/scss/components/panel'; |
@import 'components/form'; |
||||
@import 'core-client/scss/components/search'; |
@import 'components/grid'; |
||||
@import 'core-client/scss/components/sidebar'; |
@import 'components/hero'; |
||||
@import 'core-client/scss/components/table'; |
@import 'components/markdown-content'; |
||||
@import 'core-client/scss/components/typography'; |
@import 'components/modal'; |
||||
|
@import 'components/nav'; |
||||
@import './libs/twemoji-awesome'; |
@import 'components/panel'; |
||||
@import './libs/jquery-contextmenu'; |
@import 'components/search'; |
||||
|
@import 'components/sidebar'; |
||||
|
@import 'components/table'; |
||||
|
@import 'components/typography'; |
||||
|
|
||||
|
@import 'libs/twemoji-awesome'; |
||||
|
@import 'libs/jquery-contextmenu'; |
||||
@import 'node_modules/highlight.js/styles/tomorrow'; |
@import 'node_modules/highlight.js/styles/tomorrow'; |
||||
@import 'node_modules/simplemde/dist/simplemde.min'; |
@import 'node_modules/simplemde/dist/simplemde.min'; |
||||
|
|
||||
@import './components/_editor'; |
@import 'components/_editor'; |
||||
|
|
||||
@import './layout/_header'; |
@import 'layout/_header'; |
||||
//@import './layout/_content'; |
|
||||
|
|
||||
//@import './pages/_account'; |
@import 'pages/_welcome'; |
||||
@import './pages/_welcome'; |
|
@ -0,0 +1,107 @@ |
|||||
|
html { |
||||
|
box-sizing: border-box; |
||||
|
font-family: $core-font-standard; |
||||
|
} |
||||
|
*, *:before, *:after { |
||||
|
box-sizing: inherit; |
||||
|
} |
||||
|
|
||||
|
[v-cloak], .is-hidden { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
background-color: mc('blue-grey','100'); |
||||
|
} |
||||
|
|
||||
|
main { |
||||
|
background-color: #FFF; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
color: mc('indigo', '600'); |
||||
|
text-decoration: none; |
||||
|
|
||||
|
&:hover { |
||||
|
color: mc('indigo', '700'); |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Container |
||||
|
|
||||
|
.has-stickynav { |
||||
|
padding-top: 50px; |
||||
|
} |
||||
|
|
||||
|
.container { |
||||
|
position: relative; |
||||
|
|
||||
|
@include desktop { |
||||
|
margin: 0 auto; |
||||
|
max-width: 960px; |
||||
|
|
||||
|
// Modifiers |
||||
|
&.is-fluid { |
||||
|
margin: 0; |
||||
|
max-width: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
@include widescreen { |
||||
|
max-width: 1200px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
// Visibility |
||||
|
|
||||
|
.is-hidden { |
||||
|
display: none !important; |
||||
|
} |
||||
|
|
||||
|
.is-hidden-mobile { |
||||
|
@include mobile { |
||||
|
display: none !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.is-hidden-tablet { |
||||
|
@include tablet { |
||||
|
display: none !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.is-hidden-tablet-only { |
||||
|
@include tablet-only { |
||||
|
display: none !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.is-hidden-touch { |
||||
|
@include touch { |
||||
|
display: none !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.is-hidden-desktop { |
||||
|
@include desktop { |
||||
|
display: none !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.is-hidden-desktop-only { |
||||
|
@include desktop-only { |
||||
|
display: none !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.is-hidden-widescreen { |
||||
|
@include widescreen { |
||||
|
display: none !important; |
||||
|
} |
||||
|
} |
@ -0,0 +1,327 @@ |
|||||
|
$material-colors: ( |
||||
|
'red': ( |
||||
|
'50': #ffebee, |
||||
|
'100': #ffcdd2, |
||||
|
'200': #ef9a9a, |
||||
|
'300': #e57373, |
||||
|
'400': #ef5350, |
||||
|
'500': #f44336, |
||||
|
'600': #e53935, |
||||
|
'700': #d32f2f, |
||||
|
'800': #c62828, |
||||
|
'900': #b71c1c, |
||||
|
'a100': #ff8a80, |
||||
|
'a200': #ff5252, |
||||
|
'a400': #ff1744, |
||||
|
'a700': #d50000 |
||||
|
), |
||||
|
|
||||
|
'pink': ( |
||||
|
'50': #fce4ec, |
||||
|
'100': #f8bbd0, |
||||
|
'200': #f48fb1, |
||||
|
'300': #f06292, |
||||
|
'400': #ec407a, |
||||
|
'500': #e91e63, |
||||
|
'600': #d81b60, |
||||
|
'700': #c2185b, |
||||
|
'800': #ad1457, |
||||
|
'900': #880e4f, |
||||
|
'a100': #ff80ab, |
||||
|
'a200': #ff4081, |
||||
|
'a400': #f50057, |
||||
|
'a700': #c51162 |
||||
|
), |
||||
|
|
||||
|
'purple': ( |
||||
|
'50': #f3e5f5, |
||||
|
'100': #e1bee7, |
||||
|
'200': #ce93d8, |
||||
|
'300': #ba68c8, |
||||
|
'400': #ab47bc, |
||||
|
'500': #9c27b0, |
||||
|
'600': #8e24aa, |
||||
|
'700': #7b1fa2, |
||||
|
'800': #6a1b9a, |
||||
|
'900': #4a148c, |
||||
|
'a100': #ea80fc, |
||||
|
'a200': #e040fb, |
||||
|
'a400': #d500f9, |
||||
|
'a700': #aa00ff |
||||
|
), |
||||
|
|
||||
|
'deep-purple': ( |
||||
|
'50': #ede7f6, |
||||
|
'100': #d1c4e9, |
||||
|
'200': #b39ddb, |
||||
|
'300': #9575cd, |
||||
|
'400': #7e57c2, |
||||
|
'500': #673ab7, |
||||
|
'600': #5e35b1, |
||||
|
'700': #512da8, |
||||
|
'800': #4527a0, |
||||
|
'900': #311b92, |
||||
|
'a100': #b388ff, |
||||
|
'a200': #7c4dff, |
||||
|
'a400': #651fff, |
||||
|
'a700': #6200ea |
||||
|
), |
||||
|
|
||||
|
'indigo': ( |
||||
|
'50': #e8eaf6, |
||||
|
'100': #c5cae9, |
||||
|
'200': #9fa8da, |
||||
|
'300': #7986cb, |
||||
|
'400': #5c6bc0, |
||||
|
'500': #3f51b5, |
||||
|
'600': #3949ab, |
||||
|
'700': #303f9f, |
||||
|
'800': #283593, |
||||
|
'900': #1a237e, |
||||
|
'a100': #8c9eff, |
||||
|
'a200': #536dfe, |
||||
|
'a400': #3d5afe, |
||||
|
'a700': #304ffe |
||||
|
), |
||||
|
|
||||
|
'blue': ( |
||||
|
'50': #e3f2fd, |
||||
|
'100': #bbdefb, |
||||
|
'200': #90caf9, |
||||
|
'300': #64b5f6, |
||||
|
'400': #42a5f5, |
||||
|
'500': #2196f3, |
||||
|
'600': #1e88e5, |
||||
|
'700': #1976d2, |
||||
|
'800': #1565c0, |
||||
|
'900': #0d47a1, |
||||
|
'a100': #82b1ff, |
||||
|
'a200': #448aff, |
||||
|
'a400': #2979ff, |
||||
|
'a700': #2962ff |
||||
|
), |
||||
|
|
||||
|
'light-blue': ( |
||||
|
'50': #e1f5fe, |
||||
|
'100': #b3e5fc, |
||||
|
'200': #81d4fa, |
||||
|
'300': #4fc3f7, |
||||
|
'400': #29b6f6, |
||||
|
'500': #03a9f4, |
||||
|
'600': #039be5, |
||||
|
'700': #0288d1, |
||||
|
'800': #0277bd, |
||||
|
'900': #01579b, |
||||
|
'a100': #80d8ff, |
||||
|
'a200': #40c4ff, |
||||
|
'a400': #00b0ff, |
||||
|
'a700': #0091ea |
||||
|
), |
||||
|
|
||||
|
'cyan': ( |
||||
|
'50': #e0f7fa, |
||||
|
'100': #b2ebf2, |
||||
|
'200': #80deea, |
||||
|
'300': #4dd0e1, |
||||
|
'400': #26c6da, |
||||
|
'500': #00bcd4, |
||||
|
'600': #00acc1, |
||||
|
'700': #0097a7, |
||||
|
'800': #00838f, |
||||
|
'900': #006064, |
||||
|
'a100': #84ffff, |
||||
|
'a200': #18ffff, |
||||
|
'a400': #00e5ff, |
||||
|
'a700': #00b8d4 |
||||
|
), |
||||
|
|
||||
|
'teal': ( |
||||
|
'50': #e0f2f1, |
||||
|
'100': #b2dfdb, |
||||
|
'200': #80cbc4, |
||||
|
'300': #4db6ac, |
||||
|
'400': #26a69a, |
||||
|
'500': #009688, |
||||
|
'600': #00897b, |
||||
|
'700': #00796b, |
||||
|
'800': #00695c, |
||||
|
'900': #004d40, |
||||
|
'a100': #a7ffeb, |
||||
|
'a200': #64ffda, |
||||
|
'a400': #1de9b6, |
||||
|
'a700': #00bfa5 |
||||
|
), |
||||
|
|
||||
|
'green': ( |
||||
|
'50': #e8f5e9, |
||||
|
'100': #c8e6c9, |
||||
|
'200': #a5d6a7, |
||||
|
'300': #81c784, |
||||
|
'400': #66bb6a, |
||||
|
'500': #4caf50, |
||||
|
'600': #43a047, |
||||
|
'700': #388e3c, |
||||
|
'800': #2e7d32, |
||||
|
'900': #1b5e20, |
||||
|
'a100': #b9f6ca, |
||||
|
'a200': #69f0ae, |
||||
|
'a400': #00e676, |
||||
|
'a700': #00c853 |
||||
|
), |
||||
|
|
||||
|
'light-green': ( |
||||
|
'50': #f1f8e9, |
||||
|
'100': #dcedc8, |
||||
|
'200': #c5e1a5, |
||||
|
'300': #aed581, |
||||
|
'400': #9ccc65, |
||||
|
'500': #8bc34a, |
||||
|
'600': #7cb342, |
||||
|
'700': #689f38, |
||||
|
'800': #558b2f, |
||||
|
'900': #33691e, |
||||
|
'a100': #ccff90, |
||||
|
'a200': #b2ff59, |
||||
|
'a400': #76ff03, |
||||
|
'a700': #64dd17 |
||||
|
), |
||||
|
|
||||
|
'lime': ( |
||||
|
'50': #f9fbe7, |
||||
|
'100': #f0f4c3, |
||||
|
'200': #e6ee9c, |
||||
|
'300': #dce775, |
||||
|
'400': #d4e157, |
||||
|
'500': #cddc39, |
||||
|
'600': #c0ca33, |
||||
|
'700': #afb42b, |
||||
|
'800': #9e9d24, |
||||
|
'900': #827717, |
||||
|
'a100': #f4ff81, |
||||
|
'a200': #eeff41, |
||||
|
'a400': #c6ff00, |
||||
|
'a700': #aeea00 |
||||
|
), |
||||
|
|
||||
|
'yellow': ( |
||||
|
'50': #fffde7, |
||||
|
'100': #fff9c4, |
||||
|
'200': #fff59d, |
||||
|
'300': #fff176, |
||||
|
'400': #ffee58, |
||||
|
'500': #ffeb3b, |
||||
|
'600': #fdd835, |
||||
|
'700': #fbc02d, |
||||
|
'800': #f9a825, |
||||
|
'900': #f57f17, |
||||
|
'a100': #ffff8d, |
||||
|
'a200': #ffff00, |
||||
|
'a400': #ffea00, |
||||
|
'a700': #ffd600 |
||||
|
), |
||||
|
|
||||
|
'amber': ( |
||||
|
'50': #fff8e1, |
||||
|
'100': #ffecb3, |
||||
|
'200': #ffe082, |
||||
|
'300': #ffd54f, |
||||
|
'400': #ffca28, |
||||
|
'500': #ffc107, |
||||
|
'600': #ffb300, |
||||
|
'700': #ffa000, |
||||
|
'800': #ff8f00, |
||||
|
'900': #ff6f00, |
||||
|
'a100': #ffe57f, |
||||
|
'a200': #ffd740, |
||||
|
'a400': #ffc400, |
||||
|
'a700': #ffab00 |
||||
|
), |
||||
|
|
||||
|
'orange': ( |
||||
|
'50': #fff3e0, |
||||
|
'100': #ffe0b2, |
||||
|
'200': #ffcc80, |
||||
|
'300': #ffb74d, |
||||
|
'400': #ffa726, |
||||
|
'500': #ff9800, |
||||
|
'600': #fb8c00, |
||||
|
'700': #f57c00, |
||||
|
'800': #ef6c00, |
||||
|
'900': #e65100, |
||||
|
'a100': #ffd180, |
||||
|
'a200': #ffab40, |
||||
|
'a400': #ff9100, |
||||
|
'a700': #ff6d00 |
||||
|
), |
||||
|
|
||||
|
'deep-orange': ( |
||||
|
'50': #fbe9e7, |
||||
|
'100': #ffccbc, |
||||
|
'200': #ffab91, |
||||
|
'300': #ff8a65, |
||||
|
'400': #ff7043, |
||||
|
'500': #ff5722, |
||||
|
'600': #f4511e, |
||||
|
'700': #e64a19, |
||||
|
'800': #d84315, |
||||
|
'900': #bf360c, |
||||
|
'a100': #ff9e80, |
||||
|
'a200': #ff6e40, |
||||
|
'a400': #ff3d00, |
||||
|
'a700': #dd2c00 |
||||
|
), |
||||
|
|
||||
|
'brown': ( |
||||
|
'50': #efebe9, |
||||
|
'100': #d7ccc8, |
||||
|
'200': #bcaaa4, |
||||
|
'300': #a1887f, |
||||
|
'400': #8d6e63, |
||||
|
'500': #795548, |
||||
|
'600': #6d4c41, |
||||
|
'700': #5d4037, |
||||
|
'800': #4e342e, |
||||
|
'900': #3e2723 |
||||
|
), |
||||
|
|
||||
|
'grey': ( |
||||
|
'50': #fafafa, |
||||
|
'100': #f5f5f5, |
||||
|
'200': #eeeeee, |
||||
|
'300': #e0e0e0, |
||||
|
'400': #bdbdbd, |
||||
|
'500': #9e9e9e, |
||||
|
'600': #757575, |
||||
|
'700': #616161, |
||||
|
'800': #424242, |
||||
|
'900': #212121 |
||||
|
), |
||||
|
|
||||
|
'blue-grey': ( |
||||
|
'50': #eceff1, |
||||
|
'100': #cfd8dc, |
||||
|
'200': #b0bec5, |
||||
|
'300': #90a4ae, |
||||
|
'400': #78909c, |
||||
|
'500': #607d8b, |
||||
|
'600': #546e7a, |
||||
|
'700': #455a64, |
||||
|
'800': #37474f, |
||||
|
'900': #263238, |
||||
|
'1000': #11171a |
||||
|
) |
||||
|
); |
||||
|
|
||||
|
@function material-color($color-name, $color-variant: '500') { |
||||
|
$color: map-get(map-get($material-colors, $color-name),$color-variant); |
||||
|
@if $color { |
||||
|
@return $color; |
||||
|
} @else { |
||||
|
// Libsass still doesn't seem to support @error |
||||
|
@warn "=> ERROR: COLOR NOT FOUND! <= | Your $color-name, $color-variant combination did not match any of the values in the $material-colors map."; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@function mc($color-name, $color-variant: '500') { |
||||
|
@return material-color($color-name, $color-variant); |
||||
|
} |
2027
client/scss/base/fonts.scss
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,142 @@ |
|||||
|
/** |
||||
|
* Clearfix |
||||
|
* |
||||
|
* @return {string} Clearfix attribute |
||||
|
*/ |
||||
|
@mixin clearfix { |
||||
|
&:after { |
||||
|
content: ""; |
||||
|
display: table; |
||||
|
clear: both; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Placeholder attribute for inputs |
||||
|
* |
||||
|
* @return {string} Placeholder attributes |
||||
|
*/ |
||||
|
@mixin placeholder { |
||||
|
&::-webkit-input-placeholder {@content}; |
||||
|
&::-moz-placeholder {@content} |
||||
|
&:-ms-input-placeholder {@content} |
||||
|
&:placeholder-shown {@content}; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Spinner element |
||||
|
* |
||||
|
* @param {string} $color - Color |
||||
|
* @param {string} $dur - Animation Duration |
||||
|
* @param {int} $width - Width |
||||
|
* @param {int} $height [$width] - height |
||||
|
* |
||||
|
* @return {string} Spinner element |
||||
|
*/ |
||||
|
@mixin spinner($color,$dur,$width,$height:$width) { |
||||
|
width: $width; |
||||
|
height: $height; |
||||
|
border-radius: 50%; |
||||
|
box-shadow:0 0 0 1px rgba(0,0,0,0.1), 2px 1px 0 $color; |
||||
|
@include prefix(animation, spin $dur linear infinite); |
||||
|
@include keyframes(spin) { |
||||
|
100%{ |
||||
|
@include prefix(transform, rotate(360deg)); |
||||
|
} |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Prefixes for keyframes |
||||
|
* |
||||
|
* @param {string} $animation-name - The animation name |
||||
|
* |
||||
|
* @return {string} Prefixed keyframes attributes |
||||
|
*/ |
||||
|
@mixin keyframes($animation-name) { |
||||
|
@-webkit-keyframes #{$animation-name} { |
||||
|
@content; |
||||
|
} |
||||
|
@-moz-keyframes #{$animation-name} { |
||||
|
@content; |
||||
|
} |
||||
|
@-o-keyframes #{$animation-name} { |
||||
|
@content; |
||||
|
} |
||||
|
@keyframes #{$animation-name} { |
||||
|
@content; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Prefix function for browser compatibility |
||||
|
* |
||||
|
* @param {string} $property - Property name |
||||
|
* @param {any} $value - Property value |
||||
|
* |
||||
|
* @return {string} Prefixed attributes |
||||
|
*/ |
||||
|
@mixin prefix($property, $value) { |
||||
|
-webkit-#{$property}: #{$value}; |
||||
|
-moz-#{$property}: #{$value}; |
||||
|
-ms-#{$property}: #{$value}; |
||||
|
-o-#{$property}: #{$value}; |
||||
|
#{$property}: #{$value}; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Layout Mixins |
||||
|
*/ |
||||
|
@mixin from($device) { |
||||
|
@media screen and (min-width: $device) { |
||||
|
@content; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@mixin until($device) { |
||||
|
@media screen and (max-width: $device - 1px) { |
||||
|
@content; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@mixin mobile { |
||||
|
@media screen and (max-width: $tablet - 1px) { |
||||
|
@content; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@mixin tablet { |
||||
|
@media screen and (min-width: $tablet) { |
||||
|
@content; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@mixin tablet-only { |
||||
|
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px) { |
||||
|
@content; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@mixin touch { |
||||
|
@media screen and (max-width: $desktop - 1px) { |
||||
|
@content; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@mixin desktop { |
||||
|
@media screen and (min-width: $desktop) { |
||||
|
@content; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@mixin desktop-only { |
||||
|
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) { |
||||
|
@content; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@mixin widescreen { |
||||
|
@media screen and (min-width: $widescreen) { |
||||
|
@content; |
||||
|
} |
||||
|
} |
@ -0,0 +1,138 @@ |
|||||
|
/* |
||||
|
HTML5 Reset :: style.css |
||||
|
---------------------------------------------------------- |
||||
|
We have learned much from/been inspired by/taken code where offered from: |
||||
|
Eric Meyer :: http://meyerweb.com |
||||
|
HTML5 Doctor :: http://html5doctor.com |
||||
|
and the HTML5 Boilerplate :: http://html5boilerplate.com |
||||
|
-------------------------------------------------------------------------------*/ |
||||
|
|
||||
|
/* Let's default this puppy out |
||||
|
-------------------------------------------------------------------------------*/ |
||||
|
|
||||
|
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
border: 0; |
||||
|
font-size: 100%; |
||||
|
font-weight: normal; |
||||
|
vertical-align: baseline; |
||||
|
background: transparent; |
||||
|
} |
||||
|
|
||||
|
main, article, aside, figure, footer, header, nav, section, details, summary {display: block;} |
||||
|
|
||||
|
/* Handle box-sizing while better addressing child elements: |
||||
|
http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ |
||||
|
html { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
*, |
||||
|
*:before, |
||||
|
*:after { |
||||
|
box-sizing: inherit; |
||||
|
} |
||||
|
|
||||
|
/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */ |
||||
|
|
||||
|
/* Responsive images and other embedded objects */ |
||||
|
/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */ |
||||
|
img, |
||||
|
object, |
||||
|
embed {max-width: 100%;} |
||||
|
|
||||
|
/* |
||||
|
Note: keeping IMG here will cause problems if you're using foreground images as sprites. |
||||
|
In fact, it *will* cause problems with Google Maps' controls at small size. |
||||
|
If this is the case for you, try uncommenting the following: |
||||
|
#map img { |
||||
|
max-width: none; |
||||
|
} |
||||
|
*/ |
||||
|
|
||||
|
/* force a vertical scrollbar to prevent a jumpy page */ |
||||
|
html {overflow-y: scroll;} |
||||
|
|
||||
|
/* we use a lot of ULs that aren't bulleted. |
||||
|
you'll have to restore the bullets within content, |
||||
|
which is fine because they're probably customized anyway */ |
||||
|
ul {list-style: none;} |
||||
|
|
||||
|
blockquote, q {quotes: none;} |
||||
|
|
||||
|
blockquote:before, |
||||
|
blockquote:after, |
||||
|
q:before, |
||||
|
q:after {content: ''; content: none;} |
||||
|
|
||||
|
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;} |
||||
|
|
||||
|
del {text-decoration: line-through;} |
||||
|
|
||||
|
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;} |
||||
|
|
||||
|
/* tables still need cellspacing="0" in the markup */ |
||||
|
table {border-collapse: separate; border-spacing: 0;} |
||||
|
th {font-weight: bold; vertical-align: bottom;} |
||||
|
td {font-weight: normal; vertical-align: top;} |
||||
|
|
||||
|
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;} |
||||
|
|
||||
|
input, select {vertical-align: middle;} |
||||
|
|
||||
|
pre { |
||||
|
white-space: pre; /* CSS2 */ |
||||
|
white-space: pre-wrap; /* CSS 2.1 */ |
||||
|
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ |
||||
|
word-wrap: break-word; /* IE */ |
||||
|
} |
||||
|
|
||||
|
input[type="radio"] {vertical-align: text-bottom;} |
||||
|
input[type="checkbox"] {vertical-align: bottom;} |
||||
|
.ie7 input[type="checkbox"] {vertical-align: baseline;} |
||||
|
.ie6 input {vertical-align: text-bottom;} |
||||
|
|
||||
|
select, input, textarea {font: 99% sans-serif;} |
||||
|
|
||||
|
table {font-size: inherit; font: 100%;} |
||||
|
|
||||
|
small {font-size: 85%;} |
||||
|
|
||||
|
strong {font-weight: bold;} |
||||
|
|
||||
|
td, td img {vertical-align: top;} |
||||
|
|
||||
|
/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */ |
||||
|
sub, sup {font-size: 75%; line-height: 0; position: relative;} |
||||
|
sup {top: -0.5em;} |
||||
|
sub {bottom: -0.25em;} |
||||
|
|
||||
|
/* standardize any monospaced elements */ |
||||
|
pre, code, kbd, samp {font-family: monospace, sans-serif;} |
||||
|
|
||||
|
/* hand cursor on clickable elements */ |
||||
|
.clickable, |
||||
|
label, |
||||
|
input[type=button], |
||||
|
input[type=submit], |
||||
|
input[type=file], |
||||
|
button {cursor: pointer;} |
||||
|
|
||||
|
/* Webkit browsers add a 2px margin outside the chrome of form elements */ |
||||
|
button, input, select, textarea {margin: 0;} |
||||
|
|
||||
|
/* make buttons play nice in IE */ |
||||
|
button, |
||||
|
input[type=button] {width: auto; overflow: visible;} |
||||
|
|
||||
|
/* scale images in IE7 more attractively */ |
||||
|
.ie7 img {-ms-interpolation-mode: bicubic;} |
||||
|
|
||||
|
/* prevent BG image flicker upon hover |
||||
|
(commented out as usage is rare, and the filter syntax messes with some pre-processors) |
||||
|
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} |
||||
|
*/ |
||||
|
|
||||
|
/* let's clear some floats */ |
||||
|
.clearfix:after { content: " "; display: block; clear: both; } |
@ -0,0 +1,25 @@ |
|||||
|
|
||||
|
// -------------------------------------- |
||||
|
// FONTS |
||||
|
// -------------------------------------- |
||||
|
|
||||
|
$core-font-standard: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; |
||||
|
$core-font-monospace: Consolas, "Liberation Mono", Menlo, Courier, monospace; |
||||
|
|
||||
|
// -------------------------------------- |
||||
|
// LAYOUT |
||||
|
// -------------------------------------- |
||||
|
|
||||
|
$tablet: 769px !default; |
||||
|
$desktop: 980px !default; |
||||
|
$widescreen: 1180px !default; |
||||
|
|
||||
|
// -------------------------------------- |
||||
|
// COLORS |
||||
|
// -------------------------------------- |
||||
|
|
||||
|
$color-text: mc('grey', '800'); |
||||
|
$color-link: mc('blue', '500'); |
||||
|
$color-link-hover: mc('blue', '700'); |
||||
|
$color-link-active: mc('purple', '500'); |
||||
|
$color-bg: #F4F5F9; |
@ -0,0 +1,114 @@ |
|||||
|
/*#alerts { |
||||
|
position: fixed; |
||||
|
top: 60px; |
||||
|
right: 10px; |
||||
|
width: 350px; |
||||
|
z-index: 10; |
||||
|
text-shadow: 1px 1px 0 rgba(0,0,0,0.1); |
||||
|
|
||||
|
.notification { |
||||
|
animation: 0.5s ease slideInRight; |
||||
|
margin-top: 5px; |
||||
|
|
||||
|
&.exit { |
||||
|
animation: 0.5s ease fadeOutRight; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
h3 { |
||||
|
font-size: 16px; |
||||
|
font-size: 500; |
||||
|
} |
||||
|
|
||||
|
}*/ |
||||
|
|
||||
|
#alerts { |
||||
|
position: fixed; |
||||
|
top: 55px; |
||||
|
right: 10px; |
||||
|
width: 350px; |
||||
|
z-index: 100; |
||||
|
|
||||
|
> ul { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
list-style-type: none; |
||||
|
|
||||
|
> li { |
||||
|
background-color: material-color('blue-grey', '800'); |
||||
|
box-shadow: 5px 5px 0 transparentize(material-color('blue-grey', '900'), 0.7); |
||||
|
border: 1px solid material-color('blue-grey', '500'); |
||||
|
border-left-width: 5px; |
||||
|
margin-top: 5px; |
||||
|
padding: 8px 12px; |
||||
|
animation-name: slideFromRight; |
||||
|
animation-duration: 1s; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: material-color('blue-grey', '900'); |
||||
|
} |
||||
|
|
||||
|
&.exit { |
||||
|
animation-name: zoomOut; |
||||
|
animation-duration: 1s; |
||||
|
transform-origin: top center; |
||||
|
} |
||||
|
|
||||
|
> button { |
||||
|
background-color: transparent; |
||||
|
border: none; |
||||
|
color: #FFF; |
||||
|
width: 15px; |
||||
|
height: 15px; |
||||
|
padding: 0; |
||||
|
position: absolute; |
||||
|
top: 10px; |
||||
|
right: 10px; |
||||
|
|
||||
|
&:before { |
||||
|
content: 'X'; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
> strong { |
||||
|
display: block; |
||||
|
font-size: 13px; |
||||
|
font-weight: 500; |
||||
|
color: #FFF; |
||||
|
|
||||
|
> i { |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
> span { |
||||
|
font-size: 12px; |
||||
|
font-weight: 500; |
||||
|
color: material-color('blue-grey', '100'); |
||||
|
} |
||||
|
|
||||
|
&.error { |
||||
|
border-color: material-color('red', '400'); |
||||
|
background-color: material-color('red', '600'); |
||||
|
> span { |
||||
|
color: material-color('red', '50'); |
||||
|
} |
||||
|
} |
||||
|
&.success { |
||||
|
border-color: material-color('green', '400'); |
||||
|
background-color: material-color('green', '700'); |
||||
|
> span { |
||||
|
color: material-color('green', '50'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
@ -0,0 +1,122 @@ |
|||||
|
.button { |
||||
|
background-color: mc('orange','600'); |
||||
|
color: #FFF; |
||||
|
border: 1px solid mc('orange','700'); |
||||
|
border-radius: 3px; |
||||
|
display: inline-flex; |
||||
|
height: 30px; |
||||
|
align-items: center; |
||||
|
padding: 0 15px; |
||||
|
font-size: 13px; |
||||
|
font-weight: 600; |
||||
|
font-family: $core-font-standard; |
||||
|
margin: 0; |
||||
|
transition: all .4s ease; |
||||
|
cursor: pointer; |
||||
|
text-decoration: none; |
||||
|
text-transform: uppercase; |
||||
|
|
||||
|
span { |
||||
|
font-weight: 600; |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
line-height: 14px; |
||||
|
height: 14px; |
||||
|
} |
||||
|
|
||||
|
i { |
||||
|
margin-right: 8px; |
||||
|
font-size: 14px; |
||||
|
line-height: 14px; |
||||
|
height: 14px; |
||||
|
} |
||||
|
|
||||
|
&:focus { |
||||
|
outline: none; |
||||
|
border-color: #FFF; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: mc('orange','800'); |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
@each $color, $colorvalue in $material-colors { |
||||
|
&.is-#{$color} { |
||||
|
background-color: mc($color, '600'); |
||||
|
border-color: mc($color,'700'); |
||||
|
color: #FFF; |
||||
|
|
||||
|
&.is-outlined { |
||||
|
background-color: #FFF; |
||||
|
color: mc($color,'700'); |
||||
|
} |
||||
|
|
||||
|
&.is-inverted { |
||||
|
background-color: rgba(mc($color, '800'), 0); |
||||
|
border-color: mc($color, '500'); |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: mc($color,'800'); |
||||
|
color: #FFF; |
||||
|
animation: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
&.is-icon-only { |
||||
|
i { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.is-featured { |
||||
|
animation: btnInvertedPulse .6s ease alternate infinite; |
||||
|
} |
||||
|
|
||||
|
&.is-disabled, &:disabled { |
||||
|
background-color: mc('grey', '300'); |
||||
|
border: 1px solid mc('grey','400'); |
||||
|
color: mc('grey', '500'); |
||||
|
cursor: default; |
||||
|
transition: none; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: mc('grey', '300') !important; |
||||
|
color: mc('grey', '500') !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.button-group { |
||||
|
|
||||
|
.button { |
||||
|
border-radius: 0; |
||||
|
margin-left: 1px; |
||||
|
|
||||
|
&:first-child { |
||||
|
margin-left: 0; |
||||
|
border-top-left-radius: 4px; |
||||
|
border-bottom-left-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
&:last-child { |
||||
|
border-top-right-radius: 4px; |
||||
|
border-bottom-right-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
@include keyframes(btnInvertedPulse) { |
||||
|
0% { |
||||
|
background-color: rgba(mc('grey', '500'), 0); |
||||
|
} |
||||
|
100% { |
||||
|
background-color: rgba(mc('grey', '500'), 0.25); |
||||
|
} |
||||
|
} |
@ -0,0 +1,26 @@ |
|||||
|
.footer { |
||||
|
background-color: mc('blue-grey','50'); |
||||
|
border-bottom: 5px solid mc('blue-grey','100'); |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 25px; |
||||
|
font-size: 13px; |
||||
|
font-weight: 500; |
||||
|
color: mc('blue-grey','500'); |
||||
|
|
||||
|
ul { |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
list-style-type: none; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
|
||||
|
li { |
||||
|
padding: 0 15px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
@ -0,0 +1,213 @@ |
|||||
|
|
||||
|
.control { |
||||
|
|
||||
|
& + .control { |
||||
|
margin-top: 15px; |
||||
|
} |
||||
|
|
||||
|
// =============================================================== |
||||
|
// TEXTBOX |
||||
|
// =============================================================== |
||||
|
|
||||
|
input[type=text], input[type=password] { |
||||
|
background-color: #FFF; |
||||
|
display: flex; |
||||
|
height: 30px; |
||||
|
align-items: center; |
||||
|
padding: 0 12px; |
||||
|
border: 1px solid mc('grey', '400'); |
||||
|
border-radius: 3px; |
||||
|
font-family: $core-font-standard; |
||||
|
font-size: 14px; |
||||
|
color: mc('grey', '700'); |
||||
|
transition: all .4s ease; |
||||
|
box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.1); |
||||
|
|
||||
|
&:focus { |
||||
|
outline: none; |
||||
|
border-color: mc('light-blue', '500'); |
||||
|
box-shadow: inset 0 0 5px 0 rgba(mc('light-blue', '500'), 0.3); |
||||
|
} |
||||
|
|
||||
|
&:disabled { |
||||
|
background-color: mc('grey', '100'); |
||||
|
} |
||||
|
|
||||
|
&.is-dirty.is-invalid { |
||||
|
border-color: mc('red', '500'); |
||||
|
box-shadow: inset 0 0 5px 0 mc('red', '100'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
&.is-fullwidth { |
||||
|
|
||||
|
input[type=text], input[type=password], select, textarea { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
// =============================================================== |
||||
|
// DROPDOWN |
||||
|
// =============================================================== |
||||
|
|
||||
|
select { |
||||
|
background-color: #FFF; |
||||
|
display: flex; |
||||
|
height: 30px; |
||||
|
align-items: center; |
||||
|
padding: 0 12px; |
||||
|
border: 1px solid mc('grey', '400'); |
||||
|
border-radius: 3px; |
||||
|
font-family: $core-font-standard; |
||||
|
font-size: 14px; |
||||
|
color: mc('grey', '700'); |
||||
|
transition: all .4s ease; |
||||
|
box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.1); |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&:focus { |
||||
|
outline: none; |
||||
|
border-color: mc('light-blue', '500'); |
||||
|
box-shadow: inset 0 0 5px 0 rgba(mc('light-blue', '500'), 0.3); |
||||
|
} |
||||
|
|
||||
|
&:disabled { |
||||
|
background-color: mc('grey', '100'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
// =============================================================== |
||||
|
// CHECKBOX / RADIO BUTTONS |
||||
|
// =============================================================== |
||||
|
|
||||
|
input[type=radio], input[type=checkbox] { |
||||
|
position: absolute; |
||||
|
left: -9999px; |
||||
|
opacity: 0; |
||||
|
|
||||
|
& + label { |
||||
|
position: relative; |
||||
|
padding: 0 15px 0 25px; |
||||
|
cursor: pointer; |
||||
|
display: inline-block; |
||||
|
height: 25px; |
||||
|
line-height: 25px; |
||||
|
font-size: 14px; |
||||
|
transition: .28s ease; |
||||
|
@include prefix('user-select', none); |
||||
|
|
||||
|
&:before, &:after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
margin: 4px; |
||||
|
border: 2px solid mc($primary, '600'); |
||||
|
margin: 4px; |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
border-radius: 50%; |
||||
|
z-index: 0; |
||||
|
transition: .28s ease; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
&:checked + label { |
||||
|
|
||||
|
&:before, &:after { |
||||
|
border-color: mc($primary, '600'); |
||||
|
} |
||||
|
|
||||
|
&:after { |
||||
|
@include prefix('transform', scale(0.5)); |
||||
|
background-color: mc($primary, '600'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
input[type=checkbox] + label { |
||||
|
&:before, &:after { |
||||
|
border-radius: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.help { |
||||
|
font-size: 12px; |
||||
|
|
||||
|
&.is-red { |
||||
|
color: mc('red','600'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
& + label { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
> i:first-child { |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.label { |
||||
|
margin-bottom: 5px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.form-sections { |
||||
|
|
||||
|
section { |
||||
|
border-top: 1px solid mc('grey', '200'); |
||||
|
padding: 20px; |
||||
|
@include prefix(animation-duration, .6s); |
||||
|
|
||||
|
&:first-child { |
||||
|
border-top: none; |
||||
|
} |
||||
|
|
||||
|
.button + .button { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
.desc { |
||||
|
display: inline-block; |
||||
|
padding: 10px 0 0 0px; |
||||
|
font-size: 12px; |
||||
|
color: mc('grey', '500'); |
||||
|
} |
||||
|
|
||||
|
.section-block { |
||||
|
padding-left: 20px; |
||||
|
font-size: 14px; |
||||
|
color: mc('blue-grey', '800'); |
||||
|
|
||||
|
h6 { |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
color: mc('blue-grey', '600'); |
||||
|
margin-top: 15px; |
||||
|
border-bottom: 1px dotted mc('blue-grey', '200'); |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
padding: 5px 0; |
||||
|
|
||||
|
&.is-small { |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
@ -0,0 +1,501 @@ |
|||||
|
.column { |
||||
|
flex-basis: 0; |
||||
|
flex-grow: 1; |
||||
|
flex-shrink: 1; |
||||
|
padding: 10px; |
||||
|
|
||||
|
.columns.is-mobile > &.is-narrow { |
||||
|
flex: none; |
||||
|
} |
||||
|
|
||||
|
.columns.is-mobile > &.is-full { |
||||
|
flex: none; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.columns.is-mobile > &.is-three-quarters { |
||||
|
flex: none; |
||||
|
width: 75%; |
||||
|
} |
||||
|
|
||||
|
.columns.is-mobile > &.is-two-thirds { |
||||
|
flex: none; |
||||
|
width: 66.6666%; |
||||
|
} |
||||
|
|
||||
|
.columns.is-mobile > &.is-half { |
||||
|
flex: none; |
||||
|
width: 50%; |
||||
|
} |
||||
|
|
||||
|
.columns.is-mobile > &.is-one-third { |
||||
|
flex: none; |
||||
|
width: 33.3333%; |
||||
|
} |
||||
|
|
||||
|
.columns.is-mobile > &.is-one-quarter { |
||||
|
flex: none; |
||||
|
width: 25%; |
||||
|
} |
||||
|
|
||||
|
.columns.is-mobile > &.is-offset-three-quarters { |
||||
|
margin-left: 75%; |
||||
|
} |
||||
|
|
||||
|
.columns.is-mobile > &.is-offset-two-thirds { |
||||
|
margin-left: 66.6666%; |
||||
|
} |
||||
|
|
||||
|
.columns.is-mobile > &.is-offset-half { |
||||
|
margin-left: 50%; |
||||
|
} |
||||
|
|
||||
|
.columns.is-mobile > &.is-offset-one-third { |
||||
|
margin-left: 33.3333%; |
||||
|
} |
||||
|
|
||||
|
.columns.is-mobile > &.is-offset-one-quarter { |
||||
|
margin-left: 25%; |
||||
|
} |
||||
|
|
||||
|
@for $i from 1 through 12 { |
||||
|
.columns.is-mobile > &.is-#{$i} { |
||||
|
flex: none; |
||||
|
width: $i / 12 * 100%; |
||||
|
} |
||||
|
|
||||
|
.columns.is-mobile > &.is-offset-#{$i} { |
||||
|
margin-left: $i / 12 * 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@include mobile { |
||||
|
&.is-narrow-mobile { |
||||
|
flex: none; |
||||
|
} |
||||
|
|
||||
|
&.is-full-mobile { |
||||
|
flex: none; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
&.is-three-quarters-mobile { |
||||
|
flex: none; |
||||
|
width: 75%; |
||||
|
} |
||||
|
|
||||
|
&.is-two-thirds-mobile { |
||||
|
flex: none; |
||||
|
width: 66.6666%; |
||||
|
} |
||||
|
|
||||
|
&.is-half-mobile { |
||||
|
flex: none; |
||||
|
width: 50%; |
||||
|
} |
||||
|
|
||||
|
&.is-one-third-mobile { |
||||
|
flex: none; |
||||
|
width: 33.3333%; |
||||
|
} |
||||
|
|
||||
|
&.is-one-quarter-mobile { |
||||
|
flex: none; |
||||
|
width: 25%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-three-quarters-mobile { |
||||
|
margin-left: 75%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-two-thirds-mobile { |
||||
|
margin-left: 66.6666%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-half-mobile { |
||||
|
margin-left: 50%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-one-third-mobile { |
||||
|
margin-left: 33.3333%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-one-quarter-mobile { |
||||
|
margin-left: 25%; |
||||
|
} |
||||
|
|
||||
|
@for $i from 1 through 12 { |
||||
|
&.is-#{$i}-mobile { |
||||
|
flex: none; |
||||
|
width: $i / 12 * 100%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-#{$i}-mobile { |
||||
|
margin-left: $i / 12 * 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
@include tablet { |
||||
|
&.is-narrow, |
||||
|
&.is-narrow-tablet { |
||||
|
flex: none; |
||||
|
} |
||||
|
|
||||
|
&.is-full, |
||||
|
&.is-full-tablet { |
||||
|
flex: none; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
&.is-three-quarters, |
||||
|
&.is-three-quarters-tablet { |
||||
|
flex: none; |
||||
|
width: 75%; |
||||
|
} |
||||
|
|
||||
|
&.is-two-thirds, |
||||
|
&.is-two-thirds-tablet { |
||||
|
flex: none; |
||||
|
width: 66.6666%; |
||||
|
} |
||||
|
|
||||
|
&.is-half, |
||||
|
&.is-half-tablet { |
||||
|
flex: none; |
||||
|
width: 50%; |
||||
|
} |
||||
|
|
||||
|
&.is-one-third, |
||||
|
&.is-one-third-tablet { |
||||
|
flex: none; |
||||
|
width: 33.3333%; |
||||
|
} |
||||
|
|
||||
|
&.is-one-quarter, |
||||
|
&.is-one-quarter-tablet { |
||||
|
flex: none; |
||||
|
width: 25%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-three-quarters, |
||||
|
&.is-offset-three-quarters-tablet { |
||||
|
margin-left: 75%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-two-thirds, |
||||
|
&.is-offset-two-thirds-tablet { |
||||
|
margin-left: 66.6666%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-half, |
||||
|
&.is-offset-half-tablet { |
||||
|
margin-left: 50%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-one-third, |
||||
|
&.is-offset-one-third-tablet { |
||||
|
margin-left: 33.3333%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-one-quarter, |
||||
|
&.is-offset-one-quarter-tablet { |
||||
|
margin-left: 25%; |
||||
|
} |
||||
|
|
||||
|
@for $i from 1 through 12 { |
||||
|
&.is-#{$i}, |
||||
|
&.is-#{$i}-tablet { |
||||
|
flex: none; |
||||
|
width: $i / 12 * 100%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-#{$i}, |
||||
|
&.is-offset-#{$i}-tablet { |
||||
|
margin-left: $i / 12 * 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
@include desktop { |
||||
|
&.is-narrow-desktop { |
||||
|
flex: none; |
||||
|
} |
||||
|
|
||||
|
&.is-full-desktop { |
||||
|
flex: none; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
&.is-three-quarters-desktop { |
||||
|
flex: none; |
||||
|
width: 75%; |
||||
|
} |
||||
|
|
||||
|
&.is-two-thirds-desktop { |
||||
|
flex: none; |
||||
|
width: 66.6666%; |
||||
|
} |
||||
|
|
||||
|
&.is-half-desktop { |
||||
|
flex: none; |
||||
|
width: 50%; |
||||
|
} |
||||
|
|
||||
|
&.is-one-third-desktop { |
||||
|
flex: none; |
||||
|
width: 33.3333%; |
||||
|
} |
||||
|
|
||||
|
&.is-one-quarter-desktop { |
||||
|
flex: none; |
||||
|
width: 25%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-three-quarters-desktop { |
||||
|
margin-left: 75%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-two-thirds-desktop { |
||||
|
margin-left: 66.6666%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-half-desktop { |
||||
|
margin-left: 50%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-one-third-desktop { |
||||
|
margin-left: 33.3333%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-one-quarter-desktop { |
||||
|
margin-left: 25%; |
||||
|
} |
||||
|
|
||||
|
@for $i from 1 through 12 { |
||||
|
&.is-#{$i}-desktop { |
||||
|
flex: none; |
||||
|
width: $i / 12 * 100%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-#{$i}-desktop { |
||||
|
margin-left: $i / 12 * 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
@include widescreen { |
||||
|
&.is-narrow-widescreen { |
||||
|
flex: none; |
||||
|
} |
||||
|
|
||||
|
&.is-full-widescreen { |
||||
|
flex: none; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
&.is-three-quarters-widescreen { |
||||
|
flex: none; |
||||
|
width: 75%; |
||||
|
} |
||||
|
|
||||
|
&.is-two-thirds-widescreen { |
||||
|
flex: none; |
||||
|
width: 66.6666%; |
||||
|
} |
||||
|
|
||||
|
&.is-half-widescreen { |
||||
|
flex: none; |
||||
|
width: 50%; |
||||
|
} |
||||
|
|
||||
|
&.is-one-third-widescreen { |
||||
|
flex: none; |
||||
|
width: 33.3333%; |
||||
|
} |
||||
|
|
||||
|
&.is-one-quarter-widescreen { |
||||
|
flex: none; |
||||
|
width: 25%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-three-quarters-widescreen { |
||||
|
margin-left: 75%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-two-thirds-widescreen { |
||||
|
margin-left: 66.6666%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-half-widescreen { |
||||
|
margin-left: 50%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-one-third-widescreen { |
||||
|
margin-left: 33.3333%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-one-quarter-widescreen { |
||||
|
margin-left: 25%; |
||||
|
} |
||||
|
|
||||
|
@for $i from 1 through 12 { |
||||
|
&.is-#{$i}-widescreen { |
||||
|
flex: none; |
||||
|
width: $i / 12 * 100%; |
||||
|
} |
||||
|
|
||||
|
&.is-offset-#{$i}-widescreen { |
||||
|
margin-left: $i / 12 * 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.columns { |
||||
|
margin-left: -10px; |
||||
|
margin-right: -10px; |
||||
|
margin-top: -10px; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: -10px; |
||||
|
} |
||||
|
|
||||
|
&:not(:last-child) { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
// Modifiers |
||||
|
&.is-centered { |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
&.is-gapless { |
||||
|
margin-left: 0; |
||||
|
margin-right: 0; |
||||
|
margin-top: 0; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
&:not(:last-child) { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
& > .column { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.is-stretched { |
||||
|
flex-grow: 1; |
||||
|
align-items: stretch; |
||||
|
align-self: stretch; |
||||
|
} |
||||
|
|
||||
|
&.is-grid { |
||||
|
// Responsiveness |
||||
|
@include tablet { |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
& > .column { |
||||
|
max-width: 33.3333%; |
||||
|
padding: 10px; |
||||
|
width: 33.3333%; |
||||
|
|
||||
|
& + .column { |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.is-mobile { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
&.is-multiline { |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
|
||||
|
&.is-vcentered { |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
// Responsiveness |
||||
|
@include tablet { |
||||
|
&:not(.is-desktop) { |
||||
|
display: flex; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
@include desktop { |
||||
|
// Modifiers |
||||
|
&.is-desktop { |
||||
|
display: flex; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tile { |
||||
|
align-items: stretch; |
||||
|
flex-basis: auto; |
||||
|
flex-grow: 1; |
||||
|
flex-shrink: 1; |
||||
|
min-height: min-content; |
||||
|
|
||||
|
// Modifiers |
||||
|
&.is-ancestor { |
||||
|
margin-left: -10px; |
||||
|
margin-right: -10px; |
||||
|
margin-top: -10px; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: -10px; |
||||
|
} |
||||
|
|
||||
|
&:not(:last-child) { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.is-child { |
||||
|
margin: 0 !important; |
||||
|
} |
||||
|
|
||||
|
&.is-parent { |
||||
|
padding: 10px; |
||||
|
} |
||||
|
|
||||
|
&.is-vertical { |
||||
|
flex-direction: column; |
||||
|
|
||||
|
& > .tile.is-child:not(:last-child) { |
||||
|
margin-bottom: 20px !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Responsiveness |
||||
|
@include tablet { |
||||
|
&:not(.is-child) { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
@for $i from 1 through 12 { |
||||
|
&.is-#{$i} { |
||||
|
flex: none; |
||||
|
width: $i / 12 * 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.column.is-white { |
||||
|
background-color: #FFF; |
||||
|
} |
@ -0,0 +1,68 @@ |
|||||
|
.hero { |
||||
|
padding: 20px; |
||||
|
background-color: mc('grey', '50'); |
||||
|
border-bottom: 1px solid mc('grey', '200'); |
||||
|
position: relative; |
||||
|
|
||||
|
h1 { |
||||
|
font-size: 28px; |
||||
|
color: mc($primary, '500'); |
||||
|
font-weight: 300; |
||||
|
} |
||||
|
|
||||
|
h2 { |
||||
|
font-size: 18px; |
||||
|
color: mc('grey', '500'); |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
|
||||
|
.hero-menu { |
||||
|
position: absolute; |
||||
|
right: 20px; |
||||
|
bottom: -1px; |
||||
|
z-index: 1; |
||||
|
display: flex; |
||||
|
|
||||
|
li { |
||||
|
display: flex; |
||||
|
margin-left: 1px; |
||||
|
|
||||
|
a, button { |
||||
|
background-color: mc('light-blue', '500'); |
||||
|
color: #FFF; |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-items: center; |
||||
|
padding: 0 15px; |
||||
|
height: 32px; |
||||
|
border: 1px solid mc('light-blue', '600'); |
||||
|
font-family: $core-font-standard; |
||||
|
font-size: 13px; |
||||
|
transition: all 0.4s ease; |
||||
|
cursor: pointer; |
||||
|
text-decoration: none; |
||||
|
text-transform: uppercase; |
||||
|
|
||||
|
i { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
@each $color, $colorvalue in $material-colors { |
||||
|
&.is-#{$color} { |
||||
|
background-color: mc($color, '600'); |
||||
|
border-color: mc($color, '600'); |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: mc($color, '800'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
@ -0,0 +1,62 @@ |
|||||
|
.list { |
||||
|
background-color: #FFF; |
||||
|
min-height: 25px; |
||||
|
|
||||
|
.list-header { |
||||
|
background-color: mc('grey','100'); |
||||
|
height: 30px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 0 20px; |
||||
|
text-transform: uppercase; |
||||
|
font-size: 13px; |
||||
|
color: mc($primary,'500'); |
||||
|
text-shadow: 1px 1px 0 #FFF; |
||||
|
|
||||
|
span { |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
i { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.list-row { |
||||
|
border-top: 1px solid mc('grey','100'); |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 10px 20px; |
||||
|
|
||||
|
&:first-child { |
||||
|
border-top: none; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.list-item { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.list-icon { |
||||
|
margin-right: 15px; |
||||
|
color: mc('grey','500'); |
||||
|
} |
||||
|
.list-content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
strong { |
||||
|
color: mc('grey','700'); |
||||
|
} |
||||
|
span { |
||||
|
color: mc('grey','600'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
@ -0,0 +1,355 @@ |
|||||
|
.mkcontent { |
||||
|
font-size: 14px; |
||||
|
color: mc('grey', '700'); |
||||
|
padding: 0 0 20px 0; |
||||
|
|
||||
|
h1, h2, h3 { |
||||
|
font-weight: 400; |
||||
|
margin: 10px 0 0; |
||||
|
padding: 7px 20px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
h1 { |
||||
|
background-color: mc('indigo', '50'); |
||||
|
border-bottom: 2px solid mc('indigo', '100'); |
||||
|
font-size: 18px; |
||||
|
color: mc('indigo', '500'); |
||||
|
|
||||
|
&:first-child { |
||||
|
margin-top: 1px; |
||||
|
} |
||||
|
|
||||
|
/*& + h2 { |
||||
|
margin-top: 1px; |
||||
|
border-top: none; |
||||
|
}*/ |
||||
|
|
||||
|
& + p { |
||||
|
padding-top: 20px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
h2 { |
||||
|
background-color: lighten(mc('teal', '50'), 5%); |
||||
|
border: 1px solid mc('teal', '100'); |
||||
|
border-right-width: 5px; |
||||
|
border-top-left-radius: 3px; |
||||
|
border-bottom-left-radius: 3px; |
||||
|
font-size: 16px; |
||||
|
color: mc('teal', '900'); |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
|
||||
|
.indent-h2 { |
||||
|
border-right: 5px solid mc('teal', '100'); |
||||
|
margin-left: 20px; |
||||
|
padding-top: 1px; |
||||
|
padding-bottom: 20px; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
& + h1, & + h2 { |
||||
|
margin-top: 1px; |
||||
|
} |
||||
|
|
||||
|
&:last-child { |
||||
|
padding-bottom: 5px; |
||||
|
} |
||||
|
|
||||
|
h3:first-child { |
||||
|
margin-top: 0; |
||||
|
border-top: none; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
h3 { |
||||
|
background-color: lighten(mc('blue', '50'), 3%); |
||||
|
border: 1px solid mc('blue', '100'); |
||||
|
border-right-width: 5px; |
||||
|
border-top-left-radius: 3px; |
||||
|
border-bottom-left-radius: 3px; |
||||
|
font-size: 14px; |
||||
|
color: mc('blue', '700'); |
||||
|
margin-left: 20px; |
||||
|
margin-right: 1px; |
||||
|
padding: 5px 20px; |
||||
|
} |
||||
|
|
||||
|
.indent-h3 { |
||||
|
border-right: 5px solid mc('teal', '100'); |
||||
|
margin-left: 20px; |
||||
|
margin-right: 1px; |
||||
|
padding-bottom: 10px; |
||||
|
|
||||
|
& + h1, & + h2, & + h3 { |
||||
|
margin-top: 1px; |
||||
|
} |
||||
|
|
||||
|
&:last-child { |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
text-decoration: underline; |
||||
|
font-weight: 400; |
||||
|
|
||||
|
&:hover { |
||||
|
color: mc('blue', '700'); |
||||
|
} |
||||
|
|
||||
|
&.toc-anchor { |
||||
|
font-size: 80%; |
||||
|
color: mc('indigo', '300'); |
||||
|
border-bottom: none; |
||||
|
text-decoration: none; |
||||
|
|
||||
|
&:visited { |
||||
|
color: mc('indigo', '300') !important; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
&.external-link { |
||||
|
position: relative; |
||||
|
padding-left: 5px; |
||||
|
//display: inline-flex; |
||||
|
//align-items: center; |
||||
|
|
||||
|
&:before { |
||||
|
content: $icon-open; |
||||
|
display: inline-block; |
||||
|
font-family: 'core-icons'; |
||||
|
font-style: normal; |
||||
|
font-weight: normal; |
||||
|
text-decoration: none; |
||||
|
color: mc('grey', '500'); |
||||
|
font-size: 14px; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
|
||||
|
&:hover:before { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
ul { |
||||
|
padding: 10px 0 10px 40px; |
||||
|
list-style-type: square; |
||||
|
|
||||
|
li { |
||||
|
padding: 1px 0; |
||||
|
|
||||
|
> ul { |
||||
|
padding: 5px 0 5px 15px; |
||||
|
list-style-type: disc; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
padding: 0; |
||||
|
|
||||
|
&:first-child { |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
ol { |
||||
|
padding: 10px 40px; |
||||
|
list-style-type: decimal; |
||||
|
|
||||
|
li { |
||||
|
padding: 1px 0; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
padding: 10px 20px; |
||||
|
|
||||
|
&:first-child { |
||||
|
padding-top: 20px; |
||||
|
} |
||||
|
|
||||
|
&.is-gapless { |
||||
|
padding: 0 20px; |
||||
|
|
||||
|
& + p { |
||||
|
padding-top: 20px; |
||||
|
} |
||||
|
|
||||
|
& + h1 { |
||||
|
margin-top: 1px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
table { |
||||
|
width: auto; |
||||
|
border-collapse: collapse; |
||||
|
margin: 10px 20px; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
th { |
||||
|
background-color: mc('blue', '500'); |
||||
|
color: #FFF; |
||||
|
border: 1px solid mc('blue', '500'); |
||||
|
padding: 5px 15px; |
||||
|
|
||||
|
&:first-child { |
||||
|
border-left-color: mc('blue', '500'); |
||||
|
} |
||||
|
|
||||
|
&:last-child { |
||||
|
border-right-color: mc('blue', '500'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
td { |
||||
|
border: 1px solid mc('grey', '500'); |
||||
|
padding: 5px 15px; |
||||
|
} |
||||
|
|
||||
|
tr:nth-child(even) { |
||||
|
background-color: mc('grey', '100'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
code { |
||||
|
font-weight: 500; |
||||
|
color: mc('purple', '500'); |
||||
|
background-color: lighten(mc('purple', '50'), 5%); |
||||
|
padding: 0 5px; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
pre { |
||||
|
background-color: mc('grey', '50'); |
||||
|
border-top: 1px solid mc('grey', '100'); |
||||
|
box-shadow: inset 0 0 5px 0 rgba(mc('grey', '500'), 0.3); |
||||
|
padding: 20px; |
||||
|
font-family: $core-font-monospace; |
||||
|
white-space: pre; |
||||
|
|
||||
|
> code { |
||||
|
box-shadow: inset 0 0 5px 0 mc('grey', '100'); |
||||
|
border-radius: 5px; |
||||
|
font-weight: 400; |
||||
|
background-color: none; |
||||
|
color: mc('grey', '700'); |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
& + p { |
||||
|
padding-top: 1em; |
||||
|
} |
||||
|
|
||||
|
& + h1, & + h2, & + h3 { |
||||
|
margin-top: 1px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.align-right { |
||||
|
float:right; |
||||
|
margin: 0 0 10px 10px; |
||||
|
max-width: 30vw; |
||||
|
} |
||||
|
.align-center { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
img.pagelogo { |
||||
|
position: absolute; |
||||
|
right: 20px; |
||||
|
top: 20px; |
||||
|
max-width: 200px; |
||||
|
max-height: 100px; |
||||
|
z-index: 3; |
||||
|
} |
||||
|
|
||||
|
strong { |
||||
|
color: mc('grey', '700'); |
||||
|
} |
||||
|
|
||||
|
.twa { |
||||
|
font-size: 120%; |
||||
|
} |
||||
|
|
||||
|
hr { |
||||
|
margin: 20px; |
||||
|
border-top: 1px dotted mc('grey', '500'); |
||||
|
} |
||||
|
|
||||
|
blockquote { |
||||
|
background-color: mc('teal', '50'); |
||||
|
border: 1px solid mc('teal', '100'); |
||||
|
border-bottom-width: 2px; |
||||
|
box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,1); |
||||
|
border-radius: 5px; |
||||
|
padding: 0 10px; |
||||
|
margin: 10px 20px; |
||||
|
|
||||
|
p { |
||||
|
padding: 10px 0; |
||||
|
color: mc('teal', '800'); |
||||
|
|
||||
|
&:first-child { |
||||
|
padding: 10px 0; |
||||
|
} |
||||
|
|
||||
|
strong { |
||||
|
color: inherit; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
&.is-danger { |
||||
|
background-color: mc('red', '100'); |
||||
|
border-color: mc('red', '200'); |
||||
|
p { |
||||
|
color: mc('red', '900'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.is-warning { |
||||
|
background-color: mc('amber', '50'); |
||||
|
border-color: mc('amber', '200'); |
||||
|
p { |
||||
|
color: darken(mc('amber', '900'), 10%); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.is-success { |
||||
|
background-color: mc('green', '50'); |
||||
|
border-color: mc('green', '200'); |
||||
|
p { |
||||
|
color: darken(mc('green', '900'), 10%); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.is-info { |
||||
|
background-color: mc('blue', '50'); |
||||
|
border-color: mc('blue', '200'); |
||||
|
p { |
||||
|
color: darken(mc('blue', '900'), 10%); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
@ -0,0 +1,356 @@ |
|||||
|
.modal { |
||||
|
align-items: flex-start; |
||||
|
display: none; |
||||
|
|
||||
|
&.is-active { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
&.is-superimposed { |
||||
|
.modal-background { |
||||
|
z-index: 20; |
||||
|
} |
||||
|
.modal-container { |
||||
|
z-index: 21; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.modal-background { |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
position: fixed; |
||||
|
background-color: rgba(0,0,0,0.85); |
||||
|
animation: .4s ease fadeIn; |
||||
|
z-index: 10; |
||||
|
} |
||||
|
.modal-container { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
z-index: 11; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.modal-content { |
||||
|
animation: .3s ease zoomIn; |
||||
|
width: 600px; |
||||
|
background-color: #FFF; |
||||
|
|
||||
|
&.is-expanded { |
||||
|
align-self: stretch; |
||||
|
width: 100%; |
||||
|
margin: 20px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
> section { |
||||
|
flex-grow: 1; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
header { |
||||
|
background-color: mc('teal', '600'); |
||||
|
color: #FFF; |
||||
|
display: flex; |
||||
|
flex-shrink: 0; |
||||
|
height: 40px; |
||||
|
align-items: center; |
||||
|
font-weight: 400; |
||||
|
font-size: 16px; |
||||
|
padding: 0 20px; |
||||
|
position: relative; |
||||
|
|
||||
|
@each $color, $colorvalue in $material-colors { |
||||
|
&.is-#{$color} { |
||||
|
background-color: mc($color, '600'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.modal-notify { |
||||
|
position: absolute; |
||||
|
display: none; |
||||
|
align-items: center; |
||||
|
height: 40px; |
||||
|
right: 20px; |
||||
|
top: 0; |
||||
|
|
||||
|
&.is-active { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
font-size: 12px; |
||||
|
letter-spacing: 1px; |
||||
|
text-transform: uppercase; |
||||
|
} |
||||
|
|
||||
|
i { |
||||
|
margin-left: 15px; |
||||
|
display: inline-block; |
||||
|
@include spinner(#FFF, .5s, 20px); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
section { |
||||
|
padding: 20px; |
||||
|
border-top: 1px dotted mc('grey', '300'); |
||||
|
|
||||
|
&:first-of-type { |
||||
|
border-top: none; |
||||
|
padding-top: 20px; |
||||
|
} |
||||
|
&:last-of-type { |
||||
|
padding-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
&.is-gapless { |
||||
|
padding: 10px; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
&.modal-loading { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
|
||||
|
> i { |
||||
|
display: block; |
||||
|
@include spinner(mc('blue','500'), .4s, 32px); |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
> span { |
||||
|
color: mc('grey', '600'); |
||||
|
} |
||||
|
|
||||
|
> em { |
||||
|
font-size: 12px; |
||||
|
color: mc('grey', '500'); |
||||
|
font-style: normal; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
&.modal-instructions { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
color: mc('grey', '800'); |
||||
|
|
||||
|
img { |
||||
|
height: 100px; |
||||
|
|
||||
|
& + * { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
i.is-huge { |
||||
|
font-size: 72px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
> span { |
||||
|
color: mc('grey', '800'); |
||||
|
} |
||||
|
|
||||
|
> em { |
||||
|
font-size: 12px; |
||||
|
color: mc('grey', '600'); |
||||
|
font-style: normal; |
||||
|
margin-top: 10px; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.bullets { |
||||
|
list-style-type: square; |
||||
|
padding: 5px 0 0 30px; |
||||
|
font-size: 14px; |
||||
|
color: mc('grey', '800'); |
||||
|
} |
||||
|
|
||||
|
.note { |
||||
|
display: block; |
||||
|
margin-top: 10px; |
||||
|
font-size: 14px; |
||||
|
color: mc('grey', '800'); |
||||
|
|
||||
|
&:first-child { |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
|
||||
|
ul { |
||||
|
color: mc('grey', '800'); |
||||
|
padding-left: 10px; |
||||
|
|
||||
|
li { |
||||
|
margin-top: 5px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
> i { |
||||
|
margin-right: 8px; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
footer { |
||||
|
padding: 20px; |
||||
|
text-align: right; |
||||
|
|
||||
|
.button { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.modal-toolbar { |
||||
|
background-color: mc('teal', '700'); |
||||
|
padding: 7px 20px; |
||||
|
display: flex; |
||||
|
flex-shrink: 0; |
||||
|
justify-content: center; |
||||
|
|
||||
|
@each $color, $colorvalue in $material-colors { |
||||
|
&.is-#{$color} { |
||||
|
background-color: mc($color, '700'); |
||||
|
|
||||
|
.button { |
||||
|
border-color: mc($color, '900'); |
||||
|
background-color: mc($color, '900'); |
||||
|
|
||||
|
&:hover { |
||||
|
border-color: mc($color, '900'); |
||||
|
background-color: mc($color, '800'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// BUTTONS |
||||
|
|
||||
|
.button { |
||||
|
border: 1px solid mc('teal', '900'); |
||||
|
background-color: mc('teal', '900'); |
||||
|
transition: all .4s ease; |
||||
|
color: #FFF; |
||||
|
border-radius: 0; |
||||
|
|
||||
|
&:first-child { |
||||
|
border-top-left-radius: 4px; |
||||
|
border-bottom-left-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
&:last-child { |
||||
|
border-top-right-radius: 4px; |
||||
|
border-bottom-right-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
border-color: mc('teal', '900'); |
||||
|
background-color: mc('teal', '800'); |
||||
|
color: #FFF; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.button + .button { |
||||
|
margin-left: 1px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.modal-sidebar { |
||||
|
|
||||
|
background-color: mc('teal', '50'); |
||||
|
padding: 0; |
||||
|
//padding: 7px 20px; |
||||
|
|
||||
|
@each $color, $colorvalue in $material-colors { |
||||
|
&.is-#{$color} { |
||||
|
background-color: mc($color, '50'); |
||||
|
|
||||
|
.model-sidebar-header { |
||||
|
background-color: mc($color, '100'); |
||||
|
color: mc($color, '800'); |
||||
|
} |
||||
|
|
||||
|
.model-sidebar-list > li a { |
||||
|
&:hover { |
||||
|
background-color: mc($color, '200'); |
||||
|
} |
||||
|
&.is-active { |
||||
|
background-color: mc($color, '500'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.model-sidebar-header { |
||||
|
padding: 7px 20px; |
||||
|
} |
||||
|
|
||||
|
.model-sidebar-content { |
||||
|
padding: 7px 20px; |
||||
|
} |
||||
|
|
||||
|
.model-sidebar-list { |
||||
|
|
||||
|
> li { |
||||
|
padding: 0; |
||||
|
|
||||
|
a { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 34px; |
||||
|
padding: 0 20px; |
||||
|
cursor: pointer; |
||||
|
color: mc('grey', '800'); |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: mc('teal', '200'); |
||||
|
} |
||||
|
|
||||
|
&.is-active { |
||||
|
color: #FFF; |
||||
|
} |
||||
|
|
||||
|
i { |
||||
|
margin-right: 7px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.modal-content .card-footer-item.featured { |
||||
|
animation: flash 4s ease 0 infinite; |
||||
|
} |
@ -0,0 +1,182 @@ |
|||||
|
|
||||
|
.nav { |
||||
|
align-items: stretch; |
||||
|
background-color: mc($primary, '500'); |
||||
|
display: flex; |
||||
|
min-height: 50px; |
||||
|
position: relative; |
||||
|
text-align: center; |
||||
|
box-shadow: 0 2px 3px rgba(mc($primary, '500'), 0.2); |
||||
|
z-index: 2; |
||||
|
color: #FFF; |
||||
|
|
||||
|
@each $color, $colorvalue in $material-colors { |
||||
|
&.is-#{$color} { |
||||
|
background-color: mc($color, '500'); |
||||
|
box-shadow: 0 2px 3px rgba(mc($color, '500'), 0.2); |
||||
|
|
||||
|
.nav-item { |
||||
|
|
||||
|
.button { |
||||
|
border: 1px solid mc($color, '900'); |
||||
|
background-color: mc($color, '800'); |
||||
|
|
||||
|
&.is-outlined { |
||||
|
background-color: mc($color, '600'); |
||||
|
border-color: mc($color, '800'); |
||||
|
color: mc($color, '100'); |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
border-color: mc($color, '900'); |
||||
|
background-color: mc($color, '900'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.nav-left { |
||||
|
align-items: stretch; |
||||
|
display: flex; |
||||
|
flex-basis: 0; |
||||
|
flex-grow: 1; |
||||
|
justify-content: flex-start; |
||||
|
overflow: hidden; |
||||
|
overflow-x: auto; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.nav-center { |
||||
|
align-items: stretch; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
margin-left: auto; |
||||
|
margin-right: auto; |
||||
|
} |
||||
|
|
||||
|
.nav-right { |
||||
|
@include tablet { |
||||
|
align-items: stretch; |
||||
|
display: flex; |
||||
|
flex-basis: 0; |
||||
|
flex-grow: 1; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.nav-item { |
||||
|
align-items: center; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
padding: 0 10px; |
||||
|
|
||||
|
// LINKS |
||||
|
|
||||
|
@at-root .nav-item a, a.nav-item { |
||||
|
color: mc($primary, '50'); |
||||
|
transition: color .4s ease; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&:hover { |
||||
|
color: mc($primary, '200'); |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
// LOGO |
||||
|
|
||||
|
img { |
||||
|
max-height: 34px; |
||||
|
} |
||||
|
|
||||
|
// HEADERS |
||||
|
|
||||
|
h1 { |
||||
|
font-size: 16px; |
||||
|
font-weight: 400; |
||||
|
letter-spacing: 0.5px; |
||||
|
text-transform: uppercase; |
||||
|
transition: color .4s ease; |
||||
|
color: #FFF; |
||||
|
padding-left: 10px; |
||||
|
|
||||
|
i { |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
color: mc('indigo', '100'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@at-root h2.nav-item, .nav-item h2 { |
||||
|
color: mc($primary, '50'); |
||||
|
} |
||||
|
|
||||
|
// BUTTONS |
||||
|
|
||||
|
.button { |
||||
|
border: 1px solid mc($primary, '900'); |
||||
|
background-color: mc($primary, '800'); |
||||
|
transition: all .4s ease; |
||||
|
color: #FFF; |
||||
|
border-radius: 0; |
||||
|
|
||||
|
&:first-child { |
||||
|
border-top-left-radius: 4px; |
||||
|
border-bottom-left-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
&:last-child { |
||||
|
border-top-right-radius: 4px; |
||||
|
border-bottom-right-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
&.is-outlined { |
||||
|
background-color: mc($primary, '600'); |
||||
|
border-color: mc($primary, '800'); |
||||
|
color: mc($primary, '100'); |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
border-color: mc($primary, '900'); |
||||
|
background-color: mc($primary, '900'); |
||||
|
color: #FFF; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.button + .button { |
||||
|
margin-left: 1px; |
||||
|
} |
||||
|
|
||||
|
// INPUTS |
||||
|
|
||||
|
.control { |
||||
|
|
||||
|
input[type=text] { |
||||
|
background-color: mc($primary, '800'); |
||||
|
border-color: mc($primary, '400'); |
||||
|
color: mc($primary, '50'); |
||||
|
|
||||
|
&:focus { |
||||
|
border-color: mc($primary, '200'); |
||||
|
box-shadow: inset 0 0 5px 0 rgba(mc($primary, '900'), 0.5); |
||||
|
} |
||||
|
|
||||
|
@include placeholder { |
||||
|
color: mc($primary, '200'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
@ -0,0 +1,112 @@ |
|||||
|
|
||||
|
.panel-aside { |
||||
|
background-color: mc('blue-grey', '800'); |
||||
|
border: 1px solid mc('blue-grey', '800'); |
||||
|
border-bottom-left-radius: 8px; |
||||
|
padding: 20px; |
||||
|
color: mc('blue-grey','100'); |
||||
|
|
||||
|
label { |
||||
|
color: #FFF; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.panel { |
||||
|
background-color: #FFF; |
||||
|
box-shadow: 0 0 12px 0 rgba(mc('grey','800'), .10), 1px 6px 8px 0 rgba(mc('grey','800'), .10); |
||||
|
padding: 0 0 1px 0; |
||||
|
border-radius: 4px; |
||||
|
|
||||
|
.panel-title { |
||||
|
border-bottom: 1px solid darken($color-bg, 5%); |
||||
|
padding: 0 15px; |
||||
|
color: $color-text; |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
height: 40px; |
||||
|
|
||||
|
&.is-featured { |
||||
|
border-top-left-radius: 4px; |
||||
|
border-top-right-radius: 4px; |
||||
|
background-color: mc('indigo', '300'); |
||||
|
border-bottom-color: mc('indigo', '400'); |
||||
|
color: #FFF; |
||||
|
|
||||
|
> i::before { |
||||
|
@include spinner(#FFF, 0.4s, 18px); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
> span { |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
> i { |
||||
|
display: flex; |
||||
|
width: 18px; |
||||
|
align-items: center; |
||||
|
|
||||
|
&::before { |
||||
|
content: " "; |
||||
|
@include spinner(mc($primary,'500'), 0.4s, 18px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.panel-content { |
||||
|
padding: 0 15px; |
||||
|
|
||||
|
&.is-text { |
||||
|
padding: 25px; |
||||
|
|
||||
|
p + p, p + h3 { |
||||
|
margin-top: 25px; |
||||
|
} |
||||
|
|
||||
|
h3 { |
||||
|
margin-bottom: 15px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
ul li { |
||||
|
color: mc('grey', '700'); |
||||
|
} |
||||
|
|
||||
|
strong { |
||||
|
font-weight: 500; |
||||
|
color: mc($primary,'800'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.panel-footer { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-end; |
||||
|
height: 50px; |
||||
|
background-color: $color-bg; |
||||
|
padding: 0 15px; |
||||
|
margin: 0 1px; |
||||
|
border-bottom-left-radius: 4px; |
||||
|
border-bottom-right-radius: 4px; |
||||
|
position: relative; |
||||
|
|
||||
|
.button + .button { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
+ .panel { |
||||
|
margin-top: 25px; |
||||
|
} |
||||
|
|
||||
|
} |
@ -0,0 +1,57 @@ |
|||||
|
.searchresults { |
||||
|
position: fixed; |
||||
|
top: 45px; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
margin: 0 auto; |
||||
|
width: 500px; |
||||
|
z-index: 1; |
||||
|
background-color: mc($primary, '700'); |
||||
|
border-bottom: 5px solid mc($primary, '800'); |
||||
|
box-shadow: 0 0 5px mc($primary, '500'); |
||||
|
color: #FFF; |
||||
|
|
||||
|
&.slideInDown { |
||||
|
@include prefix(animation-duration, .6s); |
||||
|
} |
||||
|
|
||||
|
.searchresults-label { |
||||
|
color: mc($primary, '200'); |
||||
|
padding: 15px 10px 10px; |
||||
|
font-size: 13px; |
||||
|
text-transform: uppercase; |
||||
|
border-bottom: 1px dotted mc($primary, '400'); |
||||
|
} |
||||
|
|
||||
|
.searchresults-list { |
||||
|
|
||||
|
> li { |
||||
|
display: flex; |
||||
|
font-size: 14px; |
||||
|
transition: background-color .3s linear; |
||||
|
|
||||
|
&:nth-child(odd) { |
||||
|
background-color: mc($primary, '600'); |
||||
|
} |
||||
|
|
||||
|
&.is-active, &:hover { |
||||
|
background-color: mc($primary, '400'); |
||||
|
color: #FFF; |
||||
|
border-left: 5px solid mc($primary, '200'); |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
color: mc($primary, '50'); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 30px; |
||||
|
padding: 0 20px; |
||||
|
width: 100%; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
@ -0,0 +1,83 @@ |
|||||
|
|
||||
|
.sidebar { |
||||
|
background-color: mc('blue-grey', '900'); |
||||
|
color: mc('blue-grey', '50'); |
||||
|
width: 250px; |
||||
|
max-width: 250px; |
||||
|
min-height: 80vh; |
||||
|
|
||||
|
aside { |
||||
|
|
||||
|
&:last-child { |
||||
|
padding-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.sidebar-label { |
||||
|
padding: 0 0 5px 0; |
||||
|
color: mc('blue-grey', '400'); |
||||
|
font-size: 13px; |
||||
|
letter-spacing: 1px; |
||||
|
text-transform: uppercase; |
||||
|
border-bottom: 1px solid mc('blue-grey', '700'); |
||||
|
margin: 25px 10px 15px 10px; |
||||
|
|
||||
|
i { |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.sidebar-menu { |
||||
|
|
||||
|
li { |
||||
|
display: block; |
||||
|
|
||||
|
a { |
||||
|
display: flex; |
||||
|
min-height: 30px; |
||||
|
align-items: center; |
||||
|
padding: 5px 20px; |
||||
|
color: mc('blue-grey', '50'); |
||||
|
font-size: 14px; |
||||
|
transition: all .4s ease; |
||||
|
line-height: 14px; |
||||
|
|
||||
|
i { |
||||
|
margin-right: 7px; |
||||
|
color: mc('blue-grey', '300'); |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
color: mc('blue-grey', '400'); |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
> ul { |
||||
|
border-top: 1px solid lighten(mc('blue-grey', '900'), 3%); |
||||
|
border-bottom: 1px solid lighten(mc('blue-grey', '900'), 2%); |
||||
|
background-color: darken(mc('blue-grey', '900'), 2%); |
||||
|
margin-bottom: 10px; |
||||
|
padding: 10px 0; |
||||
|
|
||||
|
li { |
||||
|
padding-left: 10px; |
||||
|
//border-left: 5px solid mc('blue-grey', '800'); |
||||
|
|
||||
|
a { |
||||
|
min-height: 24px; |
||||
|
color: mc('blue-grey', '100'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
@ -0,0 +1,90 @@ |
|||||
|
.table { |
||||
|
border-spacing: collapse; |
||||
|
padding: 1px; |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
thead { |
||||
|
background-color: mc('blue-grey', '500'); |
||||
|
color: #FFF; |
||||
|
|
||||
|
th { |
||||
|
padding: 5px 10px; |
||||
|
font-weight: 500; |
||||
|
text-align: center; |
||||
|
border-left: 1px solid mc('blue-grey', '200'); |
||||
|
|
||||
|
&:first-child { |
||||
|
border-left: none; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
@each $color, $colorvalue in $material-colors { |
||||
|
&.is-#{$color} { |
||||
|
background-color: mc($color, '500'); |
||||
|
|
||||
|
th { |
||||
|
border-left-color: mc($color, '200'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
tbody { |
||||
|
|
||||
|
tr { |
||||
|
background-color: mc('blue-grey', '100'); |
||||
|
|
||||
|
&:nth-child(odd) { |
||||
|
background-color: mc('blue-grey', '50'); |
||||
|
} |
||||
|
|
||||
|
td { |
||||
|
padding: 5px 10px; |
||||
|
border-left: 1px solid #FFF; |
||||
|
vertical-align: middle; |
||||
|
|
||||
|
&:first-child { |
||||
|
border-left: none; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.is-centered { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.has-icons i { |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.is-icon { |
||||
|
font-size: 14px; |
||||
|
width: 20px; |
||||
|
} |
||||
|
|
||||
|
.has-action-icons { |
||||
|
i { |
||||
|
cursor: pointer; |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.table-actions { |
||||
|
text-align: right; |
||||
|
|
||||
|
.button { |
||||
|
border-top-left-radius: 0; |
||||
|
border-top-right-radius: 0; |
||||
|
} |
||||
|
|
||||
|
} |
@ -0,0 +1,16 @@ |
|||||
|
|
||||
|
h1 { |
||||
|
font-size: 28px; |
||||
|
} |
||||
|
h2 { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
h3 { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
@each $color, $colorvalue in $material-colors { |
||||
|
i.is-#{$color} { |
||||
|
color: mc($color, '600'); |
||||
|
} |
||||
|
} |
3486
client/scss/libs/animate.scss
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,52 @@ |
|||||
|
|
||||
|
body { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
min-height: 100vh; |
||||
|
width: 100vw; |
||||
|
padding: 25px 0; |
||||
|
margin: 0; |
||||
|
color: #FFF; |
||||
|
|
||||
|
&.is-notexist { |
||||
|
background-color: mc('blue-grey', '900'); |
||||
|
} |
||||
|
|
||||
|
&.is-forbidden { |
||||
|
background-color: darken(mc('blue-grey', '900'), 5%); |
||||
|
} |
||||
|
|
||||
|
&.is-error { |
||||
|
background-color: darken(mc('blue-grey', '900'), 10%); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.container { |
||||
|
text-align: center; |
||||
|
|
||||
|
h1 { |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
|
||||
|
h2 { |
||||
|
margin-bottom: 50px; |
||||
|
} |
||||
|
|
||||
|
a.button { |
||||
|
margin: 0 5px; |
||||
|
} |
||||
|
|
||||
|
h3 { |
||||
|
text-align: left; |
||||
|
margin-top: 50px; |
||||
|
} |
||||
|
|
||||
|
pre { |
||||
|
margin-top: 10px; |
||||
|
text-align: left; |
||||
|
color: mc('blue-grey', '200'); |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
} |
@ -0,0 +1,306 @@ |
|||||
|
|
||||
|
body { |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
font-family: $core-font-standard; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
color: #FFF; |
||||
|
transition: color 0.4s ease; |
||||
|
text-decoration: none; |
||||
|
|
||||
|
&:hover { |
||||
|
color: mc('orange','600'); |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
#bg { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
z-index: 1; |
||||
|
background-color: #000; |
||||
|
|
||||
|
> div { |
||||
|
background-size: cover; |
||||
|
background-position: center center; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
opacity: 0; |
||||
|
visibility: hidden; |
||||
|
transition: opacity 3s ease, visibility 3s; |
||||
|
animation: bg 30s linear infinite; |
||||
|
|
||||
|
&:nth-child(1) { |
||||
|
animation-delay: 10s; |
||||
|
} |
||||
|
|
||||
|
&:nth-child(2) { |
||||
|
animation-delay: 20s; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
#root { |
||||
|
position: fixed; |
||||
|
top: 15vh; |
||||
|
left: 10vw; |
||||
|
z-index: 2; |
||||
|
color: #FFF; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
h1 { |
||||
|
font-size: 4rem; |
||||
|
font-weight: bold; |
||||
|
color: #FFF; |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
animation: headerIntro 3s ease; |
||||
|
} |
||||
|
|
||||
|
h2 { |
||||
|
font-size: 1.5rem; |
||||
|
font-weight: normal; |
||||
|
color: rgba(255,255,255,0.7); |
||||
|
padding: 0; |
||||
|
margin: 0 0 25px 0; |
||||
|
animation: headerIntro 3s ease; |
||||
|
} |
||||
|
|
||||
|
h3 { |
||||
|
font-size: 1.25rem; |
||||
|
font-weight: normal; |
||||
|
color: #FB8C00; |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
animation: shake 1s ease; |
||||
|
|
||||
|
> .fa { |
||||
|
margin-right: 7px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
h4 { |
||||
|
font-size: 0.8rem; |
||||
|
font-weight: normal; |
||||
|
color: rgba(255,255,255,0.7); |
||||
|
padding: 0; |
||||
|
margin: 0 0 15px 0; |
||||
|
animation: fadeIn 3s ease; |
||||
|
} |
||||
|
|
||||
|
form { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
input[type=text], input[type=password] { |
||||
|
width: 350px; |
||||
|
max-width: 80vw; |
||||
|
border: 1px solid rgba(255,255,255,0.3); |
||||
|
border-radius: 3px; |
||||
|
background-color: rgba(0,0,0,0.2); |
||||
|
padding: 0 15px; |
||||
|
height: 40px; |
||||
|
margin: 0 0 10px 0; |
||||
|
color: #FFF; |
||||
|
font-weight: bold; |
||||
|
font-size: 14px; |
||||
|
transition: all 0.4s ease; |
||||
|
|
||||
|
&:focus { |
||||
|
outline: none; |
||||
|
border-color: mc('orange','600'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
button { |
||||
|
background-color: mc('orange','600'); |
||||
|
color: #FFF; |
||||
|
border: 1px solid lighten(mc('orange','600'), 10%); |
||||
|
border-radius: 3px; |
||||
|
height: 40px; |
||||
|
width: 125px; |
||||
|
padding: 0; |
||||
|
font-weight: bold; |
||||
|
margin: 15px 0 0 0; |
||||
|
transition: all 0.4s ease; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
span { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
&:focus { |
||||
|
outline: none; |
||||
|
border-color: #FFF; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: darken(mc('orange','600'), 10%); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
#social { |
||||
|
margin-top: 25px; |
||||
|
|
||||
|
> span { |
||||
|
display: block; |
||||
|
font-weight: bold; |
||||
|
color: rgba(255,255,255,0.7); |
||||
|
} |
||||
|
|
||||
|
button { |
||||
|
margin-right: 5px; |
||||
|
width: auto; |
||||
|
padding: 0 15px; |
||||
|
|
||||
|
> i { |
||||
|
margin-right: 10px; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
&.ms { |
||||
|
background-color: mc('blue','600'); |
||||
|
border-color: lighten(mc('blue','600'), 10%); |
||||
|
|
||||
|
&:focus { |
||||
|
border-color: #FFF; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: darken(mc('blue','600'), 10%); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
&.google { |
||||
|
background-color: mc('light-blue','600'); |
||||
|
border-color: lighten(mc('light-blue','600'), 10%); |
||||
|
|
||||
|
&:focus { |
||||
|
border-color: #FFF; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: darken(mc('light-blue','600'), 10%); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
&.facebook { |
||||
|
background-color: mc('indigo','600'); |
||||
|
border-color: lighten(mc('indigo','600'), 10%); |
||||
|
|
||||
|
&:focus { |
||||
|
border-color: #FFF; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: darken(mc('indigo','600'), 10%); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
&.github { |
||||
|
background-color: mc('blue-grey','700'); |
||||
|
border-color: lighten(mc('blue-grey','700'), 10%); |
||||
|
|
||||
|
&:focus { |
||||
|
border-color: #FFF; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: darken(mc('blue-grey','700'), 10%); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.slack { |
||||
|
background-color: mc('purple','700'); |
||||
|
border-color: lighten(mc('purple','700'), 10%); |
||||
|
|
||||
|
&:focus { |
||||
|
border-color: #FFF; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: darken(mc('purple','700'), 10%); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
#copyright { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-start; |
||||
|
position: absolute; |
||||
|
left: 10vw; |
||||
|
bottom: 10vh; |
||||
|
z-index: 2; |
||||
|
color: rgba(255,255,255,0.5); |
||||
|
font-weight: bold; |
||||
|
|
||||
|
.icon { |
||||
|
font-size: 1.2rem; |
||||
|
margin: 0 8px; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
opacity: 0.75; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
@include keyframes(bg) { |
||||
|
0% { |
||||
|
@include prefix(transform, scale(1,1)); |
||||
|
visibility: visible; |
||||
|
opacity: 0; |
||||
|
}, |
||||
|
5% { |
||||
|
opacity: 0.5; |
||||
|
}, |
||||
|
33% { |
||||
|
opacity: 0.5; |
||||
|
}, |
||||
|
38% { |
||||
|
@include prefix(transform, scale(1.2, 1.2)); |
||||
|
opacity: 0; |
||||
|
}, |
||||
|
39% { |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
100% { |
||||
|
visibility: hidden; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@include keyframes(headerIntro) { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
@ -0,0 +1,243 @@ |
|||||
|
'use strict' |
||||
|
|
||||
|
/* global appconfig, appdata, db, winston */ |
||||
|
|
||||
|
const LocalStrategy = require('passport-local').Strategy |
||||
|
const GoogleStrategy = require('passport-google-oauth20').Strategy |
||||
|
const WindowsLiveStrategy = require('passport-windowslive').Strategy |
||||
|
const FacebookStrategy = require('passport-facebook').Strategy |
||||
|
const GitHubStrategy = require('passport-github2').Strategy |
||||
|
const SlackStrategy = require('passport-slack').Strategy |
||||
|
const LdapStrategy = require('passport-ldapauth').Strategy |
||||
|
const fs = require('fs') |
||||
|
|
||||
|
module.exports = function (passport) { |
||||
|
// Serialization user methods
|
||||
|
|
||||
|
passport.serializeUser(function (user, done) { |
||||
|
done(null, user._id) |
||||
|
}) |
||||
|
|
||||
|
passport.deserializeUser(function (id, done) { |
||||
|
db.User.findById(id).then((user) => { |
||||
|
if (user) { |
||||
|
done(null, user) |
||||
|
} else { |
||||
|
done(new Error('User not found.'), null) |
||||
|
} |
||||
|
return true |
||||
|
}).catch((err) => { |
||||
|
done(err, null) |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
// Local Account
|
||||
|
|
||||
|
if (!appdata.capabilities.manyAuthProviders || (appconfig.auth.local && appconfig.auth.local.enabled)) { |
||||
|
passport.use('local', |
||||
|
new LocalStrategy({ |
||||
|
usernameField: 'email', |
||||
|
passwordField: 'password' |
||||
|
}, |
||||
|
(uEmail, uPassword, done) => { |
||||
|
db.User.findOne({ email: uEmail, provider: 'local' }).then((user) => { |
||||
|
if (user) { |
||||
|
return user.validatePassword(uPassword).then(() => { |
||||
|
return done(null, user) || true |
||||
|
}).catch((err) => { |
||||
|
return done(err, null) |
||||
|
}) |
||||
|
} else { |
||||
|
return done(new Error('INVALID_LOGIN'), null) |
||||
|
} |
||||
|
}).catch((err) => { |
||||
|
done(err, null) |
||||
|
}) |
||||
|
} |
||||
|
)) |
||||
|
} |
||||
|
|
||||
|
// Google ID
|
||||
|
|
||||
|
if (appdata.capabilities.manyAuthProviders && appconfig.auth.google && appconfig.auth.google.enabled) { |
||||
|
passport.use('google', |
||||
|
new GoogleStrategy({ |
||||
|
clientID: appconfig.auth.google.clientId, |
||||
|
clientSecret: appconfig.auth.google.clientSecret, |
||||
|
callbackURL: appconfig.host + '/login/google/callback' |
||||
|
}, |
||||
|
(accessToken, refreshToken, profile, cb) => { |
||||
|
db.User.processProfile(profile).then((user) => { |
||||
|
return cb(null, user) || true |
||||
|
}).catch((err) => { |
||||
|
return cb(err, null) || true |
||||
|
}) |
||||
|
} |
||||
|
)) |
||||
|
} |
||||
|
|
||||
|
// Microsoft Accounts
|
||||
|
|
||||
|
if (appdata.capabilities.manyAuthProviders && appconfig.auth.microsoft && appconfig.auth.microsoft.enabled) { |
||||
|
passport.use('windowslive', |
||||
|
new WindowsLiveStrategy({ |
||||
|
clientID: appconfig.auth.microsoft.clientId, |
||||
|
clientSecret: appconfig.auth.microsoft.clientSecret, |
||||
|
callbackURL: appconfig.host + '/login/ms/callback' |
||||
|
}, |
||||
|
function (accessToken, refreshToken, profile, cb) { |
||||
|
db.User.processProfile(profile).then((user) => { |
||||
|
return cb(null, user) || true |
||||
|
}).catch((err) => { |
||||
|
return cb(err, null) || true |
||||
|
}) |
||||
|
} |
||||
|
)) |
||||
|
} |
||||
|
|
||||
|
// Facebook
|
||||
|
|
||||
|
if (appdata.capabilities.manyAuthProviders && appconfig.auth.facebook && appconfig.auth.facebook.enabled) { |
||||
|
passport.use('facebook', |
||||
|
new FacebookStrategy({ |
||||
|
clientID: appconfig.auth.facebook.clientId, |
||||
|
clientSecret: appconfig.auth.facebook.clientSecret, |
||||
|
callbackURL: appconfig.host + '/login/facebook/callback', |
||||
|
profileFields: ['id', 'displayName', 'email'] |
||||
|
}, |
||||
|
function (accessToken, refreshToken, profile, cb) { |
||||
|
db.User.processProfile(profile).then((user) => { |
||||
|
return cb(null, user) || true |
||||
|
}).catch((err) => { |
||||
|
return cb(err, null) || true |
||||
|
}) |
||||
|
} |
||||
|
)) |
||||
|
} |
||||
|
|
||||
|
// GitHub
|
||||
|
|
||||
|
if (appdata.capabilities.manyAuthProviders && appconfig.auth.github && appconfig.auth.github.enabled) { |
||||
|
passport.use('github', |
||||
|
new GitHubStrategy({ |
||||
|
clientID: appconfig.auth.github.clientId, |
||||
|
clientSecret: appconfig.auth.github.clientSecret, |
||||
|
callbackURL: appconfig.host + '/login/github/callback', |
||||
|
scope: [ 'user:email' ] |
||||
|
}, |
||||
|
(accessToken, refreshToken, profile, cb) => { |
||||
|
db.User.processProfile(profile).then((user) => { |
||||
|
return cb(null, user) || true |
||||
|
}).catch((err) => { |
||||
|
return cb(err, null) || true |
||||
|
}) |
||||
|
} |
||||
|
)) |
||||
|
} |
||||
|
|
||||
|
// Slack
|
||||
|
|
||||
|
if (appdata.capabilities.manyAuthProviders && appconfig.auth.slack && appconfig.auth.slack.enabled) { |
||||
|
passport.use('slack', |
||||
|
new SlackStrategy({ |
||||
|
clientID: appconfig.auth.slack.clientId, |
||||
|
clientSecret: appconfig.auth.slack.clientSecret, |
||||
|
callbackURL: appconfig.host + '/login/slack/callback' |
||||
|
}, |
||||
|
(accessToken, refreshToken, profile, cb) => { |
||||
|
db.User.processProfile(profile).then((user) => { |
||||
|
return cb(null, user) || true |
||||
|
}).catch((err) => { |
||||
|
return cb(err, null) || true |
||||
|
}) |
||||
|
} |
||||
|
)) |
||||
|
} |
||||
|
|
||||
|
// LDAP
|
||||
|
|
||||
|
if (appdata.capabilities.manyAuthProviders && appconfig.auth.ldap && appconfig.auth.ldap.enabled) { |
||||
|
passport.use('ldapauth', |
||||
|
new LdapStrategy({ |
||||
|
server: { |
||||
|
url: appconfig.auth.ldap.url, |
||||
|
bindDn: appconfig.auth.ldap.bindDn, |
||||
|
bindCredentials: appconfig.auth.ldap.bindCredentials, |
||||
|
searchBase: appconfig.auth.ldap.searchBase, |
||||
|
searchFilter: appconfig.auth.ldap.searchFilter, |
||||
|
searchAttributes: ['displayName', 'name', 'cn', 'mail'], |
||||
|
tlsOptions: (appconfig.auth.ldap.tlsEnabled) ? { |
||||
|
ca: [ |
||||
|
fs.readFileSync(appconfig.auth.ldap.tlsCertPath) |
||||
|
] |
||||
|
} : {} |
||||
|
}, |
||||
|
usernameField: 'email', |
||||
|
passReqToCallback: false |
||||
|
}, |
||||
|
(profile, cb) => { |
||||
|
profile.provider = 'ldap' |
||||
|
profile.id = profile.dn |
||||
|
db.User.processProfile(profile).then((user) => { |
||||
|
return cb(null, user) || true |
||||
|
}).catch((err) => { |
||||
|
return cb(err, null) || true |
||||
|
}) |
||||
|
} |
||||
|
)) |
||||
|
} |
||||
|
|
||||
|
// Create users for first-time
|
||||
|
|
||||
|
db.onReady.then(() => { |
||||
|
db.User.findOne({ provider: 'local', email: 'guest' }).then((c) => { |
||||
|
if (c < 1) { |
||||
|
// Create root admin account
|
||||
|
|
||||
|
winston.info('[AUTH] No administrator account found. Creating a new one...') |
||||
|
db.User.hashPassword('admin123').then((pwd) => { |
||||
|
return db.User.create({ |
||||
|
provider: 'local', |
||||
|
email: appconfig.admin, |
||||
|
name: 'Administrator', |
||||
|
password: pwd, |
||||
|
rights: [{ |
||||
|
role: 'admin', |
||||
|
path: '/', |
||||
|
exact: false, |
||||
|
deny: false |
||||
|
}] |
||||
|
}) |
||||
|
}).then(() => { |
||||
|
winston.info('[AUTH] Administrator account created successfully!') |
||||
|
}).then(() => { |
||||
|
if (appdata.capabilities.guest) { |
||||
|
// Create guest account
|
||||
|
|
||||
|
return db.User.create({ |
||||
|
provider: 'local', |
||||
|
email: 'guest', |
||||
|
name: 'Guest', |
||||
|
password: '', |
||||
|
rights: [{ |
||||
|
role: 'read', |
||||
|
path: '/', |
||||
|
exact: false, |
||||
|
deny: !appconfig.public |
||||
|
}] |
||||
|
}).then(() => { |
||||
|
winston.info('[AUTH] Guest account created successfully!') |
||||
|
}) |
||||
|
} else { |
||||
|
return true |
||||
|
} |
||||
|
}).catch((err) => { |
||||
|
winston.error('[AUTH] An error occured while creating administrator/guest account:') |
||||
|
winston.error(err) |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
return true |
||||
|
}) |
||||
|
} |
@ -0,0 +1,58 @@ |
|||||
|
'use strict' |
||||
|
|
||||
|
/* global winston */ |
||||
|
|
||||
|
const fs = require('fs') |
||||
|
const yaml = require('js-yaml') |
||||
|
const _ = require('lodash') |
||||
|
|
||||
|
/** |
||||
|
* Load Application Configuration |
||||
|
* |
||||
|
* @param {Object} confPaths Path to the configuration files |
||||
|
* @return {Object} Application Configuration |
||||
|
*/ |
||||
|
module.exports = (confPaths) => { |
||||
|
confPaths = _.defaults(confPaths, { |
||||
|
config: './config.yml', |
||||
|
data: './app/data.yml' |
||||
|
}) |
||||
|
|
||||
|
let appconfig = {} |
||||
|
let appdata = {} |
||||
|
|
||||
|
try { |
||||
|
appconfig = yaml.safeLoad(fs.readFileSync(confPaths.config, 'utf8')) |
||||
|
appdata = yaml.safeLoad(fs.readFileSync(confPaths.data, 'utf8')) |
||||
|
} catch (ex) { |
||||
|
winston.error(ex) |
||||
|
process.exit(1) |
||||
|
} |
||||
|
|
||||
|
// Merge with defaults
|
||||
|
|
||||
|
appconfig = _.defaultsDeep(appconfig, appdata.defaults.config) |
||||
|
|
||||
|
// List authentication strategies
|
||||
|
|
||||
|
if (appdata.capabilities.manyAuthProviders) { |
||||
|
appconfig.authStrategies = { |
||||
|
list: _.filter(appconfig.auth, ['enabled', true]), |
||||
|
socialEnabled: (_.chain(appconfig.auth).omit('local').reject({ enabled: false }).value().length > 0) |
||||
|
} |
||||
|
if (appconfig.authStrategies.list.length < 1) { |
||||
|
winston.error(new Error('You must enable at least 1 authentication strategy!')) |
||||
|
process.exit(1) |
||||
|
} |
||||
|
} else { |
||||
|
appconfig.authStrategies = { |
||||
|
list: { local: { enabled: true } }, |
||||
|
socialEnabled: false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
config: appconfig, |
||||
|
data: appdata |
||||
|
} |
||||
|
} |
@ -0,0 +1,120 @@ |
|||||
|
'use strict' |
||||
|
|
||||
|
/* global db */ |
||||
|
|
||||
|
const _ = require('lodash') |
||||
|
|
||||
|
/** |
||||
|
* Rights |
||||
|
*/ |
||||
|
module.exports = { |
||||
|
|
||||
|
guest: { |
||||
|
provider: 'local', |
||||
|
email: 'guest', |
||||
|
name: 'Guest', |
||||
|
password: '', |
||||
|
rights: [ |
||||
|
{ |
||||
|
role: 'read', |
||||
|
path: '/', |
||||
|
deny: false, |
||||
|
exact: false |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Initialize Rights module |
||||
|
* |
||||
|
* @return {void} Void |
||||
|
*/ |
||||
|
init () { |
||||
|
let self = this |
||||
|
|
||||
|
db.onReady.then(() => { |
||||
|
db.User.findOne({ provider: 'local', email: 'guest' }).then((u) => { |
||||
|
if (u) { |
||||
|
self.guest = u |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Check user permissions for this request |
||||
|
* |
||||
|
* @param {object} req The request object |
||||
|
* @return {object} List of permissions for this request |
||||
|
*/ |
||||
|
check (req) { |
||||
|
let self = this |
||||
|
|
||||
|
let perm = { |
||||
|
read: false, |
||||
|
write: false, |
||||
|
manage: false |
||||
|
} |
||||
|
let rt = [] |
||||
|
let p = _.chain(req.originalUrl).toLower().trim().value() |
||||
|
|
||||
|
// Load User Rights
|
||||
|
|
||||
|
if (_.isArray(req.user.rights)) { |
||||
|
rt = req.user.rights |
||||
|
} |
||||
|
|
||||
|
// Is admin?
|
||||
|
|
||||
|
if (_.find(rt, { role: 'admin' })) { |
||||
|
perm.read = true |
||||
|
perm.write = true |
||||
|
perm.manage = true |
||||
|
} else if (self.checkRole(p, rt, 'write')) { |
||||
|
perm.read = true |
||||
|
perm.write = true |
||||
|
} else if (self.checkRole(p, rt, 'read')) { |
||||
|
perm.read = true |
||||
|
} |
||||
|
|
||||
|
return perm |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Check for a specific role based on list of user rights |
||||
|
* |
||||
|
* @param {String} p Base path |
||||
|
* @param {array<object>} rt The user rights |
||||
|
* @param {string} role The minimum role required |
||||
|
* @return {boolean} True if authorized |
||||
|
*/ |
||||
|
checkRole (p, rt, role) { |
||||
|
// Check specific role on path
|
||||
|
|
||||
|
let filteredRights = _.filter(rt, (r) => { |
||||
|
if (r.role === role || (r.role === 'write' && role === 'read')) { |
||||
|
if ((!r.exact && _.startsWith(p, r.path)) || (r.exact && p === r.path)) { |
||||
|
return true |
||||
|
} |
||||
|
} |
||||
|
return false |
||||
|
}) |
||||
|
|
||||
|
// Check for deny scenario
|
||||
|
|
||||
|
let isValid = false |
||||
|
|
||||
|
if (filteredRights.length > 1) { |
||||
|
isValid = !_.chain(filteredRights).sortBy((r) => { |
||||
|
return r.path.length + ((r.deny) ? 0.5 : 0) |
||||
|
}).last().get('deny').value() |
||||
|
} else if (filteredRights.length === 1 && filteredRights[0].deny === false) { |
||||
|
isValid = true |
||||
|
} |
||||
|
|
||||
|
// Deny by default
|
||||
|
|
||||
|
return isValid |
||||
|
} |
||||
|
|
||||
|
} |
xxxxxxxxxx