Skip to content

Instantly share code, notes, and snippets.

@jonrimmer
Created June 28, 2013 01:41
Show Gist options
  • Save jonrimmer/5881843 to your computer and use it in GitHub Desktop.
Save jonrimmer/5881843 to your computer and use it in GitHub Desktop.
CSS state machine syntax concept
@states mainLayout {
@state initial {
::host {
background-color: black;
}
.main-content {
height: 95%;
}
#console {
opacity: 0;
height: 5%;
state-trigger: consoleVisible none swipe-up;
}
#console .toggle-button {
state-trigger: #consoleVisible click;
}
}
@state consoleVisible {
::host {
background-color: darkGray;
}
.main-content {
height: 80%;
}
#console {
opacity: 1;
height: 20%;
state-trigger: initial swipe-down;
}
#console .close-button {
state-trigger-target: initial;
state-trigger-action: click;
state-trigger-transition: none;
}
}
@transition initial consoleVisible 0.3s {
@keyframe 80% {
.main-content {
height: 75% !timing(ease-in);
}
#console {
opacity: 1;
height: 25% !timing(ease-in);
}
}
}
@transition consoleVisible initial 0.3s linear;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment