html CSS选择器备忘单

Posted 2021-05-10

// Global

$color: (
	primary: #bbd85f,
	primary-dark: #869F3A,
	primary-light: #FFF9B1,
	grey: #666,
  white: #fff,
	yellow: #ffae02,
	yellow-dark: #ff8212
);

@function color($color-name) {
	@return map-get($color, $color-name)
}	

body {
	background-color: color(primary);
	margin: 0;	
	font-family: roboto mono;
}


//FAB
.fab-outer {
	position: absolute;
	position: fixed;
	top: 20px;
	left: 0;
  float: left;
}

.fab {
	color: color(grey);
  width: 120px;
	text-align: right;
	margin: 10px 0;
	
	//btn reset
	font-size: 18px;
	text-decoration: none;
  padding: 8px 16px;
	border-radius: 0px 4px 4px 0px;
	background-color: color(white);
	transition: all 0.3s ease-in-out;
	display: block;
	
	//position
	position: relative;
	left: -103px;
  transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);

	&:hover {
		transform: translatex(103px);
	}
}

.fe30 {
	font-size: 18px;
	width: 180px;
	left: -163px;
  transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
	
	&::after {
		display: none;
		background-color: none;
		content:"";
	}

	&:hover {
		transform: translatex(163px);
		
		&::after {
			position: absolute;
			left: 50px;
			top: 50px;
			display: block;
			z-index: 1;
		}
	}
}

.fe30-yellow {
	color: color(yellow);
}

//FAB close


.content-outer {
	width: 600px;
	border: 2px solid color(white);
	margin: 20px auto;
}


// typographic

h1 {
	font-size: 40px;
	font-weight: 600;
	line-height: 50px;
	margin: 0;
}

h2 {
	font-size: 25px;
	font-weight: 500;
	line-height: 38px;
	margin: 0;
}

p {
	color: color(grey);
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
}

.text-small {
	font-family: roboto;
	font-size: 11px;
	font-weight: 700;
	position: relative;
}

.text-medium {
	font-size: 13px;
	font-weight: 400;
}

.condensed {
	font-family: Roboto Condensed;
}

.or {
	font-size: 13px;
	font-weight: 400;
	position: relative;
	left: 50px;
}

.invisible {
	opacity: 0;
}


/// title

.title-outer {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-content: flex-end;
	align-items: flex-end;
}

