add the cube master
This commit is contained in:
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"output": {
|
||||
"dir": "../../assets/css/",
|
||||
"structure": "nested"
|
||||
},
|
||||
"compile": {
|
||||
"style": "compressed",
|
||||
"line-numbers": false,
|
||||
"line-comments": false,
|
||||
"load-path": false,
|
||||
"plugin-path": false,
|
||||
"sourcemap": false,
|
||||
"omit-map-comment": false,
|
||||
"precision": false
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
.btn
|
||||
-webkit-appearance: none
|
||||
-moz-appearance: none
|
||||
appearance: none
|
||||
background-color: transparent
|
||||
border-radius: 0
|
||||
border-width: 0
|
||||
position: absolute
|
||||
pointer-events: none
|
||||
font-size: 1.2em
|
||||
color: rgba(#000, 0.25)
|
||||
opacity: 0
|
||||
|
||||
&:after
|
||||
position: absolute
|
||||
content: ''
|
||||
width: 3em
|
||||
height: 3em
|
||||
left: 50%
|
||||
top: 50%
|
||||
margin-left: -1.5em
|
||||
margin-top: -1.5em
|
||||
border-radius: 100%
|
||||
|
||||
&--tr
|
||||
top: 0.8em
|
||||
right: 0.8em
|
||||
|
||||
&--tl
|
||||
top: 0.8em
|
||||
left: 0.8em
|
||||
|
||||
&--bl
|
||||
bottom: 0.8em
|
||||
left: 0.8em
|
||||
|
||||
&--br
|
||||
bottom: 0.8em
|
||||
right: 0.8em
|
||||
|
||||
&--bc
|
||||
bottom: 0.8em
|
||||
left: calc(50% - 0.5em)
|
||||
|
||||
svg
|
||||
display: block
|
||||
@@ -0,0 +1,40 @@
|
||||
*
|
||||
&,
|
||||
&:before,
|
||||
&:after
|
||||
-webkit-user-select: none
|
||||
-moz-user-select: none
|
||||
user-select: none
|
||||
box-sizing: border-box
|
||||
cursor: inherit
|
||||
margin: 0
|
||||
padding: 0
|
||||
outline: none
|
||||
font-size: inherit
|
||||
font-family: inherit
|
||||
font-weight: inherit
|
||||
font-style: inherit
|
||||
text-transform: uppercase
|
||||
|
||||
&:focus
|
||||
outline: none
|
||||
|
||||
html
|
||||
-webkit-tap-highlight-color: transparent
|
||||
-webkit-text-size-adjust: 100%
|
||||
-webkit-font-smoothing: antialiased
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
-ms-text-size-adjust: 100%
|
||||
-webkit-text-size-adjust: 100%
|
||||
overflow: hidden
|
||||
height: 100%
|
||||
|
||||
body
|
||||
font-family: 'BungeeFont', sans-serif
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
line-height: 1
|
||||
cursor: default
|
||||
overflow: hidden
|
||||
height: 100%
|
||||
font-size: 5rem
|
||||
@@ -0,0 +1,6 @@
|
||||
.icon
|
||||
display: inline-block
|
||||
font-size: inherit
|
||||
overflow: visible
|
||||
vertical-align: -0.125em
|
||||
preserveAspectRatio: none
|
||||
@@ -0,0 +1,137 @@
|
||||
.range
|
||||
position: relative
|
||||
width: 14em
|
||||
z-index: 1
|
||||
opacity: 0
|
||||
|
||||
&:not(:last-child)
|
||||
margin-bottom: 2em
|
||||
|
||||
&__label
|
||||
position: relative
|
||||
font-size: 0.9em
|
||||
line-height: 0.75em
|
||||
padding-bottom: 0.5em
|
||||
z-index: 2
|
||||
|
||||
&__track
|
||||
position: relative
|
||||
height: 1em
|
||||
margin-left: 0.5em
|
||||
margin-right: 0.5em
|
||||
z-index: 3
|
||||
|
||||
&-line
|
||||
position: absolute
|
||||
background: rgba(#000, 0.2)
|
||||
height: 2px
|
||||
top: 50%
|
||||
margin-top: -1px
|
||||
left: -0.5em
|
||||
right: -0.5em
|
||||
transform-origin: left center
|
||||
|
||||
&__handle
|
||||
position: absolute
|
||||
width: 0
|
||||
height: 0
|
||||
top: 50%
|
||||
left: 0
|
||||
cursor: pointer
|
||||
z-index: 1
|
||||
|
||||
div
|
||||
transition: background 500ms ease
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 0
|
||||
width: 0.9em
|
||||
height: 0.9em
|
||||
border-radius: 0.2em
|
||||
margin-left: -0.45em
|
||||
margin-top: -0.45em
|
||||
background: #41aac8
|
||||
border-bottom: 2px solid rgba(#000, 0.2)
|
||||
|
||||
.range.is-active &
|
||||
transform: scale(1.25)
|
||||
|
||||
&:after
|
||||
content: ''
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 0
|
||||
width: 3em
|
||||
height: 3em
|
||||
margin-left: -1.5em
|
||||
margin-top: -1.5em
|
||||
|
||||
&__list
|
||||
display: flex
|
||||
flex-flow: row nowrap
|
||||
justify-content: space-between
|
||||
position: relative
|
||||
padding-top: 0.5em
|
||||
font-size: 0.55em
|
||||
color: rgba(#000, 0.5)
|
||||
z-index: 1
|
||||
|
||||
&--type
|
||||
&-color
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1em
|
||||
|
||||
.range
|
||||
&__list
|
||||
display: none
|
||||
|
||||
&__handle
|
||||
> div
|
||||
background: currentColor !important
|
||||
|
||||
&__track
|
||||
&-line
|
||||
background: transparent
|
||||
|
||||
&:after
|
||||
+inset
|
||||
content: ''
|
||||
opacity: 0.5
|
||||
|
||||
&--color
|
||||
&-hue
|
||||
.range
|
||||
&__handle
|
||||
color: red
|
||||
|
||||
&__track
|
||||
color: red
|
||||
|
||||
&-line
|
||||
&:after
|
||||
background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red)
|
||||
|
||||
|
||||
&-saturation
|
||||
.range
|
||||
&__handle
|
||||
color: red
|
||||
|
||||
&__track
|
||||
color: red
|
||||
|
||||
&-line
|
||||
&:after
|
||||
background: linear-gradient(to right, gray, currentColor)
|
||||
|
||||
&-lightness
|
||||
.range
|
||||
&__handle
|
||||
color: red
|
||||
|
||||
&__track
|
||||
color: red
|
||||
|
||||
&-line
|
||||
&:after
|
||||
background: linear-gradient(to right, black, currentColor, white)
|
||||
@@ -0,0 +1,26 @@
|
||||
.stats
|
||||
position: relative
|
||||
width: 14em
|
||||
z-index: 1
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
opacity: 0
|
||||
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5em
|
||||
|
||||
> i
|
||||
display: block
|
||||
color: rgba(#000, 0.5)
|
||||
font-size: 0.9em
|
||||
|
||||
> b
|
||||
display: block
|
||||
font-size: 0.9em
|
||||
|
||||
> i
|
||||
font-size: 0.75em
|
||||
|
||||
&[name="worst-time"]
|
||||
display: none
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
.text
|
||||
position: absolute
|
||||
left: 0
|
||||
right: 0
|
||||
text-align: center
|
||||
line-height: 0.75
|
||||
perspective: 100rem
|
||||
opacity: 0
|
||||
|
||||
i
|
||||
display: inline-block
|
||||
opacity: 0
|
||||
white-space: pre-wrap
|
||||
|
||||
&--title
|
||||
bottom: 75%
|
||||
font-size: 4.4em
|
||||
height: 1.2em
|
||||
|
||||
span
|
||||
display: block
|
||||
|
||||
&:first-child
|
||||
font-size: 0.5em
|
||||
margin-bottom: 0.2em
|
||||
|
||||
&--note
|
||||
top: 87%
|
||||
font-size: 1em
|
||||
|
||||
&--timer
|
||||
bottom: 78%
|
||||
font-size: 3.5em
|
||||
line-height: 1
|
||||
|
||||
&--complete,
|
||||
&--best-time
|
||||
font-size: 1.5em
|
||||
top: 83%
|
||||
line-height: 1em
|
||||
@@ -0,0 +1,52 @@
|
||||
.ui
|
||||
pointer-events: none
|
||||
color: #070d15
|
||||
|
||||
&,
|
||||
&__background,
|
||||
&__game,
|
||||
&__texts,
|
||||
&__prefs,
|
||||
&__theme,
|
||||
&__stats,
|
||||
&__buttons
|
||||
+inset
|
||||
overflow: hidden
|
||||
|
||||
&__background
|
||||
z-index: 1
|
||||
transition: background 500ms ease
|
||||
background: #d1d5db
|
||||
|
||||
&:after
|
||||
+inset
|
||||
content: ''
|
||||
background-image: linear-gradient(to bottom, rgba(#fff, 1) 50%, rgba(#fff, 0) 100%)
|
||||
|
||||
&__game
|
||||
pointer-events: all
|
||||
z-index: 2
|
||||
|
||||
canvas
|
||||
display: block
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
&__texts
|
||||
z-index: 3
|
||||
|
||||
&__prefs,
|
||||
&__stats,
|
||||
&__theme
|
||||
display: flex
|
||||
flex-flow: column nowrap
|
||||
justify-content: center
|
||||
align-items: center
|
||||
overflow: hidden
|
||||
z-index: 4
|
||||
|
||||
&__theme
|
||||
padding-top: 15em
|
||||
|
||||
&__buttons
|
||||
z-index: 5
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,6 @@
|
||||
=inset($position: absolute)
|
||||
position: $position
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
@@ -0,0 +1,13 @@
|
||||
@import "fonts/bungee"
|
||||
|
||||
@import "variables/easings"
|
||||
|
||||
@import "mixins/inset"
|
||||
|
||||
@import "components/document"
|
||||
@import "components/icon"
|
||||
@import "components/range"
|
||||
@import "components/stats"
|
||||
@import "components/text"
|
||||
@import "components/btn"
|
||||
@import "components/ui"
|
||||
@@ -0,0 +1,31 @@
|
||||
$easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715)
|
||||
$easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1)
|
||||
$easeInOutSine: cubic-bezier(0.39, 0.575, 0.565, 1)
|
||||
|
||||
$easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53)
|
||||
$easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94)
|
||||
$easeInOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94)
|
||||
|
||||
$easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19)
|
||||
$easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1)
|
||||
$easeInOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1)
|
||||
|
||||
$easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22)
|
||||
$easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1)
|
||||
$easeInOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1)
|
||||
|
||||
$easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06)
|
||||
$easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1)
|
||||
$easeInOutQuint: cubic-bezier(0.23, 1, 0.32, 1)
|
||||
|
||||
$easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035)
|
||||
$easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1)
|
||||
$easeInOutExpo: cubic-bezier(0.19, 1, 0.22, 1)
|
||||
|
||||
$easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335)
|
||||
$easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1)
|
||||
$easeInOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1)
|
||||
|
||||
$easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045)
|
||||
$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55)
|
||||
Reference in New Issue
Block a user