utils-＞css-＞statics_shape

@import './mixed_variables.scss';

// 隐藏滚动条------------------------------------------------------------------------
/*webkit内核*/
.scroll_content::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.scroll_content::-webkit-scrollbar-button {
  background-color: rgba(0, 0, 0, 0);
}

.scroll_content::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0);
}

.scroll_content::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0);
}

.scroll_content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0);
}

.scroll_content::-webkit-scrollbar-corner {
  background-color: rgba(0, 0, 0, 0);
}

.scroll_content::-webkit-scrollbar-resizer {
  background-color: rgba(0, 0, 0, 0);
}

.scroll_content::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/*o内核*/
.scroll_content .-o-scrollbar {
  -moz-appearance: none !important;
  background: rgba(0, 255, 0, 0) !important;
}

.scroll_content::-o-scrollbar-button {
  background-color: rgba(0, 0, 0, 0);
}

.scroll_content::-o-scrollbar-track {
  background-color: rgba(0, 0, 0, 0);
}

.scroll_content::-o-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0);
}

.scroll_content::-o-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0);
}

.scroll_content::-o-scrollbar-corner {
  background-color: rgba(0, 0, 0, 0);
}

.scroll_content::-o-scrollbar-resizer {
  background-color: rgba(0, 0, 0, 0);
}

/*IE10,IE11,IE12*/
.scroll_content {
  -ms-scroll-chaining: chained;
  -ms-overflow-style: none;
  -ms-content-zooming: zoom;
  -ms-scroll-rails: none;
  -ms-content-zoom-limit-min: 100%;
  -ms-content-zoom-limit-max: 500%;
  -ms-scroll-snap-type: proximity;
  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
  -ms-overflow-style: none;
  overflow: auto;
}

// 滚动条样式-----------------------------------------------------
/* 滚动条 */

.blueScroll::-webkit-scrollbar {
  width: 2px;
  height: 2px;
  /*高宽分别对应横竖滚动条的尺寸*/
  margin: 4px 0 4px;
}

/*正常情况下滑块的样式*/