.title {
	display: flex;
	color: white;
	padding: 20px 0 20px 20px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.copyright-outer {
	color: color(white);
	padding: 0 20px 20px 0;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-content: stretch;
	align-items: flex-end;
}

.copyright {
	
	a {
		font-weight: 700;
	
		//btn reset
		text-decoration: none;
		padding: 2px 6px;
		border-radius: 4px;
		color: white;
		transition: all 0.3s ease-in-out;

		&:hover {
			color: color(grey);
		}
		
	}
	
	margin: 10px 0 0 0;
}


.symbol {
	color: color(grey);
	font-family: roboto;
	font-size: 17px;
	font-weight: 400;
	width: 150px;
}



//
.content {
	padding: 30px 20px;
	background-color: color(white);
}

.border {
	background-color: color(primary);
	height: 1px;
	width: 100%;
}

// text location

.firstChildPseudo {
	left: -6px;
	top: -10px;
}

.nth-of-type {
	left: 155px;
}

.circle-outer {
	display: flex;
	flex-direction: row;
}

.circle {
	border: 1px solid color(grey);
	color: color(grey);
	font-size: 14px;
	font-weight: 500;
	margin: 0 5px;
	width: 30px;
	height: 30px;
	border-radius: 50%;

	display: flex;
	justify-content: center;
  align-items: center;	
}

.selected {
	background-color: color(primary);
}

.circle3-parent {
	position: relative;
	left: 40px;
}

.bar {
	position: relative;
}






//circle //


// circle with number
.number {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-content: stretch;
	align-items: flex-start;
	
	p {
		margin: 0 17.7px;
	}
}


// circle 1

.circle1-bar-center{
  width: 0px;
	height: 21px;
	border: 0.5px solid color(grey);
  position: relative;
	left: 20px;
}


// circle 2

.circle2-parent {
	position: relative;
	left: 21px;
}

.circle2-bar-center{
  width: 0px;
	height: 9px;
	border: 0.5px solid color(grey);
  position: relative;
	left: 41px;
}

.circle2-bar-horizontal {
	width: 41px;
	height: 0px;
	border: 0.5px solid color(grey);
  position: relative;
	left: 20px;
}

.circle2-bar1 {
	width: 0px;
	height: 10px;
	border: 0.5px solid #666;
  position: relative;
	left: 20px;
	top: -1px;
}

.circle2-bar2 {
	width: 0px;
	height: 10px;
	border: 0.5px solid #666;
  position: absolute;
	left: 61px;
	top: 11px;	
}


// circle 3

.circle3-bar-center{
  width: 0px;
	height: 21px;
	border: 0.5px solid #666;
  position: relative;
	left: 60px;
}

.circle3-bar1 {
	width: 0px;
	height: 11px;
	border: 0.5px solid #666;
  position: absolute;
	left: 20px;
	top: 10px;	
}

.circle3-bar2 {
	width: 0px;
	height: 11px;
	border: 0.5px solid #666;
  position: absolute;
	left: 102px;
	top: 10px;	
}

.circle3-bar-horizontal {
	width: 82px;
	height: 0px;
	border: 0.5px solid #666;
  position: absolute;
	left: 20px;
	top: 10px;	
}

// circle 4

.circle4-parent {
	position: relative;
	left: 60px;
}

.circle4-bar-center{
  width: 0px;
	height: 10px;
	border: 0.5px solid #666;
  position: relative;
	left: 80px;
}

.circle4-bar1 {
	width: 0px;
	height: 12px;
	border: 0.5px solid #666;
  position: relative;
	left: 20px;
	top: -1px;
}

.circle4-bar2 {
	width: 0px;
	height: 14px;
	border: 0.5px solid #666;
  position: absolute;
	left: 61px;
	top: 11px;	
}

.circle4-bar3 {
	width: 0px;
	height: 14px;
	border: 0.5px solid #666;
  position: absolute;
	left: 102px;
	top: 11px;	
}

.circle4-bar4 {
	width: 0px;
	height: 14px;
	border: 0.5px solid #666;
  position: absolute;
	left: 142px;
	top: 11px;	
}

.circle4-bar-horizontal {
	width: 122px;
	height: 0px;
	border: 0.5px solid #666;
  position: relative;
	left: 20px;
}


// circle 5

.circle5-parent {
	position: relative;
	left: 83px;
}

.circle5-bar-center{
  width: 0px;
	height: 10px;
	border: 0.5px solid #666;
  position: relative;
	left: 102px;
}

.circle5-bar1 {
	width: 0px;
	height: 12px;
	border: 0.5px solid #666;
  position: relative;
	left: 20px;
	top: -1px;
}

.circle5-bar2 {
	width: 0px;
	height: 14px;
	border: 0.5px solid #666;
  position: absolute;
	left: 61px;
	top: 11px;	
}

.circle5-bar3 {
	width: 0px;
	height: 14px;
	border: 0.5px solid #666;
  position: absolute;
	left: 102px;
	top: 11px;	
}

.circle5-bar4 {
	width: 0px;
	height: 14px;
	border: 0.5px solid #666;
  position: absolute;
	left: 142px;
	top: 11px;	
}

.circle5-bar5 {
	width: 0px;
	height: 14px;
	border: 0.5px solid #666;
  position: absolute;
	left: 182px;
	top: 11px;	
}

.circle5-bar-horizontal {
	width: 162px;
	height: 0px;
	border: 0.5px solid #666;
  position: relative;
	left: 20px;
}



// circle 6

.circle6-parent {
	position: relative;
	left: 103px;
}

.circle6-bar-center{
  width: 0px;
	height: 10px;
	border: 0.5px solid #666;
  position: relative;
	left: 122px;
}

.circle6-bar1 {
	width: 0px;
	height: 12px;
	border: 0.5px solid #666;
  position: relative;
	left: 20px;
	top: -1px;
}

.circle6-bar2 {
	width: 0px;
	height: 14px;
	border: 0.5px solid #666;
  position: absolute;
	left: 61px;
	top: 11px;	
}

.circle6-bar3 {
	width: 0px;
	height: 14px;
	border: 0.5px solid #666;
  position: absolute;
	left: 102px;
	top: 11px;	
}

.circle6-bar4 {
	width: 0px;
	height: 14px;
	border: 0.5px solid #666;
  position: absolute;
	left: 142px;
	top: 11px;	
}

.circle6-bar5 {
	width: 0px;
	height: 14px;
	border: 0.5px solid #666;
  position: absolute;
	left: 182px;
	top: 11px;	
}

.circle6-bar6 {
	width: 0px;
	height: 14px;
	border: 0.5px solid #666;
  position: absolute;
	left: 225px;
	top: 11px;	
}

.circle6-bar-horizontal {
	width: 204px;
	height: 0px;
	border: 0.5px solid #666;
  position: relative;
	left: 20px;
}




// 2 Level + 4circle

// Level 1

.level-parent1 {
	position: relative;
	left: 40px;
}

.level-parent1-bar-center{
  width: 0px;
	height: 10px;
	border: 0.5px solid #666;
  position: relative;
	left: 60px;
}

.level-parent1-bar-horizontal {
	width: 80px;
	height: 0px;
	border: 0.5px solid #666;
  position: relative;
	left: 20px;
}

.level-parent1-bar1 {
	width: 0px;
	height: 12px;
	border: 0.5px solid #666;
  position: relative;
	left: 20px;
	top: -1px;
}

.level-parent1-bar2 {
	width: 0px;
	height: 14px;
	border: 0.5px solid #666;
  position: absolute;
	left: 100px;
	top: 11px;	
}

.levelCircle {
	margin: 0 45px;
}

.level1 {
	position: relative;
	left: 21px;
}

.flex-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-content: stretch;
	align-items: flex-start;
}


