Added Fetch Image from URL feature + Storm filelocks fixes + bulma inclusion into core

This commit is contained in:
NGPixel
2016-10-16 19:09:43 -04:00
parent 91d524eb06
commit 741a6674af
55 changed files with 3119 additions and 102 deletions

View File

@@ -0,0 +1,58 @@
.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

View File

@@ -0,0 +1,14 @@
@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"

View File

@@ -0,0 +1,282 @@
.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%

View File

@@ -0,0 +1,123 @@
.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

View File

@@ -0,0 +1,57 @@
.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

View File

@@ -0,0 +1,58 @@
.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

View File

@@ -0,0 +1,32 @@
.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

View File

@@ -0,0 +1,39 @@
.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%)

View File

@@ -0,0 +1,75 @@
.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

View File

@@ -0,0 +1,133 @@
// 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

View File

@@ -0,0 +1,35 @@
.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

View File

@@ -0,0 +1,57 @@
.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

View File

@@ -0,0 +1,129 @@
.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