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,5 @@
@keyframes spin-around
from
transform: rotate(0deg)
to
transform: rotate(359deg)

View File

@@ -0,0 +1,52 @@
=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

View File

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

View File

@@ -0,0 +1,94 @@
=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

View File

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

View File

@@ -0,0 +1,8 @@
@charset "utf-8"
@import "reset"
@import "functions"
@import "mixins"
@import "animations"
@import "controls"
@import "variables"

View File

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