//arrow
.arrow-outer {
	position: relative;
	left: 165px;
	margin-top: 5px;
}

.arrow1 {
	width: 0;
	height: 0;
	
	border-right: 6px solid transparent ; 
	border-bottom: 8px solid #666;  //Coloured border
	border-left: 6px solid  transparent;
	position: relative;
	left: 15px;
}

.arrow2 {
	width: 0;
	height: 0;
	
	border-right: 6px solid transparent ; 
	border-bottom: 8px solid #666;  //Coloured border
	border-left: 6px solid  transparent;
	position: relative;
	left: 43px;
}

.arrow-bar-center{
  width: 0px;
	height: 10px;
	border: 0.5px solid #666;
  position: relative;
	left: 41px;
	top: 10px;
}

.arrow-bar-horizontal {
	width: 41px;
	height: 0px;
	border: 0.5px solid #666;
  position: relative;
	left: 20px;
}

.arrow-bar1 {
	width: 0px;
	height: 10px;
	border: 0.5px solid #666;
  position: absolute;
	left: 20px;
	top: 0px;
}

.arrow-bar2 {
	width: 0px;
	height: 10px;
	border: 0.5px solid #666;
  position: absolute;
	left: 61px;
	top: 0px;	
}



// etc

.marginRight {
 margin-right: 30px;
}

.hello {
	position: relative;
	left: -142px;
	top: 19px;
}

.doTheMagic {
	color: white;
	font-family: roboto;
	font-weight: 400;
	line-height: 30px;
	width: 550px;
}



//toggle
.toggleWrapper {
	background-color: color(primary);
  // position: absolute;
//   top: 50%;
//   left: 50%;
//   overflow: hidden;
//   padding: 0 200px;
//   transform: translate3d(-50%, -50%, 0);
  
//   input {
//     position: absolute;
//     left: -99em;
//   }
}

.toggle {
	
  cursor: pointer;
  display: inline-block;
  position: relative;
  width: 100px;
  height: 54px;
  background-color: color(primary-dark);
	border: 1px solid color(grey);
  border-radius: 90px - 6;
  transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  
  &:before {
    content: '