公共css

/* 字体大小全局样式
------------------------------- */
@for $i from 10 through 32 {
	.font#{$i} {
		font-size: #{$i}px !important;
	}
}

/* 外边距、内边距全局样式
------------------------------- */
@for $i from 1 through 65 {
	.mt#{$i} {
		margin-top: #{$i}px !important;
	}
	.mr#{$i} {
		margin-right: #{$i}px !important;
	}
	.mb#{$i} {
		margin-bottom: #{$i}px !important;
	}
	.ml#{$i} {
		margin-left: #{$i}px !important;
	}
	.pt#{$i} {
		padding-top: #{$i}px !important;
	}
	.pr#{$i} {
		padding-right: #{$i}px !important;
	}
	.pb#{$i} {
		padding-bottom: #{$i}px !important;
	}
	.pl#{$i} {
		padding-left: #{$i}px !important;
	}
}

/* 圆角工具类
------------------------------- */
.rounded-sm {
	border-radius: var(--border-radius-sm) !important;
}
.rounded-md {
	border-radius: var(--border-radius-md) !important;
}
.rounded-lg {
	border-radius: var(--border-radius-lg) !important;
}
.rounded-xl {
	border-radius: var(--border-radius-xl) !important;
}
.rounded-full {
	border-radius: var(--border-radius-full) !important;
}

/* 阴影工具类
------------------------------- */
.shadow-xs {
	box-shadow: var(--shadow-xs) !important;
}
.shadow-sm {
	box-shadow: var(--shadow-sm) !important;
}
.shadow-md {
	box-shadow: var(--shadow-md) !important;
}
.shadow-lg {
	box-shadow: var(--shadow-lg) !important;
}
.shadow-xl {
	box-shadow: var(--shadow-xl) !important;
}
.shadow-none {
	box-shadow: none !important;
}

/* 过渡动画工具类
------------------------------- */
.transition-fast {
	transition: all var(--transition-fast) var(--transition-function) !important;
}
.transition-base {
	transition: all var(--transition-base) var(--transition-function) !important;
}
.transition-slow {
	transition: all var(--transition-slow) var(--transition-function) !important;
}

/* 毛玻璃效果
------------------------------- */
.backdrop-blur {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.backdrop-blur-sm {
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.backdrop-blur-lg {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.container {
	margin: 0 auto;
}
.text-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.text-ellipsis-2 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.colorsblue{
	color: #0055A2;
}
.hover-colorblue{
	cursor: pointer;
	&:hover{
		color: #0055A2 !important;
	}
}
.hover-contblue{
	cursor: pointer;
	&:hover{
		.hover-colorblue{
			color: #0055A2 !important;
		}
	}
}
.hover-bgblue{
	cursor: pointer;
	&:hover{
		background-color: #0055A2 !important;
		color: #fff !important;
	}
}

.hoverimg{
  transition:1s;
  -webkit-transition:1s;
  -moz-transition:1s;
  &:hover{
    transform:scale(1.3);
    -webkit-transform:scale(1.3); 
    -moz-transform:scale(1.3);
    -ms-transform:scale(1.3);
    -o-transform:scale(1.3);
  }
}

.wave {
  transform: translateX(0%);
  animation: wave-animation 10s linear infinite;
  transition: all 0.3s ease;
}
.wave:hover:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: ripple 1s ease-out infinite;
}