Skip to content

Instantly share code, notes, and snippets.

@icodeforlove
Last active August 29, 2015 14:04
Show Gist options
  • Select an option

  • Save icodeforlove/1a09d05e6c5c9f15afba to your computer and use it in GitHub Desktop.

Select an option

Save icodeforlove/1a09d05e6c5c9f15afba to your computer and use it in GitHub Desktop.
/* Component CSS for TestName */
.app-component.app-test-name {
width: 100px;
height: 100px;
}
.app-component.app-test-name.app-test-name_state-test {
width: 223px;
}
.app-component.app-test-name .app-test-name_header {
width: 100px;
}
.app-component.app-test-name .app-test-name_header:hover {
color: #00f;
}
.app-test-name_header .app-test-name_profile, .app-test-name_header .app-test-name_something {
opacity: 0.3;
}
.app-test-name_header .app-test-name_profile .app-test-name_image, .app-test-name_header .app-test-name_something .app-test-name_image {
width: 100px;
height: 100px;
}
.app-component.app-test-name.app-test-name_state-active .app-test-name_header .app-test-name_profile, .app-component.app-test-name.app-test-name_state-active .app-test-name_header .app-test-name_something {
opacity: 0.4;
}
@component TestName {
width: 100px;
height: 100px;
state::test {
width: 223px;
}
.header {
width: 100px;
&:hover {
color: blue;
}
.profile, .something {
opacity: .3;
.image {
width: 100px;
height: 100px;
}
state::active {
opacity: .4;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment