Users list + Edit user interface
This commit is contained in:
NGPixel
parent
9578989b67
commit
0809946914
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -49,6 +49,7 @@ jQuery( document ).ready(function( $ ) {
|
||||
//=include pages/create.js
|
||||
//=include pages/edit.js
|
||||
//=include pages/source.js
|
||||
//=include pages/admin.js
|
||||
|
||||
});
|
||||
|
||||
|
||||
30
client/js/modals/admin-createuser.js
Normal file
30
client/js/modals/admin-createuser.js
Normal file
@ -0,0 +1,30 @@
|
||||
|
||||
// Vue Create User instance
|
||||
|
||||
let vueCreateUser = new Vue({
|
||||
el: '#modal-admin-createuser',
|
||||
data: {
|
||||
email: '',
|
||||
provider: 'local',
|
||||
password: '',
|
||||
name: ''
|
||||
},
|
||||
methods: {
|
||||
open: (ev) => {
|
||||
$('#modal-admin-createuser').addClass('is-active');
|
||||
$('#modal-admin-createuser input').first().focus();
|
||||
},
|
||||
cancel: (ev) => {
|
||||
$('#modal-admin-createuser').removeClass('is-active');
|
||||
vueCreateUser.email = '';
|
||||
vueCreateUser.provider = 'local';
|
||||
},
|
||||
create: (ev) => {
|
||||
|
||||
vueCreateUser.cancel();
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.btn-create-prompt').on('click', vueCreateUser.open);
|
||||
6
client/js/pages/admin.js
Normal file
6
client/js/pages/admin.js
Normal file
@ -0,0 +1,6 @@
|
||||
|
||||
if($('#page-type-admin').length) {
|
||||
|
||||
//=include ../modals/admin-createuser.js
|
||||
|
||||
}
|
||||
@ -14,6 +14,7 @@ $primary: 'indigo';
|
||||
@import 'core-client/scss/components/panel';
|
||||
@import 'core-client/scss/components/search';
|
||||
@import 'core-client/scss/components/sidebar';
|
||||
@import 'core-client/scss/components/table';
|
||||
@import 'core-client/scss/components/typography';
|
||||
|
||||
@import './libs/twemoji-awesome';
|
||||
|
||||
11
client/scss/libs/animate.min.css
vendored
11
client/scss/libs/animate.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,5 +0,0 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "generic"
|
||||
@import "classes"
|
||||
@import "helpers"
|
||||
@ -1,20 +0,0 @@
|
||||
.block
|
||||
&:not(:last-child)
|
||||
margin-bottom: 20px
|
||||
|
||||
.container
|
||||
position: relative
|
||||
+desktop
|
||||
margin: 0 auto
|
||||
max-width: 960px
|
||||
// Modifiers
|
||||
&.is-fluid
|
||||
margin: 0 20px
|
||||
max-width: none
|
||||
+widescreen
|
||||
max-width: 1200px
|
||||
|
||||
.fa
|
||||
font-size: 21px
|
||||
text-align: center
|
||||
vertical-align: top
|
||||
@ -1,31 +0,0 @@
|
||||
.block {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
|
||||
@include desktop {
|
||||
margin: 0 auto;
|
||||
max-width: 960px;
|
||||
|
||||
// Modifiers
|
||||
&.is-fluid {
|
||||
margin: 0 20px;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include widescreen {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
.fa {
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
}
|
||||
@ -1,100 +0,0 @@
|
||||
html
|
||||
background-color: $body-background
|
||||
font-size: $size-normal
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
-webkit-font-smoothing: antialiased
|
||||
min-width: 300px
|
||||
overflow-x: hidden
|
||||
overflow-y: scroll
|
||||
text-rendering: optimizeLegibility
|
||||
|
||||
article,
|
||||
aside,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
section
|
||||
display: block
|
||||
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea
|
||||
font-family: $family-primary
|
||||
|
||||
code,
|
||||
pre
|
||||
-moz-osx-font-smoothing: auto
|
||||
-webkit-font-smoothing: auto
|
||||
font-family: $family-code
|
||||
line-height: 1.25
|
||||
|
||||
body
|
||||
color: $text
|
||||
font-size: 1rem
|
||||
font-weight: $weight-normal
|
||||
line-height: 1.428571428571429
|
||||
|
||||
// Inline
|
||||
|
||||
a
|
||||
color: $link
|
||||
cursor: pointer
|
||||
text-decoration: none
|
||||
transition: none $speed $easing
|
||||
&:hover
|
||||
color: $link-hover
|
||||
|
||||
code
|
||||
background-color: $code-background
|
||||
color: $code
|
||||
font-size: 12px
|
||||
font-weight: normal
|
||||
padding: 1px 2px 2px
|
||||
|
||||
hr
|
||||
border-top-color: $border
|
||||
margin: 40px 0
|
||||
|
||||
img
|
||||
max-width: 100%
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"]
|
||||
vertical-align: baseline
|
||||
|
||||
small
|
||||
font-size: $size-small
|
||||
|
||||
span
|
||||
font-style: inherit
|
||||
font-weight: inherit
|
||||
|
||||
strong
|
||||
color: $text-strong
|
||||
font-weight: $weight-bold
|
||||
|
||||
// Block
|
||||
|
||||
pre
|
||||
background-color: $pre-background
|
||||
color: $pre
|
||||
white-space: pre
|
||||
word-wrap: normal
|
||||
code
|
||||
background-color: $pre-background
|
||||
color: $pre
|
||||
display: block
|
||||
overflow-x: auto
|
||||
padding: 16px 20px
|
||||
|
||||
table
|
||||
width: 100%
|
||||
td,
|
||||
th
|
||||
text-align: left
|
||||
vertical-align: top
|
||||
th
|
||||
color: $text-strong
|
||||
@ -1,104 +0,0 @@
|
||||
// Display
|
||||
|
||||
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
|
||||
|
||||
@each $display in $displays
|
||||
.is-#{$display}
|
||||
display: #{$display}
|
||||
.is-#{$display}-mobile
|
||||
+mobile
|
||||
display: #{$display} !important
|
||||
.is-#{$display}-tablet
|
||||
+tablet
|
||||
display: #{$display} !important
|
||||
.is-#{$display}-tablet-only
|
||||
+tablet-only
|
||||
display: #{$display} !important
|
||||
.is-#{$display}-touch
|
||||
+touch
|
||||
display: #{$display} !important
|
||||
.is-#{$display}-desktop
|
||||
+desktop
|
||||
display: #{$display} !important
|
||||
.is-#{$display}-desktop-only
|
||||
+desktop-only
|
||||
display: #{$display} !important
|
||||
.is-#{$display}-widescreen
|
||||
+widescreen
|
||||
display: #{$display} !important
|
||||
|
||||
// Float
|
||||
|
||||
.is-clearfix
|
||||
+clearfix
|
||||
|
||||
.is-pulled-left
|
||||
float: left
|
||||
|
||||
.is-pulled-right
|
||||
float: right
|
||||
|
||||
// Overflow
|
||||
|
||||
.is-clipped
|
||||
overflow: hidden !important
|
||||
|
||||
// Overlay
|
||||
|
||||
.is-overlay
|
||||
+overlay
|
||||
|
||||
// Text
|
||||
|
||||
.has-text-centered
|
||||
text-align: center
|
||||
|
||||
.has-text-left
|
||||
text-align: left
|
||||
|
||||
.has-text-right
|
||||
text-align: right
|
||||
|
||||
// Visibility
|
||||
|
||||
.is-hidden
|
||||
display: none !important
|
||||
|
||||
.is-hidden-mobile
|
||||
+mobile
|
||||
display: none !important
|
||||
|
||||
.is-hidden-tablet
|
||||
+tablet
|
||||
display: none !important
|
||||
|
||||
.is-hidden-tablet-only
|
||||
+tablet-only
|
||||
display: none !important
|
||||
|
||||
.is-hidden-touch
|
||||
+touch
|
||||
display: none !important
|
||||
|
||||
.is-hidden-desktop
|
||||
+desktop
|
||||
display: none !important
|
||||
|
||||
.is-hidden-desktop-only
|
||||
+desktop-only
|
||||
display: none !important
|
||||
|
||||
.is-hidden-widescreen
|
||||
+widescreen
|
||||
display: none !important
|
||||
|
||||
// Other
|
||||
|
||||
.is-disabled
|
||||
pointer-events: none
|
||||
|
||||
.is-marginless
|
||||
margin: 0 !important
|
||||
|
||||
.is-unselectable
|
||||
@extend .unselectable
|
||||
@ -1,153 +0,0 @@
|
||||
// Display
|
||||
|
||||
$displays: "block" "flex" "inline" "inline-block" "inline-flex";
|
||||
|
||||
@each $display in $displays {
|
||||
.is-#{$display} {
|
||||
display: #{$display};
|
||||
}
|
||||
|
||||
.is-#{$display}-mobile {
|
||||
@include mobile {
|
||||
display: #{$display} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-#{$display}-tablet {
|
||||
@include tablet {
|
||||
display: #{$display} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-#{$display}-tablet-only {
|
||||
@include tablet-only {
|
||||
display: #{$display} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-#{$display}-touch {
|
||||
@include touch {
|
||||
display: #{$display} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-#{$display}-desktop {
|
||||
@include desktop {
|
||||
display: #{$display} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-#{$display}-desktop-only {
|
||||
@include desktop-only {
|
||||
display: #{$display} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-#{$display}-widescreen {
|
||||
@include widescreen {
|
||||
display: #{$display} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Float
|
||||
|
||||
.is-clearfix {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.is-pulled-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.is-pulled-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
// Overflow
|
||||
|
||||
.is-clipped {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
// Overlay
|
||||
|
||||
.is-overlay {
|
||||
@include overlay;
|
||||
}
|
||||
|
||||
// Text
|
||||
|
||||
.has-text-centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.has-text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.has-text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
// Other
|
||||
|
||||
.is-disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.is-marginless {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.is-unselectable {
|
||||
@extend .unselectable;
|
||||
}
|
||||
7
client/scss/libs/bulma/bulma.sass
vendored
7
client/scss/libs/bulma/bulma.sass
vendored
@ -1,7 +0,0 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "utilities/utilities"
|
||||
@import "base/base"
|
||||
@import "elements/elements"
|
||||
@import "components/components"
|
||||
@import "layout/layout"
|
||||
@ -1,58 +0,0 @@
|
||||
.card-header
|
||||
align-items: stretch
|
||||
box-shadow: 0 1px 2px rgba($black, 0.1)
|
||||
display: flex
|
||||
min-height: 40px
|
||||
|
||||
.card-header-title
|
||||
align-items: flex-start
|
||||
color: $text-strong
|
||||
display: flex
|
||||
flex-grow: 1
|
||||
font-weight: bold
|
||||
padding: 10px
|
||||
|
||||
.card-header-icon
|
||||
align-items: center
|
||||
cursor: pointer
|
||||
display: flex
|
||||
justify-content: center
|
||||
width: 40px
|
||||
|
||||
.card-image
|
||||
display: block
|
||||
position: relative
|
||||
|
||||
.card-content
|
||||
padding: 20px
|
||||
.title + .subtitle
|
||||
margin-top: -20px
|
||||
|
||||
.card-footer
|
||||
border-top: 1px solid $border
|
||||
align-items: stretch
|
||||
display: flex
|
||||
|
||||
.card-footer-item
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-grow: 1
|
||||
justify-content: center
|
||||
padding: 10px
|
||||
&:not(:last-child)
|
||||
border-right: 1px solid $border
|
||||
|
||||
.card
|
||||
background-color: $white
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||
color: $text
|
||||
max-width: 100%
|
||||
position: relative
|
||||
width: 300px
|
||||
.media:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
// Modifiers
|
||||
&.is-fullwidth
|
||||
width: 100%
|
||||
&.is-rounded
|
||||
border-radius: $radius-large
|
||||
@ -1,14 +0,0 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "card"
|
||||
@import "grid"
|
||||
@import "highlight"
|
||||
@import "level"
|
||||
@import "media"
|
||||
@import "menu"
|
||||
@import "message"
|
||||
@import "modal"
|
||||
@import "nav"
|
||||
@import "pagination"
|
||||
@import "panel"
|
||||
@import "tabs"
|
||||
@ -1,282 +0,0 @@
|
||||
.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%
|
||||
+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%
|
||||
+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%
|
||||
+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%
|
||||
+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-grid
|
||||
// Responsiveness
|
||||
+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
|
||||
+tablet
|
||||
&:not(.is-desktop)
|
||||
display: flex
|
||||
+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
|
||||
+tablet
|
||||
&:not(.is-child)
|
||||
display: flex
|
||||
@for $i from 1 through 12
|
||||
&.is-#{$i}
|
||||
flex: none
|
||||
width: ($i / 12) * 100%
|
||||
@ -1,123 +0,0 @@
|
||||
.highlight
|
||||
background-color: #fdf6e3
|
||||
color: #586e75
|
||||
.c
|
||||
color: #93a1a1
|
||||
.err,
|
||||
.g
|
||||
color: #586e75
|
||||
.k
|
||||
color: #859900
|
||||
.l,
|
||||
.n
|
||||
color: #586e75
|
||||
.o
|
||||
color: #859900
|
||||
.x
|
||||
color: #cb4b16
|
||||
.p
|
||||
color: #586e75
|
||||
.cm
|
||||
color: #93a1a1
|
||||
.cp
|
||||
color: #859900
|
||||
.c1
|
||||
color: #93a1a1
|
||||
.cs
|
||||
color: #859900
|
||||
.gd
|
||||
color: #2aa198
|
||||
.ge
|
||||
color: #586e75
|
||||
font-style: italic
|
||||
.gr
|
||||
color: #dc322f
|
||||
.gh
|
||||
color: #cb4b16
|
||||
.gi
|
||||
color: #859900
|
||||
.go,
|
||||
.gp
|
||||
color: #586e75
|
||||
.gs
|
||||
color: #586e75
|
||||
font-weight: bold
|
||||
.gu
|
||||
color: #cb4b16
|
||||
.gt
|
||||
color: #586e75
|
||||
.kc
|
||||
color: #cb4b16
|
||||
.kd
|
||||
color: #268bd2
|
||||
.kn,
|
||||
.kp
|
||||
color: #859900
|
||||
.kr
|
||||
color: #268bd2
|
||||
.kt
|
||||
color: #dc322f
|
||||
.ld
|
||||
color: #586e75
|
||||
.m,
|
||||
.s
|
||||
color: #2aa198
|
||||
.na
|
||||
color: #B58900
|
||||
.nb
|
||||
color: #586e75
|
||||
.nc
|
||||
color: #268bd2
|
||||
.no
|
||||
color: #cb4b16
|
||||
.nd
|
||||
color: #268bd2
|
||||
.ni,
|
||||
.ne
|
||||
color: #cb4b16
|
||||
.nf
|
||||
color: #268bd2
|
||||
.nl,
|
||||
.nn,
|
||||
.nx,
|
||||
.py
|
||||
color: #586e75
|
||||
.nt,
|
||||
.nv
|
||||
color: #268bd2
|
||||
.ow
|
||||
color: #859900
|
||||
.w
|
||||
color: #586e75
|
||||
.mf,
|
||||
.mh,
|
||||
.mi,
|
||||
.mo
|
||||
color: #2aa198
|
||||
.sb
|
||||
color: #93a1a1
|
||||
.sc
|
||||
color: #2aa198
|
||||
.sd
|
||||
color: #586e75
|
||||
.s2
|
||||
color: #2aa198
|
||||
.se
|
||||
color: #cb4b16
|
||||
.sh
|
||||
color: #586e75
|
||||
.si,
|
||||
.sx
|
||||
color: #2aa198
|
||||
.sr
|
||||
color: #dc322f
|
||||
.s1,
|
||||
.ss
|
||||
color: #2aa198
|
||||
.bp,
|
||||
.vc,
|
||||
.vg,
|
||||
.vi
|
||||
color: #268bd2
|
||||
.il
|
||||
color: #2aa198
|
||||
@ -1,57 +0,0 @@
|
||||
.level-item
|
||||
.title,
|
||||
.subtitle
|
||||
margin-bottom: 0
|
||||
// Responsiveness
|
||||
+mobile
|
||||
&:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
|
||||
.level-left,
|
||||
.level-right
|
||||
.level-item
|
||||
&:not(:last-child)
|
||||
margin-right: 10px
|
||||
// Modifiers
|
||||
&.is-flexible
|
||||
flex-grow: 1
|
||||
|
||||
.level-left
|
||||
// Responsiveness
|
||||
+mobile
|
||||
& + .level-right
|
||||
margin-top: 20px
|
||||
+tablet
|
||||
align-items: center
|
||||
display: flex
|
||||
|
||||
.level-right
|
||||
// Responsiveness
|
||||
+tablet
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
|
||||
.level
|
||||
@extend .block
|
||||
align-items: center
|
||||
justify-content: space-between
|
||||
code
|
||||
border-radius: $radius
|
||||
img
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
// Modifiers
|
||||
&.is-mobile
|
||||
display: flex
|
||||
& > .level-item
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0
|
||||
&:not(.is-narrow)
|
||||
flex-grow: 1
|
||||
// Responsiveness
|
||||
+tablet
|
||||
display: flex
|
||||
& > .level-item
|
||||
&:not(.is-narrow)
|
||||
flex-grow: 1
|
||||
@ -1,58 +0,0 @@
|
||||
.media-number
|
||||
background-color: $background
|
||||
border-radius: 290486px
|
||||
display: inline-block
|
||||
font-size: $size-medium
|
||||
height: 32px
|
||||
line-height: 24px
|
||||
min-width: 32px
|
||||
padding: 4px 8px
|
||||
text-align: center
|
||||
vertical-align: top
|
||||
// Responsiveness
|
||||
+mobile
|
||||
margin-bottom: 10px
|
||||
+tablet
|
||||
margin-right: 10px
|
||||
|
||||
.media-left
|
||||
margin-right: 10px
|
||||
|
||||
.media-right
|
||||
margin-left: 10px
|
||||
|
||||
.media-content
|
||||
flex-grow: 1
|
||||
text-align: left
|
||||
|
||||
.media
|
||||
align-items: flex-start
|
||||
display: flex
|
||||
text-align: left
|
||||
.content:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
.media
|
||||
border-top: 1px solid rgba($border, 0.5)
|
||||
display: flex
|
||||
padding-top: 10px
|
||||
.content:not(:last-child),
|
||||
.control:not(:last-child)
|
||||
margin-bottom: 5px
|
||||
.media
|
||||
padding-top: 5px
|
||||
& + .media
|
||||
margin-top: 5px
|
||||
& + .media
|
||||
border-top: 1px solid rgba($border, 0.5)
|
||||
margin-top: 10px
|
||||
padding-top: 10px
|
||||
// Sizes
|
||||
&.is-large
|
||||
& + .media
|
||||
margin-top: 20px
|
||||
padding-top: 20px
|
||||
// Responsiveness
|
||||
+tablet
|
||||
&.is-large
|
||||
.media-number
|
||||
margin-right: 20px
|
||||
@ -1,32 +0,0 @@
|
||||
.menu-nav
|
||||
a
|
||||
display: block
|
||||
padding: 5px 10px
|
||||
|
||||
.menu-list
|
||||
a
|
||||
border-radius: $radius-small
|
||||
color: $text
|
||||
display: block
|
||||
padding: 5px 10px
|
||||
&:hover
|
||||
background-color: $background
|
||||
color: $link
|
||||
// Modifiers
|
||||
&.is-active
|
||||
background-color: $link
|
||||
color: $link-invert
|
||||
li
|
||||
ul
|
||||
border-left: 1px solid $border
|
||||
margin: 10px
|
||||
padding-left: 10px
|
||||
|
||||
.menu-label
|
||||
color: $text-light
|
||||
font-size: $size-small
|
||||
letter-spacing: 1px
|
||||
margin-bottom: 5px
|
||||
text-transform: uppercase
|
||||
&:not(:first-child)
|
||||
margin-top: 20px
|
||||
@ -1,39 +0,0 @@
|
||||
.message-body
|
||||
border: 1px solid $border
|
||||
border-radius: $radius
|
||||
padding: 12px 15px
|
||||
strong
|
||||
color: inherit
|
||||
|
||||
.message-header
|
||||
background-color: $text
|
||||
border-radius: $radius $radius 0 0
|
||||
color: $text-invert
|
||||
padding: 7px 10px
|
||||
strong
|
||||
color: inherit
|
||||
& + .message-body
|
||||
border-radius: 0 0 $radius $radius
|
||||
border-top: none
|
||||
|
||||
.message
|
||||
@extend .block
|
||||
background-color: $background
|
||||
border-radius: $radius
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
$lightning: max((100% - lightness($color)) - 4%, 0%)
|
||||
$darkness: max(lightness($color) - 10%, lightness($color))
|
||||
&.is-#{$name}
|
||||
background-color: lighten($color, $lightning)
|
||||
.message-header
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
.message-body
|
||||
border-color: $color
|
||||
@if (colorLuminance($color) > 0.8)
|
||||
color: desaturate(lighten(darken($color, 100%), 40%), 40%)
|
||||
@else
|
||||
color: desaturate(lighten(darken($color, 100%), 50%), 30%)
|
||||
@ -1,75 +0,0 @@
|
||||
.modal-background
|
||||
+overlay
|
||||
background-color: rgba($black, 0.86)
|
||||
|
||||
.modal-content
|
||||
margin: 0 20px
|
||||
max-height: calc(100vh - 160px)
|
||||
overflow: auto
|
||||
position: relative
|
||||
width: 100%
|
||||
// Responsiveness
|
||||
+tablet
|
||||
margin: 0 auto
|
||||
max-height: calc(100vh - 40px)
|
||||
width: 640px
|
||||
|
||||
.modal-close
|
||||
@extend .delete
|
||||
background: none
|
||||
height: 40px
|
||||
position: fixed
|
||||
right: 20px
|
||||
top: 20px
|
||||
width: 40px
|
||||
|
||||
.modal-card
|
||||
@extend .modal-content
|
||||
background-color: $white
|
||||
border-radius: $radius-large
|
||||
display: flex
|
||||
flex-direction: column
|
||||
max-height: calc(100vh - 40px)
|
||||
overflow: hidden
|
||||
|
||||
.modal-card-head,
|
||||
.modal-card-foot
|
||||
align-items: center
|
||||
background-color: $background
|
||||
display: flex
|
||||
flex-shrink: 0
|
||||
justify-content: flex-start
|
||||
padding: 20px
|
||||
position: relative
|
||||
|
||||
.modal-card-head
|
||||
border-bottom: 1px solid $border
|
||||
|
||||
.modal-card-title
|
||||
color: $text-strong
|
||||
flex-grow: 1
|
||||
font-size: $size-4
|
||||
line-height: 1
|
||||
|
||||
.modal-card-foot
|
||||
border-top: 1px solid $border
|
||||
.button
|
||||
&:not(:last-child)
|
||||
margin-right: 10px
|
||||
|
||||
.modal-card-body
|
||||
flex-grow: 1
|
||||
overflow: auto
|
||||
padding: 20px
|
||||
|
||||
.modal
|
||||
+overlay
|
||||
align-items: center
|
||||
display: none
|
||||
justify-content: center
|
||||
overflow: hidden
|
||||
position: fixed
|
||||
z-index: 1986
|
||||
// Modifiers
|
||||
&.is-active
|
||||
display: flex
|
||||
@ -1,133 +0,0 @@
|
||||
// Components
|
||||
|
||||
.nav-toggle
|
||||
@extend .hamburger
|
||||
// Responsiveness
|
||||
+tablet
|
||||
display: none
|
||||
|
||||
.nav-item
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
padding: 10px
|
||||
a
|
||||
flex-grow: 1
|
||||
img
|
||||
max-height: 24px
|
||||
.button + .button
|
||||
margin-left: 10px
|
||||
.tag
|
||||
&:first-child
|
||||
margin-right: 5px
|
||||
&:last-child
|
||||
margin-left: 5px
|
||||
// Responsiveness
|
||||
+mobile
|
||||
justify-content: flex-start
|
||||
|
||||
.nav-item a,
|
||||
a.nav-item
|
||||
color: $text
|
||||
&:hover
|
||||
color: $link-hover
|
||||
// Modifiers
|
||||
&.is-active
|
||||
color: $link-active
|
||||
&.is-tab
|
||||
border-bottom: 1px solid transparent
|
||||
border-top: 1px solid transparent
|
||||
padding-left: 12px
|
||||
padding-right: 12px
|
||||
&:hover
|
||||
border-bottom: 1px solid $link
|
||||
border-top: 1px solid transparent
|
||||
&.is-active
|
||||
border-bottom: 3px solid $link
|
||||
border-top: 3px solid transparent
|
||||
color: $link
|
||||
|
||||
// Containers
|
||||
|
||||
.nav-menu
|
||||
// Responsiveness
|
||||
+mobile
|
||||
background-color: $white
|
||||
box-shadow: 0 4px 7px rgba($black, 0.1)
|
||||
left: 0
|
||||
display: none
|
||||
right: 0
|
||||
top: 100%
|
||||
position: absolute
|
||||
.nav-item
|
||||
border-top: 1px solid rgba($border, 0.5)
|
||||
padding: 10px
|
||||
&.is-active
|
||||
display: block
|
||||
+tablet-only
|
||||
padding-right: 20px
|
||||
|
||||
.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
|
||||
// Responsiveness
|
||||
+tablet
|
||||
align-items: stretch
|
||||
display: flex
|
||||
flex-basis: 0
|
||||
flex-grow: 1
|
||||
justify-content: flex-end
|
||||
|
||||
// Main container
|
||||
|
||||
.nav
|
||||
align-items: stretch
|
||||
background-color: $white
|
||||
display: flex
|
||||
min-height: $nav-height
|
||||
position: relative
|
||||
text-align: center
|
||||
z-index: 2
|
||||
& > .container
|
||||
align-items: stretch
|
||||
display: flex
|
||||
min-height: $nav-height
|
||||
width: 100%
|
||||
& > .nav-left
|
||||
& > .nav-item:first-child:not(.is-tab)
|
||||
padding-left: 0
|
||||
& > .nav-right
|
||||
& > .nav-item:last-child:not(.is-tab)
|
||||
padding-right: 0
|
||||
.container > &
|
||||
& > .nav-left
|
||||
& > .nav-item:first-child:not(.is-tab)
|
||||
padding-left: 0
|
||||
& > .nav-right
|
||||
& > .nav-item:last-child:not(.is-tab)
|
||||
padding-right: 0
|
||||
// Modifiers
|
||||
&.has-shadow
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1)
|
||||
// Responsiveness
|
||||
+touch
|
||||
& > .container,
|
||||
.container > &
|
||||
& > .nav-left
|
||||
& > .nav-item.is-brand:first-child
|
||||
padding-left: 20px
|
||||
@ -1,197 +0,0 @@
|
||||
// Components
|
||||
|
||||
.nav-toggle {
|
||||
@extend .hamburger;
|
||||
|
||||
// Responsiveness
|
||||
@include tablet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
|
||||
a {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 24px;
|
||||
}
|
||||
|
||||
.button + .button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
&:first-child {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsiveness
|
||||
@include mobile {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item a,
|
||||
a.nav-item {
|
||||
color: $text;
|
||||
|
||||
&:hover {
|
||||
color: $link-hover;
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
&.is-active {
|
||||
color: $link-active;
|
||||
}
|
||||
|
||||
&.is-tab {
|
||||
border-bottom: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px solid $link;
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border-bottom: 3px solid $link;
|
||||
border-top: 3px solid transparent;
|
||||
color: $link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.nav-menu {
|
||||
// Responsiveness
|
||||
@include mobile {
|
||||
background-color: $white;
|
||||
box-shadow: 0 4px 7px rgba($black, 0.1);
|
||||
left: 0;
|
||||
display: none;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
position: absolute;
|
||||
|
||||
.nav-item {
|
||||
border-top: 1px solid rgba($border, 0.5);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include tablet-only {
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
// Responsiveness
|
||||
@include tablet {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
// Main container
|
||||
|
||||
.nav {
|
||||
align-items: stretch;
|
||||
background-color: $white;
|
||||
display: flex;
|
||||
min-height: $nav-height;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
|
||||
& > .container {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
min-height: $nav-height;
|
||||
width: 100%;
|
||||
|
||||
& > .nav-left {
|
||||
& > .nav-item:first-child:not(.is-tab) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > .nav-right {
|
||||
& > .nav-item:last-child:not(.is-tab) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container > & {
|
||||
& > .nav-left {
|
||||
& > .nav-item:first-child:not(.is-tab) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > .nav-right {
|
||||
& > .nav-item:last-child:not(.is-tab) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
&.has-shadow {
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1);
|
||||
}
|
||||
|
||||
// Responsiveness
|
||||
@include touch {
|
||||
& > .container,
|
||||
.container > & {
|
||||
& > .nav-left {
|
||||
& > .nav-item.is-brand:first-child {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
.pagination
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
text-align: center
|
||||
a
|
||||
display: block
|
||||
min-width: 32px
|
||||
padding: 3px 8px
|
||||
span
|
||||
color: $text-light
|
||||
display: block
|
||||
margin: 0 4px
|
||||
li
|
||||
margin: 0 2px
|
||||
ul
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-grow: 1
|
||||
justify-content: center
|
||||
// Responsiveness
|
||||
+mobile
|
||||
flex-wrap: wrap
|
||||
& > a
|
||||
width: calc(50% - 5px)
|
||||
&:not(:first-child)
|
||||
margin-left: 10px
|
||||
li
|
||||
flex-grow: 1
|
||||
ul
|
||||
margin-top: 10px
|
||||
+tablet
|
||||
& > a
|
||||
&:not(:first-child)
|
||||
order: 1
|
||||
@ -1,57 +0,0 @@
|
||||
.panel-icon
|
||||
+fa(14px, 16px)
|
||||
color: $text-light
|
||||
float: left
|
||||
margin: 0 4px 0 -2px
|
||||
.fa
|
||||
font-size: inherit
|
||||
line-height: inherit
|
||||
|
||||
.panel-heading
|
||||
background-color: $background
|
||||
border-bottom: 1px solid $border
|
||||
border-radius: 4px 4px 0 0
|
||||
color: $text-strong
|
||||
font-size: $size-medium
|
||||
font-weight: 300
|
||||
padding: 10px
|
||||
|
||||
.panel-list
|
||||
a
|
||||
color: $text
|
||||
&:hover
|
||||
color: $link
|
||||
|
||||
.panel-tabs
|
||||
display: flex
|
||||
font-size: $size-small
|
||||
padding: 5px 10px 0
|
||||
justify-content: center
|
||||
a
|
||||
border-bottom: 1px solid $border
|
||||
margin-bottom: -1px
|
||||
padding: 5px
|
||||
// Modifiers
|
||||
&.is-active
|
||||
border-bottom-color: $link-active-border
|
||||
color: $link-active
|
||||
&:not(:last-child)
|
||||
border-bottom: 1px solid $border
|
||||
|
||||
.panel-block
|
||||
color: $text-strong
|
||||
display: block
|
||||
line-height: 16px
|
||||
padding: 10px
|
||||
&:not(:last-child)
|
||||
border-bottom: 1px solid $border
|
||||
|
||||
a.panel-block
|
||||
&:hover
|
||||
background-color: $background
|
||||
|
||||
.panel
|
||||
border: 1px solid $border
|
||||
border-radius: $radius-large
|
||||
&:not(:last-child)
|
||||
margin-bottom: 20px
|
||||
@ -1,129 +0,0 @@
|
||||
.tabs
|
||||
@extend .block
|
||||
@extend .unselectable
|
||||
align-items: stretch
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
line-height: 24px
|
||||
overflow: hidden
|
||||
overflow-x: auto
|
||||
white-space: nowrap
|
||||
a
|
||||
align-items: center
|
||||
border-bottom: 1px solid $border
|
||||
color: $text
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin-bottom: -1px
|
||||
padding: 6px 12px
|
||||
vertical-align: top
|
||||
&:hover
|
||||
border-bottom-color: $text-strong
|
||||
color: $text-strong
|
||||
li
|
||||
display: block
|
||||
&.is-active
|
||||
a
|
||||
border-bottom-color: $link
|
||||
color: $link
|
||||
ul
|
||||
align-items: center
|
||||
border-bottom: 1px solid $border
|
||||
display: flex
|
||||
flex-grow: 1
|
||||
justify-content: flex-start
|
||||
&.is-left
|
||||
padding-right: 10px
|
||||
&.is-center
|
||||
flex: none
|
||||
justify-content: center
|
||||
padding-left: 10px
|
||||
padding-right: 10px
|
||||
&.is-right
|
||||
justify-content: flex-end
|
||||
padding-left: 10px
|
||||
.icon
|
||||
&:first-child
|
||||
margin-right: 8px
|
||||
&:last-child
|
||||
margin-left: 8px
|
||||
// Alignment
|
||||
&.is-centered
|
||||
ul
|
||||
justify-content: center
|
||||
&.is-right
|
||||
ul
|
||||
justify-content: flex-end
|
||||
// Styles
|
||||
&.is-boxed
|
||||
a
|
||||
border: 1px solid transparent
|
||||
border-radius: $radius $radius 0 0
|
||||
padding-bottom: 5px
|
||||
padding-top: 5px
|
||||
&:hover
|
||||
background-color: $background
|
||||
border-bottom-color: $border
|
||||
li
|
||||
&.is-active
|
||||
a
|
||||
background-color: $white
|
||||
border-color: $border
|
||||
border-bottom-color: transparent !important
|
||||
&.is-fullwidth
|
||||
li
|
||||
flex-grow: 1
|
||||
&.is-toggle
|
||||
a
|
||||
border: 1px solid $border
|
||||
margin-bottom: 0
|
||||
padding-bottom: 5px
|
||||
padding-top: 5px
|
||||
position: relative
|
||||
&:hover
|
||||
background-color: $background
|
||||
border-color: $border-hover
|
||||
z-index: 2
|
||||
li
|
||||
& + li
|
||||
margin-left: -1px
|
||||
&:first-child a
|
||||
border-radius: $radius 0 0 $radius
|
||||
&:last-child a
|
||||
border-radius: 0 $radius $radius 0
|
||||
&.is-active
|
||||
a
|
||||
background-color: $primary
|
||||
border-color: $primary
|
||||
color: $primary-invert
|
||||
z-index: 1
|
||||
ul
|
||||
border-bottom: none
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
a
|
||||
padding: 2px 8px
|
||||
&.is-boxed,
|
||||
&.is-toggle
|
||||
a
|
||||
padding-bottom: 1px
|
||||
padding-top: 1px
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
a
|
||||
padding: 10px 16px
|
||||
&.is-boxed,
|
||||
&.is-toggle
|
||||
a
|
||||
padding-bottom: 9px
|
||||
padding-top: 9px
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
a
|
||||
padding: 14px 20px
|
||||
&.is-boxed,
|
||||
&.is-toggle
|
||||
a
|
||||
padding-bottom: 13px
|
||||
padding-top: 13px
|
||||
@ -1,14 +0,0 @@
|
||||
.box
|
||||
@extend .block
|
||||
background-color: $white
|
||||
border-radius: $radius-large
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||
display: block
|
||||
padding: 20px
|
||||
|
||||
a.box
|
||||
&:hover,
|
||||
&:focus
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
|
||||
&:active
|
||||
box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
|
||||
@ -1,110 +0,0 @@
|
||||
=button-small
|
||||
border-radius: $radius-small
|
||||
font-size: 11px
|
||||
height: 24px
|
||||
line-height: 16px
|
||||
padding-left: 6px
|
||||
padding-right: 6px
|
||||
=button-medium
|
||||
font-size: 18px
|
||||
height: 40px
|
||||
padding-left: 14px
|
||||
padding-right: 14px
|
||||
=button-large
|
||||
font-size: 22px
|
||||
height: 48px
|
||||
padding-left: 20px
|
||||
padding-right: 20px
|
||||
|
||||
.button
|
||||
+control
|
||||
@extend .unselectable
|
||||
justify-content: center
|
||||
padding-left: 10px
|
||||
padding-right: 10px
|
||||
text-align: center
|
||||
white-space: nowrap
|
||||
strong
|
||||
color: inherit
|
||||
small
|
||||
display: block
|
||||
font-size: $size-small
|
||||
line-height: 1
|
||||
margin-top: 5px
|
||||
.icon,
|
||||
.tag
|
||||
&:first-child
|
||||
margin-left: -2px
|
||||
margin-right: 4px
|
||||
&:last-child
|
||||
margin-left: 4px
|
||||
margin-right: -2px
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.is-active
|
||||
color: $control-hover
|
||||
&:active
|
||||
box-shadow: inset 0 1px 2px rgba($black, 0.2)
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.is-active
|
||||
background-color: darken($color, 10%)
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:active
|
||||
border-color: transparent
|
||||
&.is-inverted
|
||||
background-color: $color-invert
|
||||
color: $color
|
||||
&:hover
|
||||
background-color: darken($color-invert, 5%)
|
||||
&.is-loading
|
||||
&:after
|
||||
border-color: transparent transparent $color-invert $color-invert !important
|
||||
&.is-outlined
|
||||
background-color: transparent
|
||||
border-color: $color
|
||||
color: $color
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: $color
|
||||
border-color: $color
|
||||
color: $color-invert
|
||||
&.is-link
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
color: $text
|
||||
text-decoration: underline
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: $border
|
||||
color: $text-strong
|
||||
// Sizes
|
||||
&.is-small
|
||||
+button-small
|
||||
&.is-medium
|
||||
+button-medium
|
||||
&.is-large
|
||||
+button-large
|
||||
// Modifiers
|
||||
&[disabled],
|
||||
&.is-disabled
|
||||
opacity: 0.5
|
||||
&.is-fullwidth
|
||||
display: flex
|
||||
width: 100%
|
||||
&.is-loading
|
||||
color: transparent !important
|
||||
pointer-events: none
|
||||
&:after
|
||||
@extend .loader
|
||||
+center(16px)
|
||||
position: absolute !important
|
||||
@ -1,73 +0,0 @@
|
||||
.content
|
||||
@extend .block
|
||||
// Inline
|
||||
a:not(.button)
|
||||
border-bottom: 1px solid $border
|
||||
&:visited
|
||||
color: $link-visited
|
||||
&:hover
|
||||
border-bottom-color: $link
|
||||
li + li
|
||||
margin-top: 0.25em
|
||||
// Block
|
||||
blockquote,
|
||||
p,
|
||||
ol,
|
||||
ul
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1em
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
color: $text-strong
|
||||
font-weight: 300
|
||||
line-height: 1.125
|
||||
margin-bottom: 20px
|
||||
h1,
|
||||
h2,
|
||||
h3
|
||||
&:not(:first-child)
|
||||
margin-top: 40px
|
||||
blockquote
|
||||
background-color: $background
|
||||
border-left: 5px solid $border
|
||||
padding: 1.5em
|
||||
h1
|
||||
font-size: 2em
|
||||
h2
|
||||
font-size: 1.75em
|
||||
h3
|
||||
font-size: 1.5em
|
||||
h4
|
||||
font-size: 1.25em
|
||||
h5
|
||||
font-size: 1.125em
|
||||
h6
|
||||
font-size: 1em
|
||||
ol
|
||||
list-style: decimal outside
|
||||
margin-left: 2em
|
||||
margin-right: 2em
|
||||
margin-top: 1em
|
||||
ul
|
||||
list-style: disc outside
|
||||
margin-left: 2em
|
||||
margin-right: 2em
|
||||
margin-top: 1em
|
||||
ul
|
||||
list-style-type: circle
|
||||
margin-top: 0.5em
|
||||
ul
|
||||
list-style-type: square
|
||||
// Sizes
|
||||
&.is-medium
|
||||
font-size: $size-5
|
||||
code
|
||||
font-size: $size-6
|
||||
&.is-large
|
||||
font-size: $size-4
|
||||
code
|
||||
font-size: $size-5
|
||||
@ -1,13 +0,0 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "box"
|
||||
@import "button"
|
||||
@import "content"
|
||||
@import "form"
|
||||
@import "image"
|
||||
@import "notification"
|
||||
@import "progress"
|
||||
@import "table"
|
||||
@import "title"
|
||||
|
||||
@import "other"
|
||||
@ -1,252 +0,0 @@
|
||||
=form-control
|
||||
+control
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
border-color: $color
|
||||
|
||||
.input
|
||||
+form-control
|
||||
box-shadow: inset 0 1px 2px rgba($black, 0.1)
|
||||
max-width: 100%
|
||||
width: 100%
|
||||
&[type="search"]
|
||||
border-radius: 290486px
|
||||
// Sizes
|
||||
&.is-small
|
||||
+control-small
|
||||
&.is-medium
|
||||
+control-medium
|
||||
&.is-large
|
||||
+control-large
|
||||
// Modifiers
|
||||
&.is-fullwidth
|
||||
display: block
|
||||
width: 100%
|
||||
&.is-inline
|
||||
display: inline
|
||||
width: auto
|
||||
|
||||
.textarea
|
||||
@extend .input
|
||||
display: block
|
||||
line-height: 1.2
|
||||
max-height: 600px
|
||||
max-width: 100%
|
||||
min-height: 120px
|
||||
min-width: 100%
|
||||
padding: 10px
|
||||
resize: vertical
|
||||
|
||||
%control-with-element
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
line-height: 16px
|
||||
position: relative
|
||||
vertical-align: top
|
||||
input
|
||||
cursor: pointer
|
||||
&:hover
|
||||
color: $control-hover
|
||||
&.is-disabled
|
||||
color: $text-light
|
||||
pointer-events: none
|
||||
input
|
||||
pointer-events: none
|
||||
|
||||
.checkbox
|
||||
@extend %control-with-element
|
||||
|
||||
.radio
|
||||
@extend %control-with-element
|
||||
& + .radio
|
||||
margin-left: 10px
|
||||
|
||||
.select
|
||||
display: inline-block
|
||||
height: 32px
|
||||
position: relative
|
||||
vertical-align: top
|
||||
select
|
||||
+form-control
|
||||
cursor: pointer
|
||||
display: block
|
||||
outline: none
|
||||
padding-right: 36px
|
||||
&:hover
|
||||
border-color: $control-hover-border
|
||||
&::ms-expand
|
||||
display: none
|
||||
&.is-fullwidth
|
||||
width: 100%
|
||||
select
|
||||
width: 100%
|
||||
&:after
|
||||
+arrow($link)
|
||||
margin-top: -6px
|
||||
right: 16px
|
||||
top: 50%
|
||||
&:hover
|
||||
&:after
|
||||
border-color: $link-hover
|
||||
&.is-small
|
||||
height: 24px
|
||||
select
|
||||
+control-small
|
||||
padding-right: 28px
|
||||
&.is-medium
|
||||
height: 40px
|
||||
select
|
||||
+control-medium
|
||||
padding-right: 44px
|
||||
&.is-large
|
||||
height: 48px
|
||||
select
|
||||
+control-large
|
||||
padding-right: 52px
|
||||
|
||||
.label
|
||||
color: $text-strong
|
||||
display: block
|
||||
font-weight: bold
|
||||
&:not(:last-child)
|
||||
margin-bottom: 5px
|
||||
|
||||
.help
|
||||
display: block
|
||||
font-size: $size-small
|
||||
margin-top: 5px
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
color: $color
|
||||
|
||||
// Containers
|
||||
|
||||
.control-label
|
||||
+mobile
|
||||
margin-bottom: 5px
|
||||
+tablet
|
||||
flex-grow: 1
|
||||
margin-right: 20px
|
||||
padding-top: 7px
|
||||
text-align: right
|
||||
|
||||
.control
|
||||
position: relative
|
||||
text-align: left
|
||||
&:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
// Modifiers
|
||||
&.has-addons
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
.button,
|
||||
.input,
|
||||
.select
|
||||
border-radius: 0
|
||||
margin-right: -1px
|
||||
width: auto
|
||||
&:hover
|
||||
z-index: 2
|
||||
&:active,
|
||||
&:focus
|
||||
z-index: 3
|
||||
&:first-child
|
||||
border-radius: $radius 0 0 $radius
|
||||
select
|
||||
border-radius: $radius 0 0 $radius
|
||||
&:last-child
|
||||
border-radius: 0 $radius $radius 0
|
||||
select
|
||||
border-radius: 0 $radius $radius 0
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
&.has-addons-centered
|
||||
justify-content: center
|
||||
&.has-addons-right
|
||||
justify-content: flex-end
|
||||
&.has-addons-fullwidth
|
||||
.button,
|
||||
.input,
|
||||
.select
|
||||
flex-grow: 1
|
||||
&.has-icon
|
||||
& > .fa
|
||||
+fa(14px, 24px)
|
||||
color: $text-light
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
top: 4px
|
||||
z-index: 4
|
||||
.input
|
||||
&:focus + .fa
|
||||
color: $text-strong
|
||||
&.is-small + .fa
|
||||
font-size: 10.5px
|
||||
top: 0
|
||||
&.is-medium + .fa
|
||||
font-size: 21px
|
||||
top: 8px
|
||||
&.is-large + .fa
|
||||
font-size: 21px
|
||||
top: 12px
|
||||
&:not(.has-icon-right)
|
||||
& > .fa
|
||||
left: 4px
|
||||
.input
|
||||
padding-left: 32px
|
||||
&.is-small
|
||||
padding-left: 24px
|
||||
& + .fa
|
||||
left: 0
|
||||
&.is-medium
|
||||
padding-left: 40px
|
||||
& + .fa
|
||||
left: 8px
|
||||
&.is-large
|
||||
padding-left: 48px
|
||||
& + .fa
|
||||
left: 12px
|
||||
&.has-icon-right
|
||||
& > .fa
|
||||
right: 4px
|
||||
.input
|
||||
padding-right: 32px
|
||||
&.is-small
|
||||
padding-right: 24px
|
||||
& + .fa
|
||||
right: 0
|
||||
&.is-medium
|
||||
padding-right: 40px
|
||||
& + .fa
|
||||
right: 8px
|
||||
&.is-large
|
||||
padding-right: 48px
|
||||
& + .fa
|
||||
right: 12px
|
||||
&.is-grouped
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
& > .control
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0
|
||||
margin-right: 10px
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
&.is-grouped-centered
|
||||
justify-content: center
|
||||
&.is-grouped-right
|
||||
justify-content: flex-end
|
||||
&.is-horizontal
|
||||
+tablet
|
||||
display: flex
|
||||
& > .control
|
||||
display: flex
|
||||
flex-grow: 5
|
||||
&.is-loading
|
||||
&:after
|
||||
@extend .loader
|
||||
position: absolute !important
|
||||
right: 8px
|
||||
top: 8px
|
||||
@ -1,36 +0,0 @@
|
||||
$dimensions: 16 24 32 48 64 96 128
|
||||
|
||||
.image
|
||||
display: block
|
||||
position: relative
|
||||
img
|
||||
display: block
|
||||
height: auto
|
||||
width: 100%
|
||||
// Ratio
|
||||
&.is-square,
|
||||
&.is-1by1,
|
||||
&.is-4by3,
|
||||
&.is-3by2,
|
||||
&.is-16by9,
|
||||
&.is-2by1
|
||||
img
|
||||
+overlay
|
||||
height: 100%
|
||||
width: 100%
|
||||
&.is-square,
|
||||
&.is-1by1
|
||||
padding-top: 100%
|
||||
&.is-4by3
|
||||
padding-top: 75%
|
||||
&.is-3by2
|
||||
padding-top: 66.6666%
|
||||
&.is-16by9
|
||||
padding-top: 56.25%
|
||||
&.is-2by1
|
||||
padding-top: 50%
|
||||
// Sizes
|
||||
@each $dimension in $dimensions
|
||||
&.is-#{$dimension}x#{$dimension}
|
||||
height: $dimension * 1px
|
||||
width: $dimension * 1px
|
||||
@ -1,21 +0,0 @@
|
||||
.notification
|
||||
@extend .block
|
||||
+clearfix
|
||||
background-color: $background
|
||||
border-radius: $radius
|
||||
padding: 16px 20px
|
||||
position: relative
|
||||
.delete
|
||||
border-radius: 0 $radius
|
||||
float: right
|
||||
margin: -16px -20px 0 20px
|
||||
.subtitle,
|
||||
.title
|
||||
color: inherit
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
@ -1,187 +0,0 @@
|
||||
.delete
|
||||
@extend .unselectable
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
background-color: rgba($black, 0.2)
|
||||
border: none
|
||||
border-radius: 290486px
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
height: 24px
|
||||
position: relative
|
||||
vertical-align: top
|
||||
width: 24px
|
||||
&:before,
|
||||
&:after
|
||||
background-color: $white
|
||||
content: ""
|
||||
display: block
|
||||
height: 2px
|
||||
left: 50%
|
||||
margin-left: -25%
|
||||
margin-top: -1px
|
||||
position: absolute
|
||||
top: 50%
|
||||
width: 50%
|
||||
&:before
|
||||
transform: rotate(45deg)
|
||||
&:after
|
||||
transform: rotate(-45deg)
|
||||
&:hover
|
||||
background-color: rgba($black, 0.5)
|
||||
// Sizes
|
||||
&.is-small
|
||||
height: 16px
|
||||
width: 16px
|
||||
&.is-medium
|
||||
height: 32px
|
||||
width: 32px
|
||||
&.is-large
|
||||
height: 40px
|
||||
width: 40px
|
||||
|
||||
.icon
|
||||
+fa(21px, 24px)
|
||||
.fa
|
||||
font-size: inherit
|
||||
line-height: inherit
|
||||
// Sizes
|
||||
&.is-small
|
||||
+fa(14px, 16px)
|
||||
&.is-medium
|
||||
+fa(28px, 32px)
|
||||
&.is-large
|
||||
+fa(42px, 48px)
|
||||
|
||||
.hamburger
|
||||
cursor: pointer
|
||||
display: block
|
||||
height: $nav-height
|
||||
position: relative
|
||||
width: $nav-height
|
||||
span
|
||||
background-color: $text
|
||||
display: block
|
||||
height: 1px
|
||||
left: 50%
|
||||
margin-left: -7px
|
||||
position: absolute
|
||||
top: 50%
|
||||
transition: none $speed $easing
|
||||
transition-property: background, left, opacity, transform
|
||||
width: 15px
|
||||
&:nth-child(1)
|
||||
margin-top: -6px
|
||||
&:nth-child(2)
|
||||
margin-top: -1px
|
||||
&:nth-child(3)
|
||||
margin-top: 4px
|
||||
&:hover
|
||||
background-color: $background
|
||||
// Modifers
|
||||
&.is-active
|
||||
span
|
||||
background-color: $link
|
||||
&:nth-child(1)
|
||||
margin-left: -5px
|
||||
transform: rotate(45deg)
|
||||
transform-origin: left top
|
||||
&:nth-child(2)
|
||||
opacity: 0
|
||||
&:nth-child(3)
|
||||
margin-left: -5px
|
||||
transform: rotate(-45deg)
|
||||
transform-origin: left bottom
|
||||
|
||||
.heading
|
||||
display: block
|
||||
font-size: 11px
|
||||
letter-spacing: 1px
|
||||
margin-bottom: 5px
|
||||
text-transform: uppercase
|
||||
|
||||
.highlight
|
||||
@extend .block
|
||||
font-size: 12px
|
||||
font-weight: normal
|
||||
max-width: 100%
|
||||
overflow: hidden
|
||||
padding: 0
|
||||
pre
|
||||
overflow: auto
|
||||
max-width: 100%
|
||||
|
||||
.loader
|
||||
animation: spin-around 500ms infinite linear
|
||||
border: 2px solid $border
|
||||
border-radius: 290486px
|
||||
border-right-color: transparent
|
||||
border-top-color: transparent
|
||||
content: ""
|
||||
display: block
|
||||
height: 16px
|
||||
position: relative
|
||||
width: 16px
|
||||
|
||||
.number
|
||||
background-color: $background
|
||||
border-radius: 290486px
|
||||
display: inline-block
|
||||
font-size: $size-medium
|
||||
vertical-align: top
|
||||
|
||||
.tag
|
||||
align-items: center
|
||||
background-color: $background
|
||||
border-radius: 290486px
|
||||
color: $text
|
||||
display: inline-flex
|
||||
font-size: 12px
|
||||
height: 24px
|
||||
justify-content: center
|
||||
line-height: 16px
|
||||
padding-left: 10px
|
||||
padding-right: 10px
|
||||
vertical-align: top
|
||||
white-space: nowrap
|
||||
.delete
|
||||
margin-left: 4px
|
||||
margin-right: -6px
|
||||
&:not(.is-large)
|
||||
.delete
|
||||
@extend .delete.is-small
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
height: 20px
|
||||
padding-left: 8px
|
||||
padding-right: 8px
|
||||
&.is-medium
|
||||
font-size: $size-normal
|
||||
height: 32px
|
||||
padding-left: 14px
|
||||
padding-right: 14px
|
||||
&.is-large
|
||||
font-size: $size-5
|
||||
height: 40px
|
||||
line-height: 24px
|
||||
padding-left: 18px
|
||||
padding-right: 18px
|
||||
.delete
|
||||
margin-left: 4px
|
||||
margin-right: -8px
|
||||
|
||||
.unselectable
|
||||
-webkit-touch-callout: none
|
||||
-webkit-user-select: none
|
||||
-moz-user-select: none
|
||||
-ms-user-select: none
|
||||
user-select: none
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
.progress
|
||||
@extend .block
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
border: none
|
||||
border-radius: 290486px
|
||||
display: block
|
||||
height: 12px
|
||||
overflow: hidden
|
||||
padding: 0
|
||||
width: 100%
|
||||
&::-webkit-progress-bar
|
||||
background-color: $border
|
||||
&::-webkit-progress-value
|
||||
background-color: $text
|
||||
&::-moz-progress-bar
|
||||
background-color: $text
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
&::-webkit-progress-value
|
||||
background-color: $color
|
||||
&::-moz-progress-bar
|
||||
background-color: $color
|
||||
// Sizes
|
||||
&.is-small
|
||||
height: 8px
|
||||
&.is-medium
|
||||
height: 16px
|
||||
&.is-large
|
||||
height: 20px
|
||||
@ -1,91 +0,0 @@
|
||||
.table
|
||||
background-color: $white
|
||||
color: $text-strong
|
||||
margin-bottom: 20px
|
||||
width: 100%
|
||||
td,
|
||||
th
|
||||
border: 1px solid $border
|
||||
border-width: 0 0 1px
|
||||
padding: 8px 10px
|
||||
vertical-align: top
|
||||
// Modifiers
|
||||
&.is-icon
|
||||
padding: 5px
|
||||
text-align: center
|
||||
white-space: nowrap
|
||||
width: 1%
|
||||
.fa
|
||||
+fa(21px, 24px)
|
||||
&.is-link
|
||||
padding: 0
|
||||
& > a
|
||||
padding: 5px
|
||||
&.is-link
|
||||
padding: 0
|
||||
& > a
|
||||
display: block
|
||||
padding: 8px 10px
|
||||
&:hover
|
||||
background-color: $link
|
||||
color: $link-invert
|
||||
&.is-narrow
|
||||
white-space: nowrap
|
||||
width: 1%
|
||||
th
|
||||
color: $text-strong
|
||||
text-align: left
|
||||
tr
|
||||
&:hover
|
||||
background-color: $background
|
||||
color: $text-strong
|
||||
thead
|
||||
td,
|
||||
th
|
||||
border-width: 0 0 2px
|
||||
color: $text-light
|
||||
tbody
|
||||
tr
|
||||
&:last-child
|
||||
td,
|
||||
th
|
||||
border-bottom-width: 0
|
||||
tfoot
|
||||
td,
|
||||
th
|
||||
border-width: 2px 0 0
|
||||
color: $text-light
|
||||
// Modifiers
|
||||
&.is-bordered
|
||||
td,
|
||||
th
|
||||
border-width: 1px
|
||||
tr
|
||||
&:last-child
|
||||
td,
|
||||
th
|
||||
border-bottom-width: 1px
|
||||
&.is-narrow
|
||||
td,
|
||||
th
|
||||
padding: 5px 10px
|
||||
// Modifiers
|
||||
&.is-icon
|
||||
padding: 2px
|
||||
&.is-link
|
||||
padding: 0
|
||||
& > a
|
||||
padding: 2px
|
||||
&.is-link
|
||||
padding: 0
|
||||
& > a
|
||||
padding: 5px 10px
|
||||
&.is-striped
|
||||
tbody
|
||||
tr
|
||||
&:hover
|
||||
background-color: darken($background, 2%)
|
||||
&:nth-child(2n)
|
||||
background-color: $background
|
||||
&:hover
|
||||
background-color: darken($background, 2%)
|
||||
@ -1,72 +0,0 @@
|
||||
.title,
|
||||
.subtitle
|
||||
@extend .block
|
||||
font-weight: $weight-title-normal
|
||||
word-break: break-word
|
||||
em,
|
||||
span
|
||||
font-weight: $weight-title-normal
|
||||
a
|
||||
&:hover
|
||||
border-bottom: 1px solid
|
||||
strong
|
||||
font-weight: $weight-title-bold
|
||||
.tag
|
||||
vertical-align: bottom
|
||||
|
||||
.title
|
||||
color: $text-strong
|
||||
font-size: $size-large
|
||||
line-height: 1
|
||||
code
|
||||
display: inline-block
|
||||
font-size: $size-large
|
||||
strong
|
||||
color: inherit
|
||||
& + .highlight
|
||||
margin-top: -10px
|
||||
& + .subtitle
|
||||
margin-top: -10px
|
||||
// Colors
|
||||
@each $size in $sizes
|
||||
$i: index($sizes, $size)
|
||||
&.is-#{$i}
|
||||
font-size: $size
|
||||
code
|
||||
font-size: nth($sizes, min($i + 1, 6))
|
||||
// Modifiers
|
||||
&.is-normal
|
||||
font-weight: 400
|
||||
strong
|
||||
font-weight: 700
|
||||
// Responsiveness
|
||||
+tablet
|
||||
& + .subtitle
|
||||
margin-top: -15px
|
||||
|
||||
.subtitle
|
||||
color: $text
|
||||
font-size: $size-medium
|
||||
line-height: 1.125
|
||||
code
|
||||
border-radius: $radius
|
||||
display: inline-block
|
||||
font-size: $size-normal
|
||||
padding: 2px 3px
|
||||
vertical-align: top
|
||||
strong
|
||||
color: $text-strong
|
||||
& + .title
|
||||
margin-top: -20px
|
||||
// Colors
|
||||
@each $size in $sizes
|
||||
$i: index($sizes, $size)
|
||||
&.is-#{$i}
|
||||
font-size: $size
|
||||
code
|
||||
font-size: nth($sizes, min($i + 1, 6))
|
||||
// Modifiers
|
||||
&.is-normal
|
||||
font-weight: 400
|
||||
strong
|
||||
font-weight: 700
|
||||
@ -1,13 +0,0 @@
|
||||
.footer
|
||||
background-color: $background
|
||||
padding: 40px 20px 80px
|
||||
a
|
||||
&,
|
||||
&:visited
|
||||
color: $text
|
||||
&:hover
|
||||
color: $text-strong
|
||||
&:not(.icon)
|
||||
border-bottom: 1px solid $border
|
||||
&:hover
|
||||
border-bottom-color: $link
|
||||
@ -1,146 +0,0 @@
|
||||
// Components
|
||||
|
||||
.hero-video
|
||||
+overlay
|
||||
overflow: hidden
|
||||
video
|
||||
left: 50%
|
||||
min-height: 100%
|
||||
min-width: 100%
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform: translate3d(-50%, -50%, 0)
|
||||
// Modifiers
|
||||
&.is-transparent
|
||||
opacity: 0.3
|
||||
// Responsiveness
|
||||
+mobile
|
||||
display: none
|
||||
|
||||
.hero-buttons
|
||||
margin-top: 20px
|
||||
// Responsiveness
|
||||
+mobile
|
||||
.button
|
||||
display: flex
|
||||
&:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
+tablet
|
||||
display: flex
|
||||
justify-content: center
|
||||
.button:not(:last-child)
|
||||
margin-right: 20px
|
||||
|
||||
// Containers
|
||||
|
||||
.hero-head,
|
||||
.hero-foot
|
||||
flex-shrink: 0
|
||||
|
||||
.hero-body
|
||||
flex-grow: 1
|
||||
padding: 40px 20px
|
||||
// Responsiveness
|
||||
+desktop
|
||||
padding-left: 0
|
||||
padding-right: 0
|
||||
|
||||
// Main container
|
||||
|
||||
.hero
|
||||
align-items: stretch
|
||||
background-color: $white
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: space-between
|
||||
.nav
|
||||
background: none
|
||||
box-shadow: 0 1px 0 rgba($border, 0.3)
|
||||
.tabs
|
||||
ul
|
||||
border-bottom: none
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
.title
|
||||
color: $color-invert
|
||||
a,
|
||||
strong
|
||||
color: inherit
|
||||
.subtitle
|
||||
color: rgba($color-invert, 0.7)
|
||||
a,
|
||||
strong
|
||||
color: $color-invert
|
||||
.nav
|
||||
box-shadow: 0 1px 0 rgba($color-invert, 0.2)
|
||||
.nav-menu
|
||||
+mobile
|
||||
background-color: $color
|
||||
a.nav-item,
|
||||
.nav-item a:not(.button)
|
||||
color: rgba($color-invert, 0.5)
|
||||
&:hover,
|
||||
&.is-active
|
||||
color: $color-invert
|
||||
.tabs
|
||||
a
|
||||
color: $color-invert
|
||||
opacity: 0.5
|
||||
&:hover
|
||||
opacity: 1
|
||||
li
|
||||
&.is-active a
|
||||
opacity: 1
|
||||
&.is-boxed,
|
||||
&.is-toggle
|
||||
a
|
||||
color: $color-invert
|
||||
&:hover
|
||||
background-color: rgba($black, 0.1)
|
||||
li.is-active a
|
||||
&,
|
||||
&:hover
|
||||
background-color: $color-invert
|
||||
border-color: $color-invert
|
||||
color: $color
|
||||
// Modifiers
|
||||
&.is-bold
|
||||
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
|
||||
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
|
||||
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
|
||||
// Responsiveness
|
||||
+mobile
|
||||
.nav-toggle
|
||||
span
|
||||
background-color: $color-invert
|
||||
&:hover
|
||||
background-color: rgba($black, 0.1)
|
||||
&.is-active
|
||||
span
|
||||
background-color: $color-invert
|
||||
.nav-menu
|
||||
.nav-item
|
||||
border-top-color: rgba($color-invert, 0.2)
|
||||
// Sizes
|
||||
&.is-medium
|
||||
+tablet
|
||||
.hero-body
|
||||
padding-bottom: 120px
|
||||
padding-top: 120px
|
||||
&.is-large
|
||||
+tablet
|
||||
.hero-body
|
||||
padding-bottom: 240px
|
||||
padding-top: 240px
|
||||
&.is-fullheight
|
||||
min-height: 100vh
|
||||
.hero-body
|
||||
align-items: center
|
||||
display: flex
|
||||
& > .container
|
||||
flex-grow: 1
|
||||
@ -1,5 +0,0 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "hero"
|
||||
@import "section"
|
||||
@import "footer"
|
||||
@ -1,10 +0,0 @@
|
||||
.section
|
||||
background-color: $white
|
||||
padding: 40px 20px
|
||||
// Responsiveness
|
||||
+desktop
|
||||
// Sizes
|
||||
&.is-medium
|
||||
padding: 120px 20px
|
||||
&.is-large
|
||||
padding: 240px 20px
|
||||
@ -1,5 +0,0 @@
|
||||
@keyframes spin-around
|
||||
from
|
||||
transform: rotate(0deg)
|
||||
to
|
||||
transform: rotate(359deg)
|
||||
@ -1,52 +0,0 @@
|
||||
=control
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
align-items: center
|
||||
background-color: $control-background
|
||||
border: 1px solid $control-border
|
||||
border-radius: $radius
|
||||
color: $control
|
||||
display: inline-flex
|
||||
font-size: $size-normal
|
||||
height: 32px
|
||||
justify-content: flex-start
|
||||
line-height: 24px
|
||||
padding-left: 8px
|
||||
padding-right: 8px
|
||||
position: relative
|
||||
vertical-align: top
|
||||
&:hover
|
||||
border-color: $control-hover-border
|
||||
&:active,
|
||||
&:focus,
|
||||
&.is-active
|
||||
border-color: $control-active-border
|
||||
outline: none
|
||||
&[disabled],
|
||||
&.is-disabled
|
||||
background-color: $background
|
||||
border-color: $control-border
|
||||
cursor: not-allowed
|
||||
pointer-events: none
|
||||
+placeholder
|
||||
color: rgba($control, 0.3)
|
||||
|
||||
=control-small
|
||||
border-radius: $radius-small
|
||||
font-size: 11px
|
||||
height: 24px
|
||||
line-height: 16px
|
||||
padding-left: 6px
|
||||
padding-right: 6px
|
||||
=control-medium
|
||||
font-size: 18px
|
||||
height: 40px
|
||||
line-height: 32px
|
||||
padding-left: 10px
|
||||
padding-right: 10px
|
||||
=control-large
|
||||
font-size: 24px
|
||||
height: 48px
|
||||
line-height: 40px
|
||||
padding-left: 12px
|
||||
padding-right: 12px
|
||||
@ -1,34 +0,0 @@
|
||||
@function powerNumber($number, $exp)
|
||||
$value: 1
|
||||
@if $exp > 0
|
||||
@for $i from 1 through $exp
|
||||
$value: $value * $number
|
||||
@else if $exp < 0
|
||||
@for $i from 1 through -$exp
|
||||
$value: $value / $number
|
||||
@return $value
|
||||
|
||||
@function colorLuminance($color)
|
||||
$color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
|
||||
@each $name, $value in $color-rgb
|
||||
$adjusted: 0
|
||||
$value: $value / 255
|
||||
@if $value < 0.03928
|
||||
$value: $value / 12.92
|
||||
@else
|
||||
$value: ($value + .055) / 1.055
|
||||
$value: powerNumber($value, 2)
|
||||
$color-rgb: map-merge($color-rgb, ($name: $value))
|
||||
@return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
|
||||
|
||||
@function closestEvenNumber($number)
|
||||
@if ($number % 2 == 0px)
|
||||
@return $number
|
||||
@else
|
||||
@return ($number + 1px)
|
||||
|
||||
@function findColorInvert($color)
|
||||
@if (colorLuminance($color) > 0.8)
|
||||
@return rgba($black, 0.5)
|
||||
@else
|
||||
@return white
|
||||
@ -1,94 +0,0 @@
|
||||
=arrow($color)
|
||||
border: 1px solid $color
|
||||
border-right: 0
|
||||
border-top: 0
|
||||
content: " "
|
||||
display: block
|
||||
height: 7px
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
transform: rotate(-45deg)
|
||||
width: 7px
|
||||
|
||||
=clearfix
|
||||
&:after
|
||||
clear: both
|
||||
content: " "
|
||||
display: table
|
||||
|
||||
=center($size)
|
||||
left: 50%
|
||||
margin-left: -($size / 2)
|
||||
margin-top: -($size / 2)
|
||||
position: absolute
|
||||
top: 50%
|
||||
|
||||
=fa($size, $dimensions)
|
||||
display: inline-block
|
||||
font-size: $size
|
||||
height: $dimensions
|
||||
line-height: $dimensions
|
||||
text-align: center
|
||||
vertical-align: top
|
||||
width: $dimensions
|
||||
|
||||
=overlay($offset: 0)
|
||||
bottom: $offset
|
||||
left: $offset
|
||||
position: absolute
|
||||
right: $offset
|
||||
top: $offset
|
||||
|
||||
=placeholder
|
||||
$placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
|
||||
@each $placeholder in $placeholders
|
||||
&:#{$placeholder}-placeholder
|
||||
@content
|
||||
|
||||
=replace($background, $width, $height)
|
||||
background-color: $background
|
||||
background-position: center center
|
||||
background-repeat: no-repeat
|
||||
background-size: $width $height
|
||||
display: block
|
||||
height: $height
|
||||
outline: none
|
||||
overflow: hidden
|
||||
text-indent: -290486px
|
||||
width: $width
|
||||
|
||||
=from($device)
|
||||
@media screen and (min-width: $device)
|
||||
@content
|
||||
|
||||
=until($device)
|
||||
@media screen and (max-width: $device - 1px)
|
||||
@content
|
||||
|
||||
=mobile
|
||||
@media screen and (max-width: $tablet - 1px)
|
||||
@content
|
||||
|
||||
=tablet
|
||||
@media screen and (min-width: $tablet)
|
||||
@content
|
||||
|
||||
=tablet-only
|
||||
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
|
||||
@content
|
||||
|
||||
=touch
|
||||
@media screen and (max-width: $desktop - 1px)
|
||||
@content
|
||||
|
||||
=desktop
|
||||
@media screen and (min-width: $desktop)
|
||||
@content
|
||||
|
||||
=desktop-only
|
||||
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
|
||||
@content
|
||||
|
||||
=widescreen
|
||||
@media screen and (min-width: $widescreen)
|
||||
@content
|
||||
@ -1,123 +0,0 @@
|
||||
@mixin arrow($color) {
|
||||
border: 1px solid $color;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
content: " ";
|
||||
display: block;
|
||||
height: 7px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
transform: rotate(-45deg);
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
@mixin clearfix {
|
||||
&:after {
|
||||
clear: both;
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin center($size) {
|
||||
left: 50%;
|
||||
margin-left: -($size / 2);
|
||||
margin-top: -($size / 2);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
@mixin fa($size, $dimensions) {
|
||||
display: inline-block;
|
||||
font-size: $size;
|
||||
height: $dimensions;
|
||||
line-height: $dimensions;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
width: $dimensions;
|
||||
}
|
||||
|
||||
@mixin overlay($offset: 0) {
|
||||
bottom: $offset;
|
||||
left: $offset;
|
||||
position: absolute;
|
||||
right: $offset;
|
||||
top: $offset;
|
||||
}
|
||||
|
||||
@mixin placeholder {
|
||||
$placeholders: ":-moz" ":-webkit-input" "-moz" "-ms-input";
|
||||
|
||||
@each $placeholder in $placeholders {
|
||||
&:#{$placeholder}-placeholder {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin replace($background, $width, $height) {
|
||||
background-color: $background;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: $width $height;
|
||||
display: block;
|
||||
height: $height;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
text-indent: -290486px;
|
||||
width: $width;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@ -1,174 +0,0 @@
|
||||
//
|
||||
// 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
|
||||
|
||||
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
|
||||
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.
|
||||
// don't forget to restore the bullets within content.
|
||||
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: collapse
|
||||
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
|
||||
|
||||
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
|
||||
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
|
||||
@ -1,8 +0,0 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "reset"
|
||||
@import "functions"
|
||||
@import "mixins"
|
||||
@import "animations"
|
||||
@import "controls"
|
||||
@import "variables"
|
||||
@ -1,153 +0,0 @@
|
||||
// 1. Initial variables
|
||||
|
||||
// Colors
|
||||
|
||||
$black: #111 !default
|
||||
$grey-darker: #222324 !default
|
||||
$grey-dark: #69707a !default
|
||||
$grey: #aeb1b5 !default
|
||||
$grey-light: #d3d6db !default
|
||||
$grey-lighter: #f5f7fa !default
|
||||
$white: #fff !default
|
||||
|
||||
$blue: #039BE5 !default
|
||||
$green: #7CB342 !default
|
||||
$orange: #FB8C00 !default
|
||||
$purple: #673AB7 !default
|
||||
$red: #E53935 !default
|
||||
$turquoise: #00ACC1 !default
|
||||
$yellow: #fce473 !default
|
||||
|
||||
// Typography
|
||||
|
||||
$family-monospace: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
$family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
||||
$size-1: 48px !default
|
||||
$size-2: 40px !default
|
||||
$size-3: 28px !default
|
||||
$size-4: 24px !default
|
||||
$size-5: 18px !default
|
||||
$size-6: 14px !default
|
||||
|
||||
$size-7: 11px !default
|
||||
|
||||
$weight-normal: 400 !default
|
||||
$weight-bold: 700 !default
|
||||
$weight-title-normal: 300 !default
|
||||
$weight-title-bold: 500 !default
|
||||
|
||||
// Breakpoints
|
||||
|
||||
$tablet: 769px !default
|
||||
$desktop: 980px !default
|
||||
$widescreen: 1180px !default
|
||||
|
||||
// Dimensions
|
||||
|
||||
$column-gap: 20px !default
|
||||
|
||||
$nav-height: 50px !default
|
||||
|
||||
// Miscellaneous
|
||||
|
||||
$easing: ease-out !default
|
||||
$radius-small: 2px !default
|
||||
$radius: 3px !default
|
||||
$radius-large: 5px !default
|
||||
$speed: 86ms !default
|
||||
|
||||
// 2. Primary colors
|
||||
|
||||
$primary: $turquoise !default
|
||||
|
||||
$info: $blue !default
|
||||
$success: $green !default
|
||||
$warning: $orange !default
|
||||
$danger: $red !default
|
||||
|
||||
$light: $grey-lighter !default
|
||||
$dark: $grey-dark !default
|
||||
|
||||
$text: $grey-dark !default
|
||||
|
||||
// 3. Generated variables
|
||||
|
||||
// Invert colors
|
||||
|
||||
$primary-invert: findColorInvert($primary) !default
|
||||
|
||||
$info-invert: findColorInvert($info) !default
|
||||
$success-invert: findColorInvert($success) !default
|
||||
$warning-invert: findColorInvert($warning) !default
|
||||
$danger-invert: findColorInvert($danger) !default
|
||||
|
||||
$light-invert: $dark !default
|
||||
$dark-invert: $light !default
|
||||
|
||||
// General colors
|
||||
|
||||
$body-background: $grey-lighter !default
|
||||
|
||||
$background: $grey-lighter !default
|
||||
|
||||
$border: $grey-light !default
|
||||
$border-hover: $grey !default
|
||||
|
||||
// Text colors
|
||||
|
||||
$text-invert: findColorInvert($text) !default
|
||||
$text-light: $grey !default
|
||||
$text-strong: $grey-darker !default
|
||||
|
||||
// Code colors
|
||||
|
||||
$code: $red !default
|
||||
$code-background: $background !default
|
||||
|
||||
$pre: $text !default
|
||||
$pre-background: $background !default
|
||||
|
||||
// Link colors
|
||||
|
||||
$link: $primary !default
|
||||
$link-invert: $primary-invert !default
|
||||
$link-visited: $purple !default
|
||||
|
||||
$link-hover: $grey-darker !default
|
||||
$link-hover-background: $grey-lighter !default
|
||||
$link-hover-border: $grey-darker !default
|
||||
|
||||
$link-active: $grey-darker !default
|
||||
$link-active-border: $grey-darker !default
|
||||
|
||||
// Control colors
|
||||
|
||||
$control: $text-strong !default
|
||||
$control-background: $text-invert !default
|
||||
$control-border: $border !default
|
||||
|
||||
$control-hover: $link-hover !default
|
||||
$control-hover-border: $border-hover !default
|
||||
|
||||
$control-active: $link !default
|
||||
$control-active-background: $link !default
|
||||
$control-active-background-invert: $link-invert !default
|
||||
$control-active-border: $link !default
|
||||
|
||||
// Typography
|
||||
|
||||
$family-primary: $family-sans-serif !default
|
||||
$family-code: $family-monospace !default
|
||||
|
||||
$size-small: $size-7 !default
|
||||
$size-normal: $size-6 !default
|
||||
$size-medium: $size-5 !default
|
||||
$size-large: $size-3 !default
|
||||
$size-huge: $size-1 !default
|
||||
|
||||
// 4. Lists and maps
|
||||
|
||||
$colors: (white: ($white, $black), black: ($black, $white), light: ($light, $light-invert), dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert)) !default
|
||||
|
||||
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 !default
|
||||
@ -3,6 +3,7 @@
|
||||
var express = require('express');
|
||||
var router = express.Router();
|
||||
const Promise = require('bluebird');
|
||||
const validator = require('validator');
|
||||
|
||||
/**
|
||||
* Admin
|
||||
@ -48,7 +49,30 @@ router.get('/users', (req, res) => {
|
||||
return res.render('error-forbidden');
|
||||
}
|
||||
|
||||
res.render('pages/admin/users', { adminTab: 'users' });
|
||||
db.User.find({})
|
||||
.select('-password -rights')
|
||||
.sort('name email')
|
||||
.exec().then((usrs) => {
|
||||
res.render('pages/admin/users', { adminTab: 'users', usrs });
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
router.get('/users/:id', (req, res) => {
|
||||
|
||||
if(!res.locals.rights.manage) {
|
||||
return res.render('error-forbidden');
|
||||
}
|
||||
|
||||
if(!validator.isMongoId(req.params.id)) {
|
||||
return res.render('error-forbidden');
|
||||
}
|
||||
|
||||
db.User.findById(req.params.id)
|
||||
.select('-password')
|
||||
.exec().then((usr) => {
|
||||
res.render('pages/admin/users-edit', { adminTab: 'users', usr });
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
33
views/modals/admin-createuser.pug
Normal file
33
views/modals/admin-createuser.pug
Normal file
@ -0,0 +1,33 @@
|
||||
|
||||
.modal#modal-admin-createuser
|
||||
.modal-background
|
||||
.modal-container
|
||||
.modal-content
|
||||
header.is-blue Create / Authorize User
|
||||
section
|
||||
label.label Email address:
|
||||
p.control.is-fullwidth
|
||||
input.input(type='text', placeholder='e.g. john.doe@company.com', v-model='email')
|
||||
span.help.is-red.is-hidden This email is invalid!
|
||||
section
|
||||
label.label Provider:
|
||||
p.control.is-fullwidth
|
||||
select(v-model='provider')
|
||||
option(value='local') Local Database
|
||||
option(value='windowslive') Microsoft Account
|
||||
option(value='google') Google ID
|
||||
option(value='facebook') Facebook
|
||||
section(v-if="provider=='local'")
|
||||
label.label Password:
|
||||
p.control.is-fullwidth
|
||||
input.input(type='password', placeholder='', v-model='password')
|
||||
span.help.is-red.is-hidden This password is invalid!
|
||||
section(v-if="provider=='local'")
|
||||
label.label Full Name:
|
||||
p.control.is-fullwidth
|
||||
input.input(type='text', placeholder='e.g. John Doe', v-model='name')
|
||||
span.help.is-red.is-hidden This name is invalid!
|
||||
footer
|
||||
a.button.is-grey.is-outlined(v-on:click="cancel") Discard
|
||||
a.button.is-blue(v-on:click="create", v-if="provider=='local'") Create User
|
||||
a.button.is-blue(v-on:click="create", v-if="provider!='local'") Authorize User
|
||||
@ -7,7 +7,7 @@ block rootNavRight
|
||||
i.nav-item#notifload
|
||||
.nav-item
|
||||
a.button.btn-edit-discard(href='/')
|
||||
i.fa.fa-home
|
||||
i.icon-home
|
||||
span Home
|
||||
|
||||
block content
|
||||
|
||||
@ -33,11 +33,11 @@ block adminContent
|
||||
label.label Provider
|
||||
p.control.account-profile-provider
|
||||
case user.provider
|
||||
when 'local': i.fa.fa-database
|
||||
when 'windowslive': i.fa.fa-windows.is-blue
|
||||
when 'google': i.fa.fa-google.is-blue
|
||||
when 'facebook': i.fa.fa-facebook.is-purple
|
||||
default: i.fa.fa-question-circle
|
||||
when 'local': i.icon-server
|
||||
when 'windowslive': i.icon-windows2.is-blue
|
||||
when 'google': i.icon-google.is-blue
|
||||
when 'facebook': i.icon-facebook.is-purple
|
||||
default: i.icon-warning
|
||||
= t('auth:providers.' + user.provider)
|
||||
label.label Member since
|
||||
p.control= userMoment(user.createdAt).format('LL')
|
||||
|
||||
114
views/pages/admin/users-edit.pug
Normal file
114
views/pages/admin/users-edit.pug
Normal file
@ -0,0 +1,114 @@
|
||||
extends ./_layout.pug
|
||||
|
||||
block rootNavRight
|
||||
i.nav-item#notifload
|
||||
.nav-item
|
||||
a.button(href='/admin/users')
|
||||
i.icon-reply
|
||||
span Return to Users
|
||||
|
||||
block adminContent
|
||||
#page-type-admin
|
||||
.hero
|
||||
h1.title#title Edit User
|
||||
h2.subtitle= usr.email
|
||||
table.table
|
||||
thead
|
||||
tr
|
||||
th Unique ID
|
||||
th Email
|
||||
th Provider
|
||||
th Created On
|
||||
th Updated On
|
||||
tbody
|
||||
tr
|
||||
td.is-centered= usr._id
|
||||
td.is-centered= usr.email
|
||||
td.is-centered.has-icons
|
||||
case usr.provider
|
||||
when 'local'
|
||||
i.icon-server.is-deep-orange
|
||||
| Local Database
|
||||
when 'windowslive'
|
||||
i.icon-windows2.is-blue
|
||||
| Microsoft Account
|
||||
when 'google'
|
||||
i.icon-google.is-blue
|
||||
| Google ID
|
||||
when 'facebook'
|
||||
i.icon-facebook.is-purple
|
||||
| Facebook
|
||||
default: i.icon-warning
|
||||
td.is-centered= userMoment(usr.createdAt).format('lll')
|
||||
td.is-centered= userMoment(usr.updatedAt).format('lll')
|
||||
.form-sections
|
||||
section
|
||||
label.label Display Name
|
||||
p.control.is-fullwidth
|
||||
input.input(type='text', placeholder='John Smith', value=usr.name)
|
||||
if usr.provider == 'local'
|
||||
section
|
||||
label.label Password
|
||||
p.control.is-fullwidth
|
||||
input.input(type='password', placeholder='Password', value='********')
|
||||
section
|
||||
label.label Access Rights
|
||||
table.table
|
||||
thead.is-teal
|
||||
tr
|
||||
th
|
||||
th(style={width: '200px'}) Permission(s)
|
||||
th Path
|
||||
th(style={width: '150px'}) Access
|
||||
th(style={width: '50px'})
|
||||
tbody
|
||||
tr(v-for='right in rights')
|
||||
td.is-icon
|
||||
i.icon-marquee-plus.is-green(v-if='!right.deny')
|
||||
i.icon-marquee-minus.is-red(v-if='right.deny')
|
||||
td
|
||||
p.control.is-fullwidth
|
||||
select(v-model='right.role')
|
||||
option(value='write') Read and Write
|
||||
option(value='read') Read Only
|
||||
td
|
||||
.columns
|
||||
.column.is-narrow
|
||||
p.control
|
||||
select(v-model='right.exact')
|
||||
option(value='false') Path starts with:
|
||||
option(value='true') Path match exactly:
|
||||
.column
|
||||
p.control.is-fullwidth
|
||||
input.input(type='text', placeholder='/', v-model='right.path')
|
||||
td
|
||||
p.control.is-fullwidth
|
||||
select(v-model='right.deny')
|
||||
option(value='false') Allow
|
||||
option(value='true') Deny
|
||||
td.is-centered.has-action-icons
|
||||
i.icon-delete.is-red
|
||||
.table-actions
|
||||
button.button.is-blue
|
||||
i.icon-plus
|
||||
span Add New Row
|
||||
section
|
||||
label.label Role Override
|
||||
p.control.is-fullwidth
|
||||
select(v-model='roleoverride')
|
||||
option(value='none') None
|
||||
option(value='admin') Global Administrator
|
||||
.columns.is-gapless
|
||||
.column
|
||||
section
|
||||
button.button.is-green
|
||||
i.icon-check
|
||||
span Save Changes
|
||||
button.button.is-grey.is-outlined
|
||||
i.icon-cancel
|
||||
span Discard
|
||||
.column.is-narrow
|
||||
section
|
||||
button.button.is-red
|
||||
i.icon-trash2
|
||||
span Delete Account
|
||||
@ -1,18 +1,50 @@
|
||||
extends ./_layout.pug
|
||||
|
||||
block rootNavRight
|
||||
i.nav-item#notifload
|
||||
.nav-item
|
||||
a.button.btn-create-prompt
|
||||
i.icon-plus
|
||||
span Create / Authorize User
|
||||
|
||||
block adminContent
|
||||
.hero
|
||||
h1.title#title Users
|
||||
h2.subtitle Manage users and rights
|
||||
ul.hero-menu
|
||||
li
|
||||
a.is-blue(href='/')
|
||||
i.icon-plus
|
||||
span Create Local User
|
||||
li
|
||||
a.is-indigo(href='/')
|
||||
i.icon-globe
|
||||
span Authorize Social User
|
||||
.form-sections
|
||||
section
|
||||
| Coming soon
|
||||
#page-type-admin
|
||||
.hero
|
||||
h1.title#title Users
|
||||
h2.subtitle Manage users and access rights
|
||||
table.table
|
||||
thead
|
||||
tr
|
||||
th
|
||||
th Name
|
||||
th Email
|
||||
th Provider
|
||||
th Created On
|
||||
th Updated On
|
||||
tbody
|
||||
each usr in usrs
|
||||
tr
|
||||
td.is-icon
|
||||
i.icon-user.is-grey
|
||||
td
|
||||
a(href='/admin/users/' + usr._id)= usr.name
|
||||
td= usr.email
|
||||
td.is-centered.has-icons
|
||||
case usr.provider
|
||||
when 'local'
|
||||
i.icon-server.is-deep-orange
|
||||
| Local Database
|
||||
when 'windowslive'
|
||||
i.icon-windows2.is-blue
|
||||
| Microsoft Account
|
||||
when 'google'
|
||||
i.icon-google.is-blue
|
||||
| Google ID
|
||||
when 'facebook'
|
||||
i.icon-facebook.is-purple
|
||||
| Facebook
|
||||
default: i.icon-warning
|
||||
td.is-centered= userMoment(usr.createdAt).format('lll')
|
||||
td.is-centered= userMoment(usr.updatedAt).format('lll')
|
||||
|
||||
include ../../modals/admin-createuser.pug
|
||||
|
||||
Loading…
Reference in New Issue
Block a user