Matchu
9cc45f0988
Eyyy tasty! There were some issues with conflicting styles with the main app, but I think we got it! Scoping Chakra's CSS reset was a big deal to not accidentally overwrite the app's own styles lol, and we had to solve a specificity problem for that, thanks Aria for the :where tip!! <3
118 lines
2.3 KiB
Sass
118 lines
2.3 KiB
Sass
=box-sizing($bs)
|
|
$bs: unquote($bs)
|
|
+experimental(box-sizing, $bs, -moz, -webkit, not -o, -ms, not -khtml, official)
|
|
|
|
=clearfix
|
|
overflow: hidden
|
|
display: inline-block
|
|
&
|
|
display: block
|
|
|
|
=border-radius($r)
|
|
-moz-border-radius: $r
|
|
-webkit-border-radius: $r
|
|
|
|
=inline-block
|
|
display: -moz-inline-box
|
|
-moz-box-orient: vertical
|
|
display: inline-block
|
|
vertical-align: middle
|
|
*display: inline
|
|
*vertical-align: auto
|
|
|
|
=opacity($o)
|
|
-moz-opacity: $o
|
|
-webkit-opacity: $o
|
|
-o-opacity: $o
|
|
-khtml-opacity: $o
|
|
|
|
=header-text
|
|
font-family: $header-font
|
|
|
|
=awesome-button-color($c)
|
|
background: $c image-url("alert-overlay.png") repeat-x
|
|
&:hover
|
|
background-color: $c - #111111
|
|
|
|
=awesome-button
|
|
/* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html
|
|
+border-radius(5px)
|
|
+awesome-button-color(#006400)
|
|
border: 0
|
|
display: inline-block
|
|
padding: .5em .75em .45em
|
|
color: #fff
|
|
text-decoration: none
|
|
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5)
|
|
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5)
|
|
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25)
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.25)
|
|
position: relative
|
|
font-weight: bold
|
|
line-height: 1
|
|
&:hover
|
|
color: #fff
|
|
&:active
|
|
transform: translateY(1px)
|
|
|
|
=reset-awesome-button
|
|
+border-radius(0)
|
|
background: transparent
|
|
display: inline
|
|
padding: 0
|
|
color: inherit
|
|
-moz-box-shadow: none
|
|
-webkit-box-shadow: none
|
|
text-shadow: none
|
|
border-bottom: 0
|
|
position: static
|
|
font-weight: normal
|
|
line-height: inherit
|
|
|
|
&:hover
|
|
background: transparent
|
|
color: inherit
|
|
&:active
|
|
top: auto
|
|
|
|
=loud-awesome-button-color
|
|
+awesome-button-color(#ff5c00)
|
|
|
|
=loud-awesome-button
|
|
+loud-awesome-button-color
|
|
font-size: 125%
|
|
padding: 8px 14px 9px
|
|
|
|
=arrowed-awesome-button
|
|
&:after
|
|
content: " >>"
|
|
|
|
=module
|
|
background: $module-bg-color
|
|
border: 1px solid $module-border-color
|
|
padding: 1em
|
|
|
|
=notice
|
|
background: $notice-bg-color
|
|
border: 1px solid $notice-border-color
|
|
color: $notice-color
|
|
|
|
=error
|
|
background: $error-bg-color
|
|
border: 1px solid $error-border-color
|
|
color: $error-color
|
|
|
|
=warning
|
|
background: $warning-bg-color
|
|
border: 1px solid $warning-border-color
|
|
color: $warning-color
|
|
|
|
=subtle-banner
|
|
border:
|
|
color: $soft-border-color
|
|
style: solid
|
|
width: 1px 0
|
|
font-size: 85%
|
|
margin: 1em 0
|
|
padding: .5em 0
|
|
text-align: center
|