/*page { background: #f6f7f9; }*/
|
page, .bg-page, .coreshop-bg-main { background: #f7f7f7; }
|
|
|
// nvue不能用标签命名样式，不能放在微信组件中，否则微信开发工具会报警告，无法使用标签名当做选择器
|
/* #ifndef APP-NVUE */
|
image { display: inline-block; }
|
|
// 在weex，也即nvue中，所有元素默认为border-box
|
view, text { box-sizing: border-box; }
|
/* #endif */
|
|
//圆形
|
.round { border-radius: 2500px; }
|
//半圆
|
.radius { border-radius: 3px; }
|
//下划线
|
.coreshop-underline { text-decoration: underline; }
|
//顶划线
|
.coreshop-text-overline { text-decoration: overline; }
|
//删除线
|
.coreshop-text-through { text-decoration: line-through; }
|
/*隐藏*/
|
.hide { display: none; }
|
/*显示*/
|
.show { display: block; }
|
|
|
|
.coreshop-float-left { float: left; }
|
.coreshop-float-right { float: right; }
|
|
/* -- 实线 -- */
|
.coreshop-solid, .coreshop-solid-top,
|
.coreshop-solid-right,
|
.coreshop-solid-bottom,
|
.coreshop-solid-left { position: relative; }
|
|
.coreshop-solid::after,
|
.coreshop-solid-top::after,
|
.coreshop-solid-right::after,
|
.coreshop-solid-bottom::after,
|
.coreshop-solid-left::after { content: " "; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border-radius: inherit; transform: scale(0.5); transform-origin: 0 0; pointer-events: none; box-sizing: border-box; }
|
|
.coreshop-solid::after { border: 0.5px solid rgba(0, 0, 0, 0.1); }
|
.coreshop-solid-top::after { border-top: 0.5px solid rgba(0, 0, 0, 0.1); }
|
.coreshop-solid-right::after { border-right: 0.5px solid rgba(0, 0, 0, 0.1); }
|
.coreshop-solid-bottom::after { border-bottom: 0.5px solid rgba(0, 0, 0, 0.1); }
|
.coreshop-solid-left::after { border-left: 0.5px solid rgba(0, 0, 0, 0.1); }
|
|
/* flex弹性布局 */
|
|
.coreshop-display-block { display: block !important; }
|
.coreshop-display-flex { display: flex; }
|
.coreshop-display-inline-block { display: inline-block; }
|
|
.coreshop-flex { display: flex; }
|
.coreshop-flex-sub { flex: 1; }
|
.coreshop-flex-twice { flex: 2; }
|
.coreshop-flex-treble { flex: 3; }
|
.coreshop-flex-direction { flex-direction: column; }
|
.coreshop-flex-wrap { flex-wrap: wrap; }
|
|
.coreshop-align-start { align-items: flex-start; }
|
.coreshop-align-end { align-items: flex-end; }
|
.coreshop-align-center { align-items: center; }
|
.coreshop-align-stretch { align-items: stretch; }
|
.coreshop-self-start { align-self: flex-start; }
|
.coreshop-self-center { align-self: flex-center; }
|
.coreshop-self-end { align-self: flex-end; }
|
.coreshop-self-stretch { align-self: stretch; }
|
|
.coreshop-flex-direction-row { flex-direction: row }
|
.coreshop-flex-direction-row-reverse { flex-direction: row-reverse }
|
.coreshop-flex-direction-column { flex-direction: column }
|
.coreshop-flex-direction-column-reverse { flex-direction: column-reverse }
|
|
.coreshop-justify-start { justify-content: flex-start; }
|
.coreshop-justify-end { justify-content: flex-end; }
|
.coreshop-justify-center { justify-content: center; }
|
.coreshop-justify-between { justify-content: space-between; }
|
.coreshop-justify-around { justify-content: space-around; }
|
|
/*区域*/
|
.coreshop-basis-1 { flex-basis: 10%; }
|
.coreshop-basis-2 { flex-basis: 20%; }
|
.coreshop-basis-3 { flex-basis: 30%; }
|
.coreshop-basis-4 { flex-basis: 40%; }
|
.coreshop-basis-5 { flex-basis: 50%; }
|
.coreshop-basis-6 { flex-basis: 60%; }
|
.coreshop-basis-7 { flex-basis: 70%; }
|
.coreshop-basis-8 { flex-basis: 80%; }
|
.coreshop-basis-9 { flex-basis: 90%; }
|
|
/*单行*/
|
.coreshop-single-line-clamp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
/*多行*/
|
.coreshop-multiple-line-clamp { word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; white-space: normal !important; }
|
|
/*位置信息*/
|
.coreshop-vertical-align-sub { vertical-align: sub }
|
|
/*背景颜色*/
|
.coreshop-bg-red { background-color: #e54d42; color: #ffffff; }
|
.coreshop-bg-orange { background-color: #f37b1d; color: #ffffff; }
|
.coreshop-bg-yellow { background-color: #fbbd08; color: #333333; }
|
.coreshop-bg-olive { background-color: #8dc63f; color: #ffffff; }
|
.coreshop-bg-green { background-color: #39b54a; color: #ffffff; }
|
.coreshop-bg-cyan { background-color: #1cbbb4; color: #ffffff; }
|
.coreshop-bg-blue { background-color: #0081ff; color: #ffffff; }
|
.coreshop-bg-purple { background-color: #6739b6; color: #ffffff; }
|
.coreshop-bg-mauve { background-color: #9c26b0; color: #ffffff; }
|
.coreshop-bg-pink { background-color: #e03997; color: #ffffff; }
|
.coreshop-bg-brown { background-color: #a5673f; color: #ffffff; }
|
.coreshop-bg-grey { background-color: #8799a3; color: #ffffff; }
|
.coreshop-bg-gray { background-color: #f0f0f0; color: #333333; }
|
.coreshop-bg-black { background-color: #333333; color: #ffffff; }
|
.coreshop-bg-white { background-color: #ffffff; color: #666666; }
|
.coreshop-bg-shadeTop { background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01)); color: #ffffff; }
|
.coreshop-bg-shadeBottom { background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1)); color: #ffffff; }
|
|
|
.coreshop-backgroun-gradual-origin-red { background: linear-gradient(90deg,#ffbd1d,#ff4a09); }
|
.coreshop-backgroun-gradual-green-white { background: linear-gradient(180deg,#04c668,hsla(0,0%,100%,0)); }
|
.coreshop-backgroun-gradual-white-tran { background: linear-gradient(180deg,#fff,hsla(0,0%,100%,.5)); }
|
.coreshop-backgroun-gradual-light-yellow { background: linear-gradient(180deg,#ffde82,#fff3d9); }
|
.coreshop-backgroun-gradual-green { background: linear-gradient(225deg,#00c78a,#04c668); }
|
.coreshop-backgroun-gradual-purple { background: linear-gradient(225deg,#ffa8ec,#3e8eff); }
|
.coreshop-backgroun-gradual-red-pink { background: linear-gradient(225deg,#ff45d4,#ff7a66); }
|
.coreshop-backgroun-gradual-black-gray { background: linear-gradient(225deg,#97a0ab,#5b6778); }
|
.coreshop-backgroun-gradual-black-light-back { background: linear-gradient(180deg,#4f6084,#2a303e); }
|
.coreshop-backgroun-gradual-golden-origin { background: linear-gradient(180deg,#ffdab9,#f5f5f5); }
|
.coreshop-backgroun-gradual-golden-yellow { background: linear-gradient(180deg,#fff2d2,#f5f5f5); }
|
.coreshop-backgroun-gradual-azure-light-azure { background: linear-gradient(1turn,rgba(4,105,247,.2),#0469f7); }
|
.coreshop-backgroun-gradual-azure-little-azure { background: linear-gradient(270deg,#e5e9f1,#b4d3fd); }
|
.coreshop-backgroun-gradual-brown-little-brown { background: linear-gradient(90deg,#4d443f,#211919); }
|
.coreshop-backgroun-gradual-red-little-origin { background: linear-gradient(90deg,#ff7f4e,#ff3b3b); }
|
|
.coreshop-backgroun-light-orange { background: #fbf8ed; }
|
.coreshop-backgroun-light-green { background: #f0fff8; }
|
.coreshop-backgroun-light-pink { background: #fff3f3; }
|
|
.coreshop-bg-red-light { color: #e54d42; background-color: #fadbd9; }
|
.coreshop-bg-orange-light { color: #f37b1d; background-color: #fde6d2; }
|
.coreshop-bg-yellow-light { color: #fbbd08; background-color: #fef2ced2; }
|
.coreshop-bg-olive-light { color: #8dc63f; background-color: #e8f4d9; }
|
.coreshop-bg-green-light { color: #39b54a; background-color: #d7f0dbff; }
|
.coreshop-bg-cyan-light { color: #1cbbb4; background-color: #d2f1f0; }
|
.coreshop-bg-blue-light { color: #0081ff; background-color: #cce6ff; }
|
.coreshop-bg-purple-light { color: #6739b6; background-color: #e1d7f0; }
|
.coreshop-bg-mauve-light { color: #9c26b0; background-color: #ebd4ef; }
|
.coreshop-bg-pink-light { color: #e03997; background-color: #f9d7ea; }
|
.coreshop-bg-brown-light { color: #a5673f; background-color: #ede1d9; }
|
.coreshop-bg-grey-light { color: #8799a3; background-color: #e7ebed; }
|
|
/*字体颜色*/
|
.coreshop-text-green { background-color: #19be6b; color: #fff; }
|
.coreshop-text-red, .line-red, .lines-red { color: #e54d42; }
|
.coreshop-text-orange, .line-orange, .lines-orange { color: #f37b1d; }
|
.coreshop-text-yellow, .line-yellow, .lines-yellow { color: #fbbd08; }
|
.coreshop-text-olive, .line-olive, .lines-olive { color: #8dc63f; }
|
.coreshop-text-green, .line-green, .lines-green { color: #39b54a; }
|
.coreshop-text-cyan, .line-cyan, .lines-cyan { color: #1cbbb4; }
|
.coreshop-text-blue, .line-blue, .lines-blue { color: #0081ff; }
|
.coreshop-text-purple, .line-purple, .lines-purple { color: #6739b6; }
|
.coreshop-text-mauve, .line-mauve, .lines-mauve { color: #9c26b0; }
|
.coreshop-text-pink, .line-pink, .lines-pink { color: #e03997; }
|
.coreshop-text-brown, .line-brown, .lines-brown { color: #a5673f; }
|
.coreshop-text-grey, .line-grey, .lines-grey { color: #8799a3; }
|
.coreshop-text-gray, .line-gray, .lines-gray { color: #aaaaaa; }
|
.coreshop-text-black, .line-black, .lines-black { color: #333333; }
|
.coreshop-text-white, .line-white, .lines-white { color: #ffffff; }
|
|
|
.coreshop-position-absolute { position: absolute; }
|
.coreshop-position-relative { position: relative; }
|
|
.coreshop-white-space-nowrap { white-space: nowrap; }
|
|
|
.coreshop-font-weight-bold { font-weight: bold; }
|
|
.coreshop-font-xs { font-size: 11px; }
|
.coreshop-font-sm { font-size: 13px; }
|
.coreshop-font-md { font-size: 14px; }
|
.coreshop-font-lg { font-size: 15px; }
|
.coreshop-font-xl { font-size: 17px; }
|
.coreshop-flex-nowrap { flex-wrap: nowrap; }
|
|
.coreshop-text-left { text-align: left; }
|
.coreshop-text-center { text-align: center; }
|
.coreshop-text-right { text-align: right; }
|
|
//width: fit-content 根据内容自适应宽度 可以结合margin-auto 来实现居中
|
.coreshop-width-fit-content { width: fit-content; }
|
//with: min-content 使用子元素中宽度最小的。（无论子元素是inline,还是 block，都会使用最小的宽度）
|
.coreshop-width-min-content { width: min-content; }
|
//width:max-content 使用子元素中最大的开你的。无论是inline还是block
|
.coreshop-width-max-content { width: max-content; }
|
|
/*字体高度*/
|
.coreshop-line-height-initial { line-height: initial }
|
|
/*人民币符号*/
|
.coreshop-text-price::before { content: "¥"; font-size: 80%; margin-right: 2px; }
|
|
/*字体格式*/
|
.coreshop-text-bold { font-weight: bold; }
|
|
/*empty外部盒子用于空数据下整体外包*/
|
.coreshop-emptybox { text-align: center; margin: 100px auto; font-size: 16px;
|
.coreshop-btn { margin: 40px auto; width: 100px; border-radius: 16px; line-height: 37px; color: #ffffff; font-size: 13px; background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%); }
|
}
|
|
/*底部tab切换区域占高*/
|
.coreshop-tabbar-height { min-height: 50px; height: calc(50px + env(safe-area-inset-bottom) / 2); margin-top: 15px; }
|
|
|
/*宽屏按钮*/
|
.coreshop-btn { display: inline-block; box-sizing: border-box; border-radius: 0; font-size: 14px; transform: scale(1); transition: all .5s; }
|
.coreshop-btn-hover { transform: scale(.90); transition: all .5s; opacity: .8; }
|
.coreshop-btn-hover2 { transition: all .1s; opacity: .6; }
|
.coreshop-btn::after { border: none; }
|
.coreshop-btn-circle { padding: 0px 10px; height: 30px; line-height: 30px; min-width: 120px; font-size: 11px; }
|
.coreshop-btn-square { padding: 0px 20px; height: 45px; line-height: 45px; min-width: 125px; border: none !important; }
|
.coreshop-btn-fillet { border-radius: 25px; }
|
.coreshop-btn-c { background-color: #f7f7f7; }
|
.coreshop-btn-w { border: 1px solid #333; color: #333; background-color: #fff; }
|
.coreshop-btn-g { border: 1px solid #E0E0E0; color: #999; background-color: #fff; }
|
.coreshop-btn-b { border: 1px solid #333; background-color: #333; color: #fff; }
|
.coreshop-btn-o { border: 1px solid #FF7159; background-color: #FF7159; color: #fff; }
|
.coreshop-btn-half { width: 50%; }
|
.coreshop-btn-all { width: 100%; }
|
|
|
|
.coreshop-border-radius-tr-8 { border-radius: 8rpx 8rpx 0rpx 0rpx; }
|
.coreshop-border-radius-tr-16 { border-radius: 16rpx 16rpx 0rpx 0rpx; }
|
.coreshop-border-radius-tr-18 { border-radius: 18rpx 18rpx 0rpx 0rpx; }
|
.coreshop-border-radius-tr-24 { border-radius: 24rpx 24rpx 0rpx 0rpx; }
|
.coreshop-border-radius-bl-16 { border-radius: 0rpx 0rpx 16rpx 16rpx; }
|
.coreshop-border-radius-bl-18 { border-radius: 0rpx 0rpx 18rpx 18rpx; }
|
.coreshop-border-radius-bl-24 { border-radius: 0rpx 0rpx 24rpx 24rpx; }
|
.coreshop-border-radius-bl-32 { border-radius: 0rpx 0rpx 32rpx 32rpx; }
|
.coreshop-border-radius-tlb-18-l-4 { border-radius: 18rpx 18rpx 18rpx 4rpx; }
|
|
.coreshop-border-radius-trbl-18 { border-radius: 18rpx 18rpx 18rpx 18rpx; }
|
|
|
.coreshop-border-none { border: 0; }
|
|
/*图标大小*/
|
.coreshop-icon-10-20 { height: 20rpx; vertical-align: middle; width: 10rpx; }
|
.coreshop-icon-14-28 { height: 28rpx; vertical-align: middle; width: 14rpx; }
|
.coreshop-icon-18-20 { height: 20rpx; vertical-align: middle; width: 18rpx; }
|
.coreshop-icon-24-24 { height: 24rpx; vertical-align: middle; width: 24rpx; }
|
.coreshop-icon-30-30 { height: 30rpx; vertical-align: middle; width: 30rpx; }
|
.coreshop-icon-32-32 { height: 32rpx; vertical-align: middle; width: 32rpx; }
|
.coreshop-icon-36-40 { height: 40rpx; vertical-align: middle; width: 36rpx; }
|
.coreshop-icon-38-38 { height: 38rpx; vertical-align: middle; width: 38rpx; }
|
.coreshop-icon-40-40 { height: 40rpx; vertical-align: middle; width: 40rpx; }
|
.coreshop-icon-44-44 { height: 44rpx; vertical-align: middle; width: 44rpx; }
|
.coreshop-icon-48-48 { height: 48rpx; vertical-align: middle; width: 48rpx; }
|
.coreshop-icon-56-56 { height: 56rpx; vertical-align: middle; width: 56rpx; }
|
.coreshop-icon-60-58 { height: 58rpx; }
|
.coreshop-icon-60-58, .coreshop-icon-60-60 { vertical-align: middle; width: 60rpx; }
|
.coreshop-icon-60-60 { height: 60rpx; }
|
.coreshop-icon-64-64 { height: 64rpx; vertical-align: middle; width: 64rpx; }
|
.coreshop-icon-70-48 { height: 48rpx; vertical-align: middle; width: 70rpx; }
|
.coreshop-icon-80-80 { height: 80rpx; vertical-align: middle; width: 80rpx; }
|
.coreshop-icon-88-88 { height: 88rpx; vertical-align: middle; width: 88rpx; }
|
.coreshop-icon-90-90 { height: 90rpx; vertical-align: middle; width: 90rpx; }
|
.coreshop-icon-96-96 { height: 96rpx; }
|
.coreshop-icon-96-66, .coreshop-icon-96-96 { vertical-align: middle; width: 96rpx; }
|
.coreshop-icon-96-66 { height: 66rpx; }
|
.coreshop-icon-168-48 { height: 48rpx; vertical-align: middle; width: 168rpx; }
|
.coreshop-icon-148-40 { height: 40rpx; vertical-align: middle; width: 148rpx; }
|
.coreshop-icon-156-156 { height: 156rpx; vertical-align: middle; width: 156rpx; }
|
.coreshop-icon-120-32 { height: 32rpx; vertical-align: middle; width: 120rpx; }
|
.coreshop-icon-230-45 { height: 45rpx; vertical-align: middle; width: 230rpx; }
|
|
|
.coreshop-button-110-48 { height: 48rpx; width: 110rpx; }
|
.coreshop-button-138-48 { height: 48rpx; width: 138rpx; }
|
.coreshop-button-130-48 { height: 48rpx; width: 130rpx; }
|
.coreshop-button-140-56 { height: 56rpx; width: 140rpx; }
|
.coreshop-button-160-68 { height: 68rpx; width: 160rpx; }
|
.coreshop-button-120 { height: 52rpx; width: 120rpx; }
|
.coreshop-button-150 { height: 64rpx; width: 158rpx; }
|
.coreshop-button-170 { height: 56rpx; width: 180rpx; }
|
.coreshop-button-200 { height: 72rpx; width: 200rpx; }
|
.coreshop-button-240 { height: 72rpx; width: 240rpx; }
|
.coreshop-button-280 { height: 82rpx; width: 280rpx; }
|
.coreshop-button-330 { height: 72rpx; width: 330rpx; }
|
.coreshop-button-400 { height: 82rpx; width: 400rpx; }
|
.coreshop-button-450 { height: 82rpx; width: 450rpx; }
|
.coreshop-button-686 { border-radius: 12rpx; height: 82rpx; width: 686rpx; }
|
.coreshop-button-156-64 { height: 64rpx; width: 156rpx; }
|
.coreshop-button-186-64 { height: 64rpx; width: 186rpx; }
|
.coreshop-button-190-80 { height: 80rpx; width: 190rpx; }
|
.coreshop-button-210-80 { height: 80rpx; width: 210rpx; }
|
.coreshop-button-638-88 { height: 88rpx; width: 638rpx; }
|
|
|
.coreshop-image-default-placeholder { height: 336rpx; vertical-align: middle; width: 396rpx; }
|
.coreshop-image-750-400 { height: 400rpx; }
|
.coreshop-image-750-400, .coreshop-image-750-750 { vertical-align: middle; width: 750rpx; }
|
.coreshop-image-750-750 { height: 750rpx; }
|
.coreshop-image-686-300 { height: 300rpx; }
|
.coreshop-image-686-120, .coreshop-image-686-300 { vertical-align: middle; width: 686rpx; }
|
.coreshop-image-686-120 { height: 120rpx; }
|
.coreshop-image-686-200 { height: 200rpx; }
|
.coreshop-image-686-200, .coreshop-image-686-220 { vertical-align: middle; width: 686rpx; }
|
.coreshop-image-686-220 { height: 220rpx; }
|
.coreshop-image-686-320 { height: 320rpx; }
|
.coreshop-image-686-320, .coreshop-image-686-420 { vertical-align: middle; width: 686rpx; }
|
.coreshop-image-686-420 { height: 420rpx; }
|
.coreshop-image-686-380 { height: 380rpx; vertical-align: middle; width: 686rpx; }
|
.coreshop-image-500-420 { height: 420rpx; vertical-align: middle; width: 500rpx; }
|
.coreshop-image-620-120 { height: 120rpx; vertical-align: middle; width: 620rpx; }
|
.coreshop-image-250-250 { height: 250rpx; vertical-align: middle; width: 250rpx; }
|
.coreshop-image-260-260 { height: 260rpx; vertical-align: middle; width: 260rpx; }
|
.coreshop-image-148-148 { height: 148rpx; vertical-align: middle; width: 148rpx; }
|
.coreshop-image-140-140 { height: 140rpx; vertical-align: middle; width: 140rpx; }
|
.coreshop-image-150-150 { height: 150rpx; vertical-align: middle; width: 150rpx; }
|
.coreshop-image-160-160 { height: 160rpx; vertical-align: middle; width: 160rpx; }
|
.coreshop-image-202-202 { height: 202rpx; vertical-align: middle; width: 202rpx; }
|
.coreshop-image-330-330 { height: 330rpx; vertical-align: middle; width: 330rpx; }
|
.coreshop-image-326-326 { height: 326rpx; vertical-align: middle; width: 326rpx; }
|
.coreshop-image-332-325 { height: 325rpx; vertical-align: middle; width: 331rpx; }
|
.coreshop-image-330-240 { height: 240rpx; vertical-align: middle; width: 330rpx; }
|
.coreshop-image-332-200 { height: 200rpx; vertical-align: middle; width: 332rpx; }
|
.coreshop-image-396-280 { height: 280rpx; vertical-align: middle; width: 396rpx; }
|
.coreshop-image-330-420 { height: 420rpx; vertical-align: middle; width: 330rpx; }
|
.coreshop-image-396-282 { height: 282rpx; vertical-align: middle; width: 396rpx; }
|
.coreshop-image-180-180 { height: 180rpx; vertical-align: middle; width: 180rpx; }
|
.coreshop-image-190-190 { height: 190rpx; vertical-align: middle; width: 190rpx; }
|
.coreshop-image-212-212 { height: 212rpx; vertical-align: middle; width: 212rpx; }
|
.coreshop-image-220-220 { height: 220rpx; vertical-align: middle; width: 220rpx; }
|
.coreshop-image-230-230 { height: 230rpx; vertical-align: middle; width: 230rpx; }
|
.coreshop-image-298-338 { height: 338rpx; vertical-align: middle; width: 298rpx; }
|
.coreshop-image-750-510 { height: 510rpx; vertical-align: middle; width: 750rpx; }
|
.coreshop-image-196-126 { height: 126rpx; vertical-align: middle; width: 196rpx; }
|
.coreshop-image-110-110 { height: 110rpx; vertical-align: middle; width: 110rpx; }
|
.coreshop-image-88-88 { height: 88rpx; vertical-align: middle; width: 88rpx; }
|
.coreshop-image-98-98 { height: 98rpx; vertical-align: middle; width: 98rpx; }
|
.coreshop-image-750-64 { height: 64rpx; width: 750rpx; }
|
|
.tag-64 { border-radius: 8rpx; padding: 4rpx 10rpx; }
|
|
|
// 定义宽度百分比等分
|
@for $i from 1 through 100 {
|
.coreshop-percent-#{$i} { width: $i#{'%'}; }
|
}
|
|
// 定义字体(px)单位
|
@for $i from 0 through 100 {
|
.coreshop-min-height-#{$i} { min-height: $i + px; }
|
}
|
|
// 定义字体(px)单位
|
@for $i from 0 through 100 {
|
.coreshop-line-height-#{$i} { line-height: $i + px; }
|
}
|
|
// 定义flex等分
|
@for $i from 0 through 12 {
|
.coreshop-flex-#{$i} { flex: $i; }
|
}
|
|
// 定义字体(px)单位
|
@for $i from 0 through 40 {
|
.coreshop-font-#{$i} { font-size: $i + px; }
|
}
|
|
// 定义圆角(px)单位
|
@for $i from 0 through 40 {
|
.coreshop-border-radius-#{$i} { border-radius: $i + px; }
|
}
|
|
|
// 定义内外边距，历遍1-80
|
@for $i from 0 through 80 {
|
// 只要双数和能被5除尽的数
|
@if $i % 2 == 0 or $i % 5 == 0 {
|
// 得出：coreshop-margin-30或者u-m-30
|
.coreshop-margin-#{$i}, .c-m-#{$i} { margin: $i + px !important; }
|
|
// 得出：coreshop-padding-15或者u-p-30
|
.coreshop-padding-#{$i}, .c-p-#{$i} { padding: $i + px !important; }
|
|
@each $short, $long in l left, t top, r right, b bottom {
|
// 缩写版，结果如： u-m-l-30
|
// 定义外边距
|
.c-m-#{$short}-#{$i} { margin-#{$long}: $i + px !important; }
|
|
// 定义内边距
|
.c-p-#{$short}-#{$i} { padding-#{$long}: $i + px !important; }
|
|
// 完整版，结果如：coreshop-margin-left-30
|
// 定义外边距
|
.coreshop-margin-#{$long}-#{$i} { margin-#{$long}: $i + px !important; }
|
|
// 定义内边距
|
.coreshop-padding-#{$long}-#{$i} { padding-#{$long}: $i + px !important; }
|
}
|
}
|
}
|