.blueScroll::-webkit-scrollbar-thumb {
  background-color: #29acfe;
  border-radius: 10px;
  // -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}

/*鼠标悬浮在该类指向的控件上时滑块的样式*/

.blueScroll:hover::-webkit-scrollbar-thumb {
  // background-color: rgba(0, 0, 0, .2);
  // border-radius: 10px;
  // -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}

/*鼠标悬浮在滑块上时滑块的样式*/

.blueScroll::-webkit-scrollbar-thumb:hover {
  // background-color: rgba(0, 0, 0, .4);
  // -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}

/*正常时候的主干部分*/

.blueScroll::-webkit-scrollbar-track {
  border-radius: 10px;
  // -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0);
  background-color: #39495e;
}

/*鼠标悬浮在滚动条上的主干部分*/

.blueScroll::-webkit-scrollbar-track:hover {
  // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
}



// 滚动指示器-----------------------------------------------------


// 显示labelTooltip小hint
.labelTooltip:hover:after  {
  position: absolute;
  left:70%;
  top: 30%;
  padding: 5px;
  background-color: white;
  border-radius: 5px;
  transform: translate(0%,-50%);
  color: #999;
  /*这里显示的内容为表格中自定义的labelTooltip属性对应的值*/
  content: attr(labelTooltip);
   z-index:1000;
  font-size: 12px;
}



//框的阴影------------------------------------------------------------------------
.divShadow {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}


// 模拟边框------------------------------------------------------------------------

.border_1px {
  position: relative;

  &::after {
    position: absolute;
    left: 50%;
    top: 0;
    border: 2px solid $red;
    width: 200%;
    height: 200%;
    content: "";
    transform: scale(.5);
    transform-origin: left top;
  }
}


// 叉------------------------------------------------------------------------
.cha {
  width: 20px;
  height: 20px;
  margin: auto;
  position: relative;
}

.cha::before,
.cha::after {
  content: "";
  position: absolute;
  /*方便进行定位*/
  height: 20px;
  width: 1.5px;
  top: 0px;
  right: 9px;
  /*设置top和right使图像在20*20框中居中*/
  background: #f39800;
}

.cha::before {
  transform: rotate(45deg);
  /*进行旋转*/
}

.cha::after {
  transform: rotate(-45deg);
}

// 勾------------------------------------------------------------------------
.gou {
  width: 9px;
  height: 18px;
  border-right: 2px solid #f39800;
  border-bottom: 2px solid #f39800;
  transform: rotate(40deg);
}


// 下三角------------------------------------------------------------------------
.triangl_bottom {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-top: 8px solid #e6ebf5;
  border-right: 8px solid transparent;
}


// div添加尖角样式------------------------------------------------------------------------
.angle-wrapper:after {
  content: "";
  width: 0;
  height: 0;
  border: 18px solid transparent;
  border-left-color: #FFFFFF;
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -18px;
}

// 底部横线
.bottomLine::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  opacity: 0.33;
  background-color: #7c8491;
}

// 框的阴影------------------------------------------------------------------------
.box_shadow {
  box-shadow: 0 12px 20px -10px #DFE7DF;
}

// 方格背景------------------------------------------------------------------------

.square-bg {

  background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
}


/*
饼图------------------------------------------------------------------------
*/

.pie-chart {
  border-radius: 100%;
  width: 300px;
  height: 300px;
  background-image: conic-gradient(red 0 25%, purple 25% 30%, orange 30% 55%, blue 55% 70%, green 70% 100%);
}


// 遮罩------------------------------------------------------------------------
.mask {
  width: 100%;
  height: 100%;
  //  将连带内部元素透明，别用
  //  background-color: #000;
  //  opacity: .6;
  //  filter: alpha(opacity=60);
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1100;
}

/*动态边框，鼠标悬浮时动态渐变显示的边框------------------------------------------------------------------------
  <div class="dynamic-border">iCSS</div>
*/
.dynamic-border {
  width: 200px;
  height: 80px;
  background: linear-gradient(0, $red 2px, $red 2px) no-repeat left top/0 2px,
    linear-gradient(-90deg, $red 2px, $red 2px) no-repeat right top/2px 0,
    linear-gradient(-180deg, $red 2px, $red 2px) no-repeat right bottom/0 2px,
    linear-gradient(-270deg, $red 2px, $red 2px) no-repeat left bottom/2px 0;
  cursor: pointer;
  line-height: 80px;
  text-align: center;
  font-weight: bold;
  font-size: 50px;
  color: $red;
  transition: all 300ms;

  &:hover {
    background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
  }
}

// 按钮------------------------------------------------------------------------
@mixin colorBtn($color) {
  background: $color;

  &:hover {
    color: $color;

    &:before,
    &:after {
      background: $color;
    }
  }
}

.blue-btn {
  @include colorBtn($blue)
}

.light-blue-btn {
  @include colorBtn($light-blue)
}

.red-btn {
  @include colorBtn($red)
}

.pink-btn {
  @include colorBtn($pink)
}

.green-btn {
  @include colorBtn($green)
}

.tiffany-btn {
  @include colorBtn($tiffany)
}

.yellow-btn {
  @include colorBtn($yellow)
}

.pan-btn {
  font-size: 14px;
  color: #fff;
  padding: 14px 36px;
  border-radius: 8px;
  border: none;
  outline: none;
  transition: 600ms ease all;
  position: relative;
  display: inline-block;

  &:hover {
    background: #fff;

    &:before,
    &:after {
      width: 100%;
      transition: 600ms ease all;
    }
  }

  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 2px;
    width: 0;
    transition: 400ms ease all;
  }

  &::after {
    right: inherit;
    top: inherit;
    left: 0;
    bottom: 0;
  }
}

.custom-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  color: #fff;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 4px;
}


/*
立体按钮------------------------------------------------------------------------
*/
.stereo-btn {
  padding: 10px 20px;
  outline: none;
  border: none;
  border-radius: 10px;
  background-image: linear-gradient(blue, green);
  box-shadow: 0 10px 0 blue;
  cursor: pointer;
  text-shadow: 0 5px 5px #ccc;
  font-size: 50px;
  color: #fff;
  transition: all 300ms;

  &:active {
    box-shadow: 0 5px 0 blue;
    transform: translate3d(0, 5px, 0);
  }
}


