scss 顶级手风琴造型

Posted 2021-05-17

// some styling for the accordion top
.sw-public-page-part {
	.nav-tabs-top {
		width: 100%;
		margin: 0 auto;
		position: relative;
		border: 1px solid rgba(40,44,42,.1);
		border-top: none;
		ul.nav-tabs {
			position: relative;
			display: flex;
			margin: 3rem auto;
			padding: 0;
			max-width: 100%;
			list-style: none;
			flex-flow: row wrap;
			justify-content: center;
			border-bottom: none;
			margin-bottom: 10px;
			li.tabbedcontent-header {
				border: 1px solid rgba(40,44,42,.1);
				position: relative;
				z-index: 1;
				display: block;
				margin: 0 auto;
				text-align: center;
				flex: 1;
				background: rgba(40, 44, 42, 0.05);
				@media (max-width: 650px) {
					font-size: 1.2rem;
					text-align: center;
					margin: 0;
				}
				&:nth-child(1) {
					border-left: none;
				}
				&:last-child {
					border-right: none;
				}
				a {
					padding: .65em 0 0.5em;
					color: #74777b;
					line-height: 1;
					height: 100%;
					transition: all .2s ease;
					border: none;
					border-radius: 0;
					margin-right: 0;
					&:hover {
						color: rgba(99,165,155,1);
					}
				}
				&.active {
					border-top-color: rgba(99,165,155,1);
					border-bottom: none;
					background: none;
					a {
						color: #63a59a;
						background: none;
						box-shadow: inset 0 3px 0 rgba(99,165,155,1);
						color: rgba(99,165,155,1);
						&:focus {
							outline: none;
						}
					}
				}
			}
		}
		.tab-content {
			padding: 3rem;
		}
	}
}