121 lines
2.9 KiB
Stylus
121 lines
2.9 KiB
Stylus
@import url('http://fonts.googleapis.com/css?family=Roboto:300,400,700')
|
|
@import './vendor.styl'
|
|
@import './normalize.styl'
|
|
|
|
// -- App ----------------------------------------------------------------------
|
|
body
|
|
position: absolute
|
|
height: 100%
|
|
width: 100%
|
|
margin: 0
|
|
padding: 0
|
|
font-family Roboto, sans-serif
|
|
-webkit-touch-callout: none
|
|
-webkit-user-select: none
|
|
-moz-user-select: moz-none
|
|
user-select: none
|
|
// overflow: hidden
|
|
*
|
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0)
|
|
|
|
[data-toolbox]
|
|
position: absolute
|
|
left: 0
|
|
top: 0
|
|
width: 100vw
|
|
height: 100vh
|
|
overflow-y: scroll
|
|
|
|
a,abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video
|
|
border: 0
|
|
margin: 0
|
|
outline: 0
|
|
padding: 0
|
|
|
|
*, *:before, *:after
|
|
margin: 0
|
|
padding: 0
|
|
box-sizing: border-box
|
|
|
|
h1, h2, h3, h4, h5, h6, label, p, button, abbr, a, span, small
|
|
-webkit-font-smoothing: RENDER = antialiased
|
|
font-smoothing: RENDER
|
|
-webkit-text-size-adjust: 100%
|
|
-ms-text-size-adjust: 100%
|
|
text-size-adjust: 100%
|
|
|
|
a
|
|
text-decoration: none
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0)
|
|
|
|
::-webkit-scrollbar
|
|
width: 0px
|
|
height: 0px
|
|
|
|
input:not([type="checkbox"]):not([type="radio"]), button
|
|
-webkit-appearance: none
|
|
-moz-appearance: none
|
|
appearance: none
|
|
-webkit-touch-callout: none
|
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0)
|
|
outline: none
|
|
|
|
// -- Data-Flex ----------------------------------------------------------------
|
|
[data-flex]
|
|
display-flex()
|
|
body&
|
|
position : absolute
|
|
left : 0
|
|
top : 0
|
|
bottom : 0
|
|
width : 100%
|
|
overflow : hidden
|
|
|
|
// -- Direction
|
|
[data-flex^="horizontal"]
|
|
flex-direction row
|
|
[data-flex^="vertical"]
|
|
flex-direction column
|
|
|
|
// -- Size
|
|
[data-flex*="grow"]
|
|
> *:not([data-column]):not([data-flex-grow])
|
|
flex-grow 1
|
|
[data-flex-grow="min"]
|
|
flex-grow 0
|
|
[data-flex-grow="max"]
|
|
flex-grow 2
|
|
|
|
// -- Container properties
|
|
[data-flex*="wrap"]
|
|
flex-wrap wrap
|
|
[data-flex*="center"]
|
|
justify-content center
|
|
align-content center
|
|
align-items center
|
|
[data-flex-justify="start"]
|
|
justify-content flex-start
|
|
[data-flex-justify="center"]
|
|
justify-content center
|
|
[data-flex-justify="end"]
|
|
justify-content flex-end
|
|
[data-flex-content="start"]
|
|
align-content flex-start
|
|
[data-flex-content="center"]
|
|
align-content center
|
|
[data-flex-content="end"]
|
|
align-content flex-end
|
|
[data-flex-items="center"]
|
|
align-items center
|
|
[data-flex-items="start"]
|
|
align-items flex-start
|
|
[data-flex-items="end"]
|
|
align-items flex-end
|
|
|
|
// -- Children properties
|
|
[data-flex-order="first"]
|
|
order: -1
|
|
|
|
[data-flex-order="last"]
|
|
order: 999999
|