/*
星级评分------------------------------------------------------------------------

<div class="bruce flex-ct-x">
	<div class="star-rating">
		<input type="radio" name="rate">
		<input type="radio" name="rate">
		<input type="radio" name="rate">
		<input type="radio" name="rate">
		<input type="radio" name="rate">
	</div>
</div>
*/

.star-rating {
  display: flex;
  flex-direction: row-reverse;

  input {
    width: 30px;
    height: 30px;
    appearance: none;
    cursor: pointer;
    line-height: 30px;
    text-align: center;
    font-size: 30px;
    transition: all 300ms;

    &::after {
      color: purple;
      content: "☆";
      transition: all 300ms;
    }

    &:hover {
      transform: scale(1.2);
    }

    &:checked,
    &:hover {

      &::after,
      &~input::after {
        color: $red;
        content: "★";
      }
    }
  }
}


/*
通过mask为图像背景生成蒙层提供遮罩效果------------------------------------------------------------------------
<div class="mask-layer"></div>
*/


// $mask-bg: "https://yangzw.vip/static/codepen/mask-bg.jpg";
// $mask-text: "https://yangzw.vip/static/codepen/mask-text.jpg";
// $logo: "https://yangzw.vip/static/codepen/logo-netease.svg";

// .bruce {
// 	overflow: hidden;
// 	&::after {
// 		position: absolute;
// 		left: -20px;
// 		right: -20px;
// 		top: -20px;
// 		bottom: -20px;
// 		background: url($mask-bg) no-repeat center/cover;
// 		filter: blur(10px);
// 		content: "";
// 	}
// }
// .mask-layer {
// 	position: relative;
// 	z-index: 9;
// 	width: 600px;
// 	height: 300px;
// 	background: url($mask-text) left center/150% auto;
// 	mask: url($logo) center/cover;
// 	animation: move 10s infinite;
// }
// @keyframes move {
// 	0% {
// 		background-position-x: 0;
// 	}
// 	50% {
// 		background-position-x: 100%;
// 	}
// }



/*
使用filter描绘头像彩色阴影------------------------------------------------------------------------
<div class="avatar-shadow"></div>
*/

// $avatar: "https://yangzw.vip/static/codepen/thor.jpg";

// .avatar-shadow {
// 	position: relative;
// 	border-radius: 100%;
// 	width: 200px;
// 	height: 200px;
// 	background: url($avatar) no-repeat center/cover;
// 	&::after {
// 		position: absolute;
// 		left: 0;
// 		top: 10%;
// 		z-index: -1;
// 		border-radius: 100%;
// 		width: 100%;
// 		height: 100%;
// 		background: inherit;
// 		filter: blur(10px) brightness(80%) opacity(.8);
// 		content: "";
// 		transform: scale(.95);
// 	}
// }



/*
彩带------------------------------------------------------------------------
<div class="colour-bar"></div>
*/ 
.colour-bar {
	width: 500px;
	height: 50px;
	background-image: repeating-linear-gradient(90deg, red, red 50px, purple 50px, purple 100px);
}

/*
文字底部波浪线------------------------------------------------------------------------
	<p class="waveline-text">波浪线文字</p>
*/ 
@mixin waveline($h, $color: $red) {
	position: relative;
	&::after {
		position: absolute;
		left: 0;
		top: 100%;
		width: 100%;
		height: $h;
		background: linear-gradient(135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%);
		background-size: $h * 2 $h * 2;
		content: "";
	}
}
.waveline-text {
	height: 20px;
	line-height: 20px;
	letter-spacing: 10px;
	@include waveline(10px);
}

