agneta-angularjs/source/style/accordion.module.styl

Create your agneta applications with AngularJS

.accordion{
	md-list{
		font-size: 17px;

		.md-button:not([disabled]):hover{
			background: initial;
		}

		.expander{
			box-shadow: none !important;
			transform: scaleY(1);
			transition: transform 300ms ease;
			pointer-events: none;
		}
		.item .item{
			color: #626262;
		}
		.item{
			md-list-item{

				transition: background 300ms ease;
				background: white;

				md-icon{
					color: color-primary;
					padding-right: 8px;
				}
			}
			&.has-menu{
				overflow: hidden;
				position: relative;
				>md-list-item{
					z-index: 3;
				}
				>.list{
					z-index: 1;
					transition: margin 600ms ease;
				}
				&:not(.expanded){
					>.list{
						z-index: -2;
						position: absolute;
					}
				}
				&.expanded{
					box-shadow: 0px 4px 19px #b2b2b2;
					>.list{
						margin-top: 0;
					}
					>md-list-item{
						background: color-primary;
						color: white;
						md-icon{
							color: white;
						}
						.expander{
							transform: scaleY(-1);
						}
					}
					.item.has-menu{

						md-list-item{
							background: white;
						}

						&.expanded{
							>md-list-item{
								font-weight: bold;
								color: color-primary;
								md-icon{
									color: initial;
								}
								.md-list-item-inner{
									font-weight: bold;
								}
							}
						}
					}
				}
			}

			.list{
				overflow: hidden;
			}
		}
	}
	}