scss scss中的简单条形图

Posted 2021-05-17

#bar-chart {
	margin: 0 auto;
	max-width: 900px;
	position: relative;
}
#bar-chart h1 {
	text-align: center;
	margin: .5em 0 1em;
    font-size: 2em;
    font-weight: 600;
}
#bar-chart .row {
	position: relative;
	line-height: 1.25em;
	margin-bottom: 2em;
	height: 500px;
}
#bar-chart .row .segment {
    -webkit-box-flex: 1;
    -ms-flex: 1 100%;
    flex: 1 100%;
    display: block;
    position: relative;
}
#bar-chart .row .segment:nth-child(even) {
    background-color: rgba(255,255,255,.1);
}
#bar-chart .label {
	display: block;
	font-size: 1.25em;
}
/* X Axis */
#bar-chart .x-axis {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	padding-left: 4em;
    height: 100%
}
#bar-chart .x-axis .year {
    -webkit-box-flex: 1;
    -ms-flex: 1;flex: 1;
}
#bar-chart .x-axis .year .col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
}
@-webkit-keyframes slide-up-one {
    from {height: 0;}
    to {height: 97%}
}
@keyframes slide-up-one {
    from {height: 0;}
    to {height: 97%}
}
@-webkit-keyframes slide-up-two {
    from {height: 0;}
    to {height: 88%}
}
@keyframes slide-up-two {
    from {height: 0;}
    to {height: 88%}
}
#bar-chart .x-axis .year .col .bar {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-item-align: end;
    align-self: flex-end;
	position: relative;
	margin: 0 15%;
    height: 0px;
    -webkit-animation: slide-up-one .75s ease 1s forwards;
    animation: slide-up-one .75s ease 1s forwards;
}
#bar-chart .x-axis .year .col .bar.one {
    background-color: rgb(202,158,81);
    background-color: rgba(202,158,81,.8);
}
#bar-chart .x-axis .year .col .bar.two {
    background-color: rgb(56,181,156);
    background-color: rgba(56,181,156,.8);
    -webkit-animation-name: slide-up-two;
    animation-name: slide-up-two;
}
#bar-chart .x-axis .year .col .bar .value {
    font-size: 3em;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    line-height: 1em;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
#bar-chart .x-axis .label {
    -ms-flex-item-align: end;
    align-self: flex-end;
	padding-top: 1em;
    text-align: center;
}
/* Y Axis */
#bar-chart .y-axis {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: absolute;
    width: 100%;
}
#bar-chart .y-axis:after {
    content: "";
    width: 100%;
    display: block;
    height: 3px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    z-index: 1;
}
#bar-chart .y-axis .label {
    text-align: right;
    width: 2.5em;
    margin-top: -7px;
}

/* Benchmark */
#bar-chart .row .segment.benchmark {
    position: absolute;
    width: 86%;
    left: 9%;
    background: none;
    /*border-top: 4px dotted #38b59c;*/
    background-image: linear-gradient(to right, #38b59c 20%, rgba(255, 255, 255, 0) 0%);
    background-position: top;
    background-size: 10px 2px;
    background-repeat: repeat-x;
    top: 1%;
}
#bar-chart .y-axis .benchmark .label {
    width: auto;
    padding-right: 2em;
    color: #38b59c;
    margin-top: -1em;
    font-size: 1.5em;
}
#bar-chart .y-axis .benchmark .label:after {
    content: "Benchmark";
    display: block;
    font-size: .7em;
    margin-top: .75em;
}
font-size: .8em;
line-height: 1;
  text-transform: uppercase;
  width: 100%;
  height: 40px;
  margin-left: 130px;
  background: repeating-linear-gradient(
  to right,
  #ddd,
  #ddd 1px,
  #fff 1px,
  #fff 5%
);
  
  &:after {
    content: "";
    display: block;
    background-color: #3d9970;
    width: 50px;
    margin-bottom: 10px;
    height: 90%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color .3s ease;
    cursor: pointer;
  }
  &:hover,
  &:focus {
    &:after {
       background-color: #aaa; 
    }
  }
}

@for $i from 1 through 100 {
  .percentage-#{$i} {
    &:after {
      $value: ($i * 1%);
      width: $value;
    }
  }
}