/*
分栏阅读------------------------------------------------------------------------

<div class="bruce flex-ct-x">
	<div class="stretching-column">
		<div class="left">
			<div class="resize-bar"></div>
			<div class="resize-line"></div>
			<div class="resize-text">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>                                            
		</div>
		<div class="right">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
	</div>
</div>
*/
.bruce {

  .stretching-column {
    overflow: hidden;
    border: 1px solid $blue;
    width: 600px;
    height: 300px;
    line-height: 20px;
    font-size: 16px;
    color: orange;

    .left {
      overflow: hidden;
      float: left;
      position: relative;
      height: 100%;
    }

    .right {
      overflow: hidden;
      padding: 10px;
      height: 100%;
      background-color: #f0f0f0;
      word-break: break-all;
    }
  }

  .resize-bar {
    overflow: scroll;
    width: 200px;
    height: 100%;
    opacity: 0;
    resize: horizontal;

    &::-webkit-scrollbar {
      width: 200px;
      height: 100%;
    }

    &:hover,
    &:active {
      &~.resize-line {
        border-left: 1px dashed blue;
      }
    }
  }

  .resize-line {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    border-left: 1px solid #ccc;
    border-right: 2px solid #f0f0f0;
    pointer-events: none;
  }

  .resize-text {
    overflow-x: hidden;
    position: absolute;
    left: 0;
    right: 5px;
    top: 0;
    bottom: 0;
    padding: 10px;
    word-break: break-all;
  }
}

/*
标签导航栏------------------------------------------------------------------------
<div class="bruce flex-ct-x">
	<div class="tab-navbar">
		<input type="radio" name="tab" id="tab1" checked>
		<input type="radio" name="tab" id="tab2">
		<input type="radio" name="tab" id="tab3">
		<input type="radio" name="tab" id="tab4">
		<nav>
			<label for="tab1">标题1</label>
			<label for="tab2">标题2</label>
			<label for="tab3">标题3</label>
			<label for="tab4">标题4</label>
		</nav>
		<main>
			<ul>
				<li>内容1</li>
				<li>内容2</li>
				<li>内容3</li>
				<li>内容4</li>
			</ul>
		</main>
	</div>
</div>
*/

.tab-navbar {
  display: flex;
  overflow: hidden;
  flex-direction: column-reverse;
  border-radius: 10px;
  width: 300px;
  height: 400px;

  input {
    display: none;

    &:nth-child(1):checked {
      &~nav label:nth-child(1) {
        @extend .tab-navbar_active;
      }

      &~main ul {

        transform: translate3d(0, 0, 0);
      }
    }

    &:nth-child(2):checked {
      &~nav label:nth-child(2) {
        @extend .tab-navbar_active;
      }

      &~main ul {

        transform: translate3d(-25%, 0, 0);
      }
    }

    &:nth-child(3):checked {
      &~nav label:nth-child(3) {
        @extend .tab-navbar_active;
      }

      &~main ul {

        transform: translate3d(-50%, 0, 0);
      }
    }

    &:nth-child(4):checked {
      &~nav label:nth-child(4) {
        @extend .tab-navbar_active;
      }

      &~main ul {

        transform: translate3d(-75%, 0, 0);
      }
    }
  }

  nav {
    display: flex;
    height: 40px;
    background-color: #f0f0f0;
    line-height: 40px;
    text-align: center;

    label {
      flex: 1;
      cursor: pointer;
      transition: all 300ms;
    }
  }

  main {
    flex: 1;

    ul {
      display: flex;
      flex-wrap: nowrap;
      width: 400%;
      height: 100%;
      transition: all 300ms;
    }

    li {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      font-weight: bold;
      font-size: 20px;
      color: #fff;
    }
  }
}

.tab-navbar_active {
  background-color: $green;
  color: #fff;
}


/**
九宫格相册------------------------------------------------------------------------
<div class="bruce flex-ct-x">
	<ul class="response-album">
		<li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
		<li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
		<li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
		<li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
		<li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
		<li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
		<li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
		<li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
		<li class="item"><img src="https://yangzw.vip/static/codepen/ab-3.jpg"></li>
	</ul>
</div>
*/

