Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add minireset, Fix color luminance

Browse Source
This commit is contained in:
Jeremy Thomas
2016-09-22 23:14:18 +01:00
parent 7634faba6a
commit 18b34aa2c0
27 changed files with 1178 additions and 2531 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
sass/base/base.sass
View File

@@ -1,4 +1,5 @@
@charset "utf-8"
@import "minireset"
@import "generic"
@import "helpers"

5
sass/base/generic.sass
View File

@@ -58,7 +58,10 @@ code
padding: 1px 2px 2px
hr
border-top-color: $border
background-color: $border
border: none
display: block
height: 1px
margin: 40px 0
img

3
sass/base/helpers.sass
View File

@@ -1,4 +1,3 @@
@import "./placeholders.sass"
@import "../utilities/mixins.sass"
// Display
@@ -107,4 +106,4 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
padding: 0 !important
.is-unselectable
@extend %unselectable
+unselectable

81
sass/base/minireset.sass Normal file
View File

@@ -0,0 +1,81 @@
/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */
// Blocks
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6
margin: 0
padding: 0
// Headings
h1,
h2,
h3,
h4,
h5,
h6
font-size: 100%
font-weight: normal
// List
ul
list-style: none
// Form
button,
input,
select,
textarea
margin: 0
// Box sizing
html
box-sizing: border-box
*
box-sizing: inherit
&:before,
&:after
box-sizing: inherit
// Media
img,
embed,
object,
audio,
video
height: auto
max-width: 100%
// Iframe
iframe
border: 0
// Table
table
border-collapse: collapse
border-spacing: 0
td,
th
padding: 0
text-align: left

107
sass/base/placeholders.sass
View File

@@ -1,107 +0,0 @@
@import "../utilities/animations.sass"
@import "../utilities/variables.sass"
%block
&:not(:last-child)
margin-bottom: 20px
%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
%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
%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
%unselectable
-webkit-touch-callout: none
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none

3
sass/components/level.sass
View File

@@ -1,4 +1,3 @@
@import "../base/placeholders.sass"
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
@@ -37,7 +36,7 @@
justify-content: flex-end
.level
@extend %block
+block
align-items: center
justify-content: space-between
code

3
sass/components/message.sass
View File

@@ -1,4 +1,3 @@
@import "../base/placeholders.sass"
@import "../utilities/functions.sass"
@import "../utilities/variables.sass"
@@ -21,7 +20,7 @@
border-top: none
.message
@extend %block
+block
background-color: $background
border-radius: $radius
// Colors

3
sass/components/modal.sass
View File

@@ -1,4 +1,3 @@
@import "../base/placeholders.sass"
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
@@ -20,7 +19,7 @@
width: 640px
.modal-close
@extend %delete
+delete
background: none
height: 40px
position: fixed

3
sass/components/nav.sass
View File

@@ -1,11 +1,10 @@
@import "../base/placeholders.sass"
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
// Components
.nav-toggle
@extend %hamburger
+hamburger
// Responsiveness
+tablet
display: none

6
sass/components/tabs.sass
View File

@@ -1,9 +1,9 @@
@import "../base/placeholders.sass"
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
.tabs
@extend %block
@extend %unselectable
+block
+unselectable
align-items: stretch
display: flex
justify-content: space-between

3
sass/elements/box.sass
View File

@@ -1,8 +1,7 @@
@import "../base/placeholders.sass"
@import "../utilities/variables.sass"
.box
@extend %block
+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)

6
sass/elements/button.sass
View File

@@ -1,4 +1,3 @@
@import "../base/placeholders.sass"
@import "../utilities/controls.sass"
@import "../utilities/variables.sass"
@@ -22,7 +21,8 @@
.button
+control
@extend %unselectable
+unselectable
cursor: pointer
justify-content: center
padding-left: 10px
padding-right: 10px
@@ -109,6 +109,6 @@
color: transparent !important
pointer-events: none
&:after
@extend %loader
+loader
+center(16px)
position: absolute !important

