Add minireset, Fix color luminance

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

View File

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

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

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

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