@mixin square($count: 2) {
  $length: calc((100% - #{$count} * 10px) / #{$count});
  width: $length;
  height: $length;
}

.response-album {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 400px;
  height: 400px;

  li {
    display: flex;
    overflow: hidden;
    justify-content: center;
    margin: 5px;
    background-color: #f0f0f0;
    @include square(3);
  }

  img {
    width: 100%;
    height: 100%;

    object-fit: cover;
  }


  // 一个元素
  .item:only-child {
    border-radius: 10px;
    width: auto;
    max-width: 80%;
    height: auto;
    max-height: 80%;
  }

  // 两个元素
  .item:first-child:nth-last-child(2),
  .item:first-child:nth-last-child(2)~.item:nth-child(2) {
    @include square(2);
  }

  .item:first-child:nth-last-child(2) {
    border-radius: 10px 0 0 10px;
  }

  .item:first-child:nth-last-child(2)~.item:nth-child(2) {
    border-radius: 0 10px 10px 0;
  }

  // 三个元素
  .item:first-child:nth-last-child(3),
  .item:first-child:nth-last-child(3)~.item:nth-child(2),
  .item:first-child:nth-last-child(3)~.item:nth-child(3) {
    @include square(2);
  }

  .item:first-child:nth-last-child(3) {
    border-top-left-radius: 10px;
  }

  .item:first-child:nth-last-child(3)~.item:nth-child(2) {
    border-top-right-radius: 10px;
  }

  .item:first-child:nth-last-child(3)~.item:nth-child(3) {
    border-bottom-left-radius: 10px;
  }

  // 四个元素
  .item:first-child:nth-last-child(4),
  .item:first-child:nth-last-child(4)~.item:nth-child(2),
  .item:first-child:nth-last-child(4)~.item:nth-child(3),
  .item:first-child:nth-last-child(4)~.item:nth-child(4) {
    @include square(2);
  }

  .item:first-child:nth-last-child(4) {
    border-top-left-radius: 10px;
  }

  .item:first-child:nth-last-child(4)~.item:nth-child(2) {
    border-top-right-radius: 10px;
  }

  .item:first-child:nth-last-child(4)~.item:nth-child(3) {
    border-bottom-left-radius: 10px;
  }

  .item:first-child:nth-last-child(4)~.item:nth-child(4) {
    border-bottom-right-radius: 10px;
  }

  // 五个元素
  .item:first-child:nth-last-child(5) {
    border-top-left-radius: 10px;
  }

  .item:first-child:nth-last-child(5)~.item:nth-child(3) {
    border-top-right-radius: 10px;
  }

  .item:first-child:nth-last-child(5)~.item:nth-child(4) {
    border-bottom-left-radius: 10px;
  }

  // 六个元素
  .item:first-child:nth-last-child(6) {
    border-top-left-radius: 10px;
  }

  .item:first-child:nth-last-child(6)~.item:nth-child(3) {
    border-top-right-radius: 10px;
  }

  .item:first-child:nth-last-child(6)~.item:nth-child(4) {
    border-bottom-left-radius: 10px;
  }

  .item:first-child:nth-last-child(6)~.item:nth-child(6) {
    border-bottom-right-radius: 10px;
  }

  // 七个元素
  .item:first-child:nth-last-child(7) {
    border-top-left-radius: 10px;
  }

  .item:first-child:nth-last-child(7)~.item:nth-child(3) {
    border-top-right-radius: 10px;
  }

  .item:first-child:nth-last-child(7)~.item:nth-child(7) {
    border-bottom-left-radius: 10px;
  }

  // 八个元素
  .item:first-child:nth-last-child(8) {
    border-top-left-radius: 10px;
  }

  .item:first-child:nth-last-child(8)~.item:nth-child(3) {
    border-top-right-radius: 10px;
  }

  .item:first-child:nth-last-child(8)~.item:nth-child(7) {
    border-bottom-left-radius: 10px;
  }

  // 九个元素
  .item:first-child:nth-last-child(9) {
    border-top-left-radius: 10px;
  }

  .item:first-child:nth-last-child(9)~.item:nth-child(3) {
    border-top-right-radius: 10px;
  }

  .item:first-child:nth-last-child(9)~.item:nth-child(7) {
    border-bottom-left-radius: 10px;
  }

  .item:first-child:nth-last-child(9)~.item:nth-child(9) {
    border-bottom-right-radius: 10px;
  }

}