3
sass/elements/content.sass
View File

@@ -1,8 +1,7 @@
@import "../base/placeholders.sass"
@import "../utilities/variables.sass"
.content
@extend %block
+block
color: $text
// Inline
a:not(.button)

10
sass/elements/form.sass
View File

@@ -1,4 +1,3 @@
@import "../base/placeholders.sass"
@import "../utilities/controls.sass"
@import "../utilities/mixins.sass"
@@ -42,7 +41,8 @@
padding: 10px
resize: vertical
%control-with-element
.checkbox,
.radio
cursor: pointer
display: inline-block
line-height: 16px
@@ -58,11 +58,7 @@
input
pointer-events: none
.checkbox
@extend %control-with-element
.radio
@extend %control-with-element
& + .radio
margin-left: 10px
@@ -257,7 +253,7 @@
flex-shrink: 1
&.is-loading
&:after
@extend %loader
+loader
position: absolute !important
right: 8px
top: 8px

6
sass/elements/notification.sass
View File

@@ -1,9 +1,8 @@
@import "../base/placeholders.sass"
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
.notification
@extend %block
+block
+clearfix
background-color: $background
border-radius: $radius
@@ -13,8 +12,9 @@
border-radius: 0 $radius
float: right
margin: -16px -20px 0 20px
.title,
.subtitle,
.title
.content
color: inherit
// Colors
@each $name, $pair in $colors

15
sass/elements/other.sass
View File

@@ -1,7 +1,9 @@
@import "../base/placeholders.sass"
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
.block
+block
.container
position: relative
+desktop
@@ -14,11 +16,17 @@
+widescreen
max-width: 1200px
.delete
+delete
.fa
font-size: 21px
text-align: center
vertical-align: top
.hamburger
+hamburger
.icon
+fa(21px, 24px)
.fa
@@ -40,7 +48,7 @@
text-transform: uppercase
.highlight
@extend %block
+block
font-size: 12px
font-weight: normal
max-width: 100%
@@ -50,6 +58,9 @@
overflow: auto
max-width: 100%
.loader
+loader
.number
background-color: $background
border-radius: 290486px

3
sass/elements/progress.sass
View File

@@ -1,8 +1,7 @@
@import "../base/placeholders.sass"
@import "../utilities/variables.sass"
.progress
@extend %block
+block
-moz-appearance: none
-webkit-appearance: none
border: none

3
sass/elements/title.sass
View File

@@ -1,10 +1,9 @@
@import "../base/placeholders.sass"
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
.title,
.subtitle
@extend %block
+block
font-weight: $weight-title-normal
word-break: break-word
em,

4
sass/utilities/functions.sass
View File

@@ -22,7 +22,7 @@
@return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
@function findColorInvert($color)
@if (colorLuminance($color) > 0.7)
@return rgba($black, 0.7)
@if (colorLuminance($color) > 0.67)
@return rgba(black, 0.7)
@else
@return white

108
sass/utilities/mixins.sass
View File

@@ -1,3 +1,6 @@
@import "./animations.sass"
@import "./variables.sass"
=arrow($color)
border: 1px solid $color
border-right: 0
@@ -10,6 +13,10 @@
transform: rotate(-45deg)
width: 7px
=block
&:not(:last-child)
margin-bottom: 20px
=clearfix
&:after
clear: both
@@ -23,6 +30,48 @@
position: absolute
top: 50%
=delete
+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
=fa($size, $dimensions)
display: inline-block
font-size: $size
@@ -32,6 +81,58 @@
vertical-align: top
width: $dimensions
=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
=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
=overlay($offset: 0)
bottom: $offset
left: $offset
@@ -57,6 +158,13 @@
text-indent: -290486px
width: $width
=unselectable
-webkit-touch-callout: none
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
// Responsiveness
$tablet: 769px !default

174
sass/utilities/reset.sass
View File

@@ -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