b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
136 lines
2.9 KiB
CSS
Executable file
136 lines
2.9 KiB
CSS
Executable file
/**
|
|
* Button state:
|
|
* 1. normal (class name: [none])
|
|
* 2. enlarging (class name: enlarging)
|
|
* 3. shrinking (class name: shrinking)
|
|
* 4. opening (class name: opening)
|
|
* 5. closing (class name: closing)
|
|
* 6. closed (class name: closed)
|
|
**/
|
|
|
|
/**
|
|
* focus: closed -> closed + enlarging -> closed + shrinking -> opening -> ''
|
|
* close: '' -> closing -> closed;
|
|
**/
|
|
|
|
menu-group {
|
|
outline: 0;
|
|
display: inline-block;
|
|
height: 8rem;
|
|
padding-left: 8rem;
|
|
padding-right: 4rem;
|
|
opacity: 1;
|
|
/* we need to set border to none to remove the button border */
|
|
border: none;
|
|
/* the radius is still make button as round even if we don't have border */
|
|
border-radius: 4rem;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
word-break: keep-all;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
transition-property: all;
|
|
transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
|
|
transition-duration: 0.42s;
|
|
}
|
|
|
|
menu-group:before {
|
|
content: " ";
|
|
background-repeat: no-repeat;
|
|
background-size: 5.4rem auto;
|
|
background-position: 1.3rem center;
|
|
width: 8rem;
|
|
height: 8rem;
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 0;
|
|
|
|
transition-property: all;
|
|
transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
|
|
transition-duration: 0.42s;
|
|
}
|
|
|
|
menu-group[rotate]:before {
|
|
transform: rotate(360deg);
|
|
transition-property: all;
|
|
transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
|
|
transition-duration: 0.42s;
|
|
}
|
|
|
|
menu-group[data-icon]:before {
|
|
width: 5.4rem;
|
|
left: 1.3rem;
|
|
font-size: 5.4rem;
|
|
line-height: 8rem;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
white-space: normal;
|
|
top: 0;
|
|
}
|
|
|
|
menu-group[data-icon].switching-icon:before {
|
|
font-size: 5.4rem;
|
|
line-height: 8rem;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
/**
|
|
* According to visual spec, we have falling down transition while icon
|
|
* change.
|
|
*
|
|
* The trick is:
|
|
* 1. to put the next icon at the top of current and slide icons down.
|
|
* 2. to set transition duration to 0 here to elimiate the slide up
|
|
* transition.
|
|
**/
|
|
top: -8rem;
|
|
transition: none;
|
|
}
|
|
|
|
menu-group.closed {
|
|
padding-right: 0;
|
|
|
|
transition-duration: 0.5s;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
menu-group.closed > * {
|
|
display: none;
|
|
}
|
|
|
|
menu-group[rotate].closed:before {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
menu-group.opening {
|
|
transition-duration: 0.72s;
|
|
/* add the same padding-right of normal to make it run transition */
|
|
padding-right: 4rem;
|
|
}
|
|
|
|
menu-group.opening:before {
|
|
transition-duration: 0.72s;
|
|
}
|
|
|
|
menu-group.closing {
|
|
transition-duration: 0.5s;
|
|
padding-right: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
menu-group[rotate].closing:before {
|
|
transform: rotate(0deg);
|
|
transition-duration: 0.5s;
|
|
}
|
|
|
|
menu-group.enlarging {
|
|
opacity: 1;
|
|
background-color: #ffffff;
|
|
transform: scale(1.2);
|
|
transition-duration: 0.2s;
|
|
}
|
|
|
|
menu-group.shrinking {
|
|
transition-duration: 0.23s;
|
|
}
|