mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Add minireset, Fix color luminance
This commit is contained in:
Jeremy Thomas
parent
7634faba6a
commit
18b34aa2c0
9
bulma.sass
vendored
9
bulma.sass
vendored
@ -1,6 +1,7 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "sass/base/base"
|
||||
@import "sass/elements/elements"
|
||||
@import "sass/components/components"
|
||||
@import "sass/layout/layout"
|
||||
@import "sass/base/base.sass"
|
||||
@import "sass/elements/elements.sass"
|
||||
@import "sass/components/components.sass"
|
||||
@import "sass/layout/layout.sass"
|
||||
@import "sass/utilities/mixins.sass"
|
||||
|
||||
@ -68,18 +68,13 @@
|
||||
|
||||
{% if page.route == 'index' %}
|
||||
<style type="text/css">
|
||||
@media screen and (max-width: 979px) {
|
||||
.title.is-2 .icon.is-large {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.title.is-2 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title.is-2 a {
|
||||
color: #222324;
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
.title.is-2 a:hover {
|
||||
@ -87,7 +82,7 @@
|
||||
}
|
||||
|
||||
.title.is-2 .icon.is-large {
|
||||
left: -72px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
}
|
||||
@ -99,6 +94,16 @@
|
||||
.hero .title.is-2 a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 979px) {
|
||||
.title.is-2 a {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.title.is-2 .icon.is-large {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
|
||||
|
||||
@ -52,7 +52,6 @@ $carbon-space: 15px
|
||||
.carbon-text
|
||||
display: block
|
||||
color: $text-strong
|
||||
margin-bottom: 5px
|
||||
margin-left: 130px + $carbon-space
|
||||
.carbon-poweredby
|
||||
font-size: $size-small
|
||||
@ -235,7 +234,7 @@ $structure-invert: $danger-invert
|
||||
position: relative
|
||||
.copy,
|
||||
.expand
|
||||
@extend %unselectable
|
||||
+unselectable
|
||||
background: $white
|
||||
border: solid $border
|
||||
border-width: 0 0 1px 1px
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -102,6 +102,7 @@ doc-subtab: tag
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}
|
||||
<span class="tag is-dark is-small">Small</span>
|
||||
<span class="tag is-primary is-medium">Medium</span>
|
||||
<span class="tag is-info is-large">Large</span>
|
||||
{% endhighlight %}
|
||||
@ -116,19 +117,19 @@ doc-subtab: tag
|
||||
<p class="control">
|
||||
<span class="tag is-info is-small">
|
||||
Foo
|
||||
<button class="delete"></button>
|
||||
<button class="delete is-small"></button>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span class="tag is-success">
|
||||
Bar
|
||||
<button class="delete"></button>
|
||||
<button class="delete is-small"></button>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span class="tag is-warning is-medium">
|
||||
Hello
|
||||
<button class="delete"></button>
|
||||
<button class="delete is-small"></button>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
@ -140,16 +141,20 @@ doc-subtab: tag
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}
|
||||
<span class="tag is-success">
|
||||
<span class="tag is-info is-small">
|
||||
Foo
|
||||
<button class="delete"></button>
|
||||
<button class="delete is-small"></button>
|
||||
</span>
|
||||
<span class="tag is-success">
|
||||
Bar
|
||||
<button class="delete is-small"></button>
|
||||
</span>
|
||||
<span class="tag is-warning is-medium">
|
||||
Bar
|
||||
<button class="delete"></button>
|
||||
Hello
|
||||
<button class="delete is-small"></button>
|
||||
</span>
|
||||
<span class="tag is-danger is-large">
|
||||
Foo bar
|
||||
World
|
||||
<button class="delete"></button>
|
||||
</span>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -220,14 +220,12 @@ route: index
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child notification is-success">
|
||||
<p class="title">Tall tile</p>
|
||||
<p class="subtitle">With even more content</p>
|
||||
<div class="content">
|
||||
<p class="title">Tall tile</p>
|
||||
<p class="subtitle">With even more content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
|
||||
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
|
||||
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
@ -568,9 +566,9 @@ route: index
|
||||
</ul>
|
||||
</div>
|
||||
<p class="block">
|
||||
<span class="tag is-dark">Tag<button class="delete"></button></span>
|
||||
<span class="tag is-info">Two<button class="delete"></button></span>
|
||||
<span class="tag is-danger">Three<button class="delete"></button></span>
|
||||
<span class="tag is-dark">Tag<button class="delete is-small"></button></span>
|
||||
<span class="tag is-info">Two<button class="delete is-small"></button></span>
|
||||
<span class="tag is-danger">Three<button class="delete is-small"></button></span>
|
||||
</p>
|
||||
<div class="message is-warning">
|
||||
<div class="message-header">
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "minireset"
|
||||
@import "generic"
|
||||
@import "helpers"
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
81
sass/base/minireset.sass
Normal 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
|
||||
@ -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
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
@import "../base/placeholders.sass"
|
||||
@import "../utilities/variables.sass"
|
||||
|
||||
.content
|
||||
@extend %block
|
||||
+block
|
||||
color: $text
|
||||
// Inline
|
||||
a:not(.button)
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
@import "../base/placeholders.sass"
|
||||
@import "../utilities/variables.sass"
|
||||
|
||||
.progress
|
||||
@extend %block
|
||||
+block
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
border: none
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
Loading…
Reference in New Issue
Block a user