From 8002ac6958bdbb4143d0eab8f189926db099005a Mon Sep 17 00:00:00 2001 From: neverland Date: Wed, 28 Nov 2018 21:12:48 +0800 Subject: [PATCH] [improvement] update basic icons (#980) --- example/pages/icon/config.js | 413 ++++++++++++++++++++++++++++++++++ example/pages/icon/index.js | 115 ++-------- example/pages/icon/index.wxml | 82 ++++--- example/pages/icon/index.wxss | 13 +- packages/cell/index.less | 15 +- packages/cell/index.ts | 5 - packages/cell/index.wxml | 4 +- packages/checkbox/index.less | 10 +- packages/icon/index.less | 198 ++++++++-------- packages/nav-bar/index.less | 1 - packages/nav-bar/index.wxml | 3 +- packages/radio/index.less | 6 +- packages/tabs/index.less | 18 +- packages/toast/index.less | 4 +- 14 files changed, 613 insertions(+), 274 deletions(-) create mode 100644 example/pages/icon/config.js diff --git a/example/pages/icon/config.js b/example/pages/icon/config.js new file mode 100644 index 00000000..c28b4408 --- /dev/null +++ b/example/pages/icon/config.js @@ -0,0 +1,413 @@ +export default { + name: 'vant-icon', + basic: [ + { + src: 'success.svg', + css: 'success' + }, + { + src: 'cross.svg', + css: 'cross' + }, + { + src: 'fail.svg', + css: 'fail' + }, + { + src: 'arrow.svg', + css: 'arrow' + }, + { + src: 'arrow-left.svg', + css: 'arrow-left' + }, + { + src: 'arrow-up.svg', + css: 'arrow-up' + }, + { + src: 'arrow-down.svg', + css: 'arrow-down' + } + ], + outline: [ + { + src: 'close.svg', + css: 'close' + }, + { + src: '升级地址.svg', + css: 'upgrade' + }, + { + src: '加购2.svg', + css: 'add-o' + }, + { + src: '认证通过.svg', + css: 'passed' + }, + { + src: '客服.svg', + css: 'chat' + }, + { + src: '答疑.svg', + css: 'question' + }, + { + src: 'clock.svg', + css: 'clock' + }, + { + src: '金币.svg', + css: 'gold-coin' + }, + { + src: '播放.svg', + css: 'play' + }, + { + src: '暂停.svg', + css: 'pause' + }, + { + src: '停止.svg', + css: 'stop' + }, + { + src: 'more-o.svg', + css: 'more-o' + }, + { + src: 'info-o.svg', + css: 'info-o' + }, + { + src: 'share.svg', + css: 'share' + }, + { + src: 'aim.svg', + css: 'aim' + }, + { + src: '喜欢.svg', + css: 'like-o' + }, + { + src: 'star-o.svg', + css: 'star-o' + }, + { + src: '物流.svg', + css: 'logistics' + }, + { + src: 'edit.svg', + css: 'edit' + }, + { + src: '兑换.svg', + css: 'exchange' + }, + { + src: 'location.svg', + css: 'location' + }, + { + src: '购物车2.svg', + css: 'cart' + }, + { + src: '店铺.svg', + css: 'shop' + }, + { + src: '送礼.svg', + css: 'gift' + }, + { + src: '联系人.svg', + css: 'contact' + }, + { + src: 'wap首页.svg', + css: 'wap-home' + }, + { + src: '积分.svg', + css: 'points' + }, + { + src: '折扣.svg', + css: 'discount' + }, + { + src: '积分礼包.svg', + css: 'point-gift' + }, + { + src: '售后.svg', + css: 'after-sale' + }, + { + src: '编辑资料.svg', + css: 'edit-data' + }, + { + src: '删除.svg', + css: 'delete' + }, + { + src: '记录.svg', + css: 'records' + }, + { + src: '已完成.svg', + css: 'completed' + }, + { + src: '认证.svg', + css: 'certificate' + }, + { + src: '待发货2.svg', + css: 'tosend' + }, + { + src: '已完成2.svg', + css: 'sign' + }, + { + src: 'photo.svg', + css: 'photo' + }, + { + src: 'idcard.svg', + css: 'idcard' + }, + { + src: '首页.svg', + css: 'home' + }, + { + src: '包邮.svg', + css: 'free-postage' + }, + { + src: '返现记录.svg', + css: 'cash-back-record' + }, + { + src: '积分商城.svg', + css: 'points-mall' + }, + { + src: '兑换记录.svg', + css: 'exchange-record' + }, + { + src: '待付款.svg', + css: 'pending-payment' + }, + { + src: '待接单.svg', + css: 'pending-orders' + }, + { + src: '待发货.svg', + css: 'pending-deliver' + }, + { + src: '待评价.svg', + css: 'pending-evaluate' + }, + { + src: '密码可见.svg', + css: 'password-view' + }, + { + src: '密码不见.svg', + css: 'password-not-view' + }, + { + src: '单选.svg', + css: 'check' + }, + { + src: '搜索.svg', + css: 'search' + }, + { + src: '购物车3.svg', + css: 'cart-o' + } + ], + filled: [ + { + src: '加购.svg', + css: 'add' + }, + { + src: 'checked.svg', + css: 'checked' + }, + { + src: 'warn.svg', + css: 'warn' + }, + { + src: '清除搜索.svg', + css: 'clear' + }, + { + src: 'underway.svg', + css: 'underway' + }, + { + src: 'more.svg', + css: 'more' + }, + { + src: '喜欢2.svg', + css: 'like' + }, + { + src: 'star.svg', + css: 'star' + }, + { + src: '拍照.svg', + css: 'photograph' + }, + { + src: '二维码失效.svg', + css: 'qr-invalid' + }, + { + src: '二维码.svg', + css: 'qr' + }, + { + src: '添加.svg', + css: 'add2' + }, + { + src: '微信支付.svg', + css: 'wechat' + }, + { + src: '支付宝支付.svg', + css: 'alipay' + }, + { + src: 'wap导航.svg', + css: 'wap-nav' + }, + { + src: '有赞E卡.svg', + css: 'ecard-pay' + }, + { + src: '余额支付.svg', + css: 'balance-pay' + }, + { + src: '找人代付.svg', + css: 'peer-pay' + }, + { + src: '信用卡支付.svg', + css: 'credit-pay' + }, + { + src: '借记卡支付.svg', + css: 'debit-pay' + }, + { + src: '其他支付方式.svg', + css: 'other-pay' + }, + { + src: '购物车1.svg', + css: 'shopping-cart' + }, + { + src: '浏览记录.svg', + css: 'browsing-history' + }, + { + src: '商品收藏.svg', + css: 'goods-collect' + }, + { + src: '店铺收藏.svg', + css: 'shop-collect' + }, + { + src: '收礼物.svg', + css: 'receive-gift' + }, + { + src: '送出赠品.svg', + css: 'send-gift' + }, + { + src: '设置.svg', + css: 'setting' + }, + { + src: '优惠券.svg', + css: 'coupon' + }, + { + src: '礼品卡支付.svg', + css: 'gift-card-pay' + }, + { + src: '货到付款.svg', + css: 'cash-on-deliver' + }, + { + src: '电话.svg', + css: 'phone' + }, + { + src: '描述.svg', + css: 'description' + }, + { + src: '卡.svg', + css: 'card' + }, + { + src: '会员余额.svg', + css: 'value-card' + }, + { + src: '礼卡.svg', + css: 'gift-card' + }, + { + src: 'HOT.svg', + css: 'hot' + }, + { + src: 'NEW.svg', + css: 'new' + }, + { + src: '新品.svg', + css: 'new-arrival' + }, + { + src: '热卖.svg', + css: 'hot-sale' + }, + { + src: 'question2.svg', + css: 'question2' + } + ] +}; diff --git a/example/pages/icon/index.js b/example/pages/icon/index.js index cb51716e..015ff4e1 100644 --- a/example/pages/icon/index.js +++ b/example/pages/icon/index.js @@ -1,106 +1,21 @@ import Page from '../../common/page'; +import config from './config'; + +const basic = config.basic.map(item => item.css); +const outline = config.outline.map(item => item.css); +const filled = config.filled.map(item => item.css); Page({ data: { - icons: [ - 'close', - 'upgrade', - 'add-o', - 'passed', - 'chat', - 'question', - 'clock', - 'gold-coin', - 'play', - 'pause', - 'stop', - 'more-o', - 'info-o', - 'share', - 'aim', - 'like-o', - 'logistics', - 'edit', - 'exchange', - 'location', - 'cart', - 'shop', - 'gift', - 'contact', - 'wap-home', - 'points', - 'discount', - 'point-gift', - 'after-sale', - 'edit-data', - 'delete', - 'records', - 'completed', - 'certificate', - 'tosend', - 'sign', - 'photo', - 'idcard', - 'home', - 'free-postage', - 'cash-back-record', - 'points-mall', - 'exchange-record', - 'pending-payment', - 'pending-orders', - 'pending-deliver', - 'pending-evaluate', - 'password-view', - 'password-not-view', - 'check', - 'arrow', - 'arrow-left', - 'search', - 'success', - 'fail', - 'add', - 'checked', - 'warn', - 'clear', - 'underway', - 'more', - 'like', - 'photograph', - 'qr-invalid', - 'qr', - 'add2', - 'wechat', - 'alipay', - 'wap-nav', - 'ecard-pay', - 'balance-pay', - 'peer-pay', - 'credit-pay', - 'debit-pay', - 'other-pay', - 'shopping-cart', - 'browsing-history', - 'goods-collect', - 'shop-collect', - 'receive-gift', - 'send-gift', - 'setting', - 'coupon', - 'gift-card-pay', - 'cash-on-deliver', - 'phone', - 'description', - 'card', - 'value-card', - 'gift-card', - 'hot', - 'new', - 'new-arrival', - 'hot-sale', - 'cart-o', - 'question2', - 'star', - 'star-o' - ] + basic, + outline, + filled, + active: 0 + }, + + onSwitch(event) { + this.setData({ + active: event.detail.index + }); } }); diff --git a/example/pages/icon/index.wxml b/example/pages/icon/index.wxml index 2062b594..a7a5ad69 100644 --- a/example/pages/icon/index.wxml +++ b/example/pages/icon/index.wxml @@ -1,32 +1,50 @@ - - - - - - - - - - - - - - - - - - - - - - - - {{ icon }} - - + + + + + {{ item }} + + + + + + {{ item }} + + + + + + {{ item }} + + + diff --git a/example/pages/icon/index.wxss b/example/pages/icon/index.wxss index c33adfbf..6416da60 100644 --- a/example/pages/icon/index.wxss +++ b/example/pages/icon/index.wxss @@ -1,16 +1,11 @@ -.col, -.col-with-text { +.col { text-align: center; - height: 60px; + height: 100px; float: none; display: inline-block; vertical-align: middle; } -.col-with-text { - height: 100px; -} - .icon { display: block; margin: 15px 0; @@ -20,3 +15,7 @@ .text { font-size: 14px; } + +.demo-tab-pane { + padding-top: 10px; +} diff --git a/packages/cell/index.less b/packages/cell/index.less index e615a431..32283add 100644 --- a/packages/cell/index.less +++ b/packages/cell/index.less @@ -50,29 +50,16 @@ display: flex; align-items: center; height: 24px; + font-size: 16px; } &__left-icon-wrap { margin-right: 5px; - font-size: 16px; } &__right-icon-wrap { margin-left: 5px; - font-size: 12px; color: @gray-dark; - - &--left { - transform: rotate(180deg); - } - - &--up { - transform: rotate(-90deg); - } - - &--down { - transform: rotate(90deg); - } } &__left-icon { diff --git a/packages/cell/index.ts b/packages/cell/index.ts index 4734bdc6..5487f9f2 100644 --- a/packages/cell/index.ts +++ b/packages/cell/index.ts @@ -45,11 +45,6 @@ VantComponent({ titleStyle(): string { const { titleWidth } = this.data; return titleWidth ? `max-width: ${titleWidth};min-width: ${titleWidth}` : ''; - }, - - iconWrapClass(): string { - const prefix = 'van-cell__right-icon-wrap right-icon-class'; - return this.classNames(prefix, `${prefix}--${this.data.arrowDirection}`); } }, diff --git a/packages/cell/index.wxml b/packages/cell/index.wxml index bfb24a1d..bdea77b0 100644 --- a/packages/cell/index.wxml +++ b/packages/cell/index.wxml @@ -29,8 +29,8 @@ diff --git a/packages/checkbox/index.less b/packages/checkbox/index.less index 1a7473b6..1f0df9d3 100644 --- a/packages/checkbox/index.less +++ b/packages/checkbox/index.less @@ -1,6 +1,6 @@ @import '../common/style/var.less'; -@van-checkbox-size: 20px; +@checkbox-size: 20px; .van-checkbox { overflow: hidden; @@ -9,18 +9,18 @@ &__icon-wrap, &__label { display: inline-block; - line-height: @van-checkbox-size; + line-height: @checkbox-size; vertical-align: middle; } &__icon { box-sizing: border-box; display: block; - width: @van-checkbox-size; - height: @van-checkbox-size; + width: @checkbox-size; + height: @checkbox-size; border: 1px solid @gray-light; color: transparent; - font-size: 12px; + font-size: 14px; text-align: center; transition: .2s; diff --git a/packages/icon/index.less b/packages/icon/index.less index 8b9d2246..85de28bd 100644 --- a/packages/icon/index.less +++ b/packages/icon/index.less @@ -4,7 +4,7 @@ font-style: normal; font-weight: normal; font-family: 'vant-icon'; - src: url('https://img.yzcdn.cn/vant/vant-icon-1ef3b9.ttf') format('truetype'); + src: url('https://img.yzcdn.cn/vant/vant-icon-ccd101.ttf') format('truetype'); } .van-icon { @@ -79,370 +79,382 @@ content: "\F005"; } -.van-icon-arrow-left::before { +.van-icon-arrow-down::before { content: "\F006"; } -.van-icon-arrow::before { +.van-icon-arrow-left::before { content: "\F007"; } -.van-icon-balance-pay::before { +.van-icon-arrow-up::before { content: "\F008"; } -.van-icon-browsing-history::before { +.van-icon-arrow::before { content: "\F009"; } -.van-icon-card::before { +.van-icon-balance-pay::before { content: "\F00A"; } -.van-icon-cart-o::before { +.van-icon-browsing-history::before { content: "\F00B"; } -.van-icon-cart::before { +.van-icon-card::before { content: "\F00C"; } -.van-icon-cash-back-record::before { +.van-icon-cart-o::before { content: "\F00D"; } -.van-icon-cash-on-deliver::before { +.van-icon-cart::before { content: "\F00E"; } -.van-icon-certificate::before { +.van-icon-cash-back-record::before { content: "\F00F"; } -.van-icon-chat::before { +.van-icon-cash-on-deliver::before { content: "\F010"; } -.van-icon-check::before { +.van-icon-certificate::before { content: "\F011"; } -.van-icon-checked::before { +.van-icon-chat::before { content: "\F012"; } -.van-icon-clear::before { +.van-icon-check::before { content: "\F013"; } -.van-icon-clock::before { +.van-icon-checked::before { content: "\F014"; } -.van-icon-close::before { +.van-icon-clear::before { content: "\F015"; } -.van-icon-completed::before { +.van-icon-clock::before { content: "\F016"; } -.van-icon-contact::before { +.van-icon-close::before { content: "\F017"; } -.van-icon-coupon::before { +.van-icon-completed::before { content: "\F018"; } -.van-icon-credit-pay::before { +.van-icon-contact::before { content: "\F019"; } -.van-icon-debit-pay::before { +.van-icon-coupon::before { content: "\F01A"; } -.van-icon-delete::before { +.van-icon-credit-pay::before { content: "\F01B"; } -.van-icon-description::before { +.van-icon-cross::before { content: "\F01C"; } -.van-icon-discount::before { +.van-icon-debit-pay::before { content: "\F01D"; } -.van-icon-ecard-pay::before { +.van-icon-delete::before { content: "\F01E"; } -.van-icon-edit-data::before { +.van-icon-description::before { content: "\F01F"; } -.van-icon-edit::before { +.van-icon-discount::before { content: "\F020"; } -.van-icon-exchange-record::before { +.van-icon-ecard-pay::before { content: "\F021"; } -.van-icon-exchange::before { +.van-icon-edit-data::before { content: "\F022"; } -.van-icon-fail::before { +.van-icon-edit::before { content: "\F023"; } -.van-icon-free-postage::before { +.van-icon-exchange-record::before { content: "\F024"; } -.van-icon-gift-card-pay::before { +.van-icon-exchange::before { content: "\F025"; } -.van-icon-gift-card::before { +.van-icon-fail::before { content: "\F026"; } -.van-icon-gift::before { +.van-icon-free-postage::before { content: "\F027"; } -.van-icon-gold-coin::before { +.van-icon-gift-card-pay::before { content: "\F028"; } -.van-icon-goods-collect::before { +.van-icon-gift-card::before { content: "\F029"; } -.van-icon-home::before { +.van-icon-gift::before { content: "\F02A"; } -.van-icon-hot-sale::before { +.van-icon-gold-coin::before { content: "\F02B"; } -.van-icon-hot::before { +.van-icon-goods-collect::before { content: "\F02C"; } -.van-icon-idcard::before { +.van-icon-home::before { content: "\F02D"; } -.van-icon-info-o::before { +.van-icon-hot-sale::before { content: "\F02E"; } -.van-icon-like-o::before { +.van-icon-hot::before { content: "\F02F"; } -.van-icon-like::before { +.van-icon-idcard::before { content: "\F030"; } -.van-icon-location::before { +.van-icon-info-o::before { content: "\F031"; } -.van-icon-logistics::before { +.van-icon-like-o::before { content: "\F032"; } -.van-icon-more-o::before { +.van-icon-like::before { content: "\F033"; } -.van-icon-more::before { +.van-icon-location::before { content: "\F034"; } -.van-icon-new-arrival::before { +.van-icon-logistics::before { content: "\F035"; } -.van-icon-new::before { +.van-icon-more-o::before { content: "\F036"; } -.van-icon-other-pay::before { +.van-icon-more::before { content: "\F037"; } -.van-icon-passed::before { +.van-icon-new-arrival::before { content: "\F038"; } -.van-icon-password-not-view::before { +.van-icon-new::before { content: "\F039"; } -.van-icon-password-view::before { +.van-icon-other-pay::before { content: "\F03A"; } -.van-icon-pause::before { +.van-icon-passed::before { content: "\F03B"; } -.van-icon-peer-pay::before { +.van-icon-password-not-view::before { content: "\F03C"; } -.van-icon-pending-deliver::before { +.van-icon-password-view::before { content: "\F03D"; } -.van-icon-pending-evaluate::before { +.van-icon-pause::before { content: "\F03E"; } -.van-icon-pending-orders::before { +.van-icon-peer-pay::before { content: "\F03F"; } -.van-icon-pending-payment::before { +.van-icon-pending-deliver::before { content: "\F040"; } -.van-icon-phone::before { +.van-icon-pending-evaluate::before { content: "\F041"; } -.van-icon-photo::before { +.van-icon-pending-orders::before { content: "\F042"; } -.van-icon-photograph::before { +.van-icon-pending-payment::before { content: "\F043"; } -.van-icon-play::before { +.van-icon-phone::before { content: "\F044"; } -.van-icon-point-gift::before { +.van-icon-photo::before { content: "\F045"; } -.van-icon-points-mall::before { +.van-icon-photograph::before { content: "\F046"; } -.van-icon-points::before { +.van-icon-play::before { content: "\F047"; } -.van-icon-qr-invalid::before { +.van-icon-point-gift::before { content: "\F048"; } -.van-icon-qr::before { +.van-icon-points-mall::before { content: "\F049"; } -.van-icon-question::before { +.van-icon-points::before { content: "\F04A"; } -.van-icon-question2::before { +.van-icon-qr-invalid::before { content: "\F04B"; } -.van-icon-receive-gift::before { +.van-icon-qr::before { content: "\F04C"; } -.van-icon-records::before { +.van-icon-question::before { content: "\F04D"; } -.van-icon-search::before { +.van-icon-question2::before { content: "\F04E"; } -.van-icon-send-gift::before { +.van-icon-receive-gift::before { content: "\F04F"; } -.van-icon-setting::before { +.van-icon-records::before { content: "\F050"; } -.van-icon-share::before { +.van-icon-search::before { content: "\F051"; } -.van-icon-shop-collect::before { +.van-icon-send-gift::before { content: "\F052"; } -.van-icon-shop::before { +.van-icon-setting::before { content: "\F053"; } -.van-icon-shopping-cart::before { +.van-icon-share::before { content: "\F054"; } -.van-icon-sign::before { +.van-icon-shop-collect::before { content: "\F055"; } -.van-icon-star-o::before { +.van-icon-shop::before { content: "\F056"; } -.van-icon-star::before { +.van-icon-shopping-cart::before { content: "\F057"; } -.van-icon-stop::before { +.van-icon-sign::before { content: "\F058"; } -.van-icon-success::before { +.van-icon-star-o::before { content: "\F059"; } -.van-icon-tosend::before { +.van-icon-star::before { content: "\F05A"; } -.van-icon-underway::before { +.van-icon-stop::before { content: "\F05B"; } -.van-icon-upgrade::before { +.van-icon-success::before { content: "\F05C"; } -.van-icon-value-card::before { +.van-icon-tosend::before { content: "\F05D"; } -.van-icon-wap-home::before { +.van-icon-underway::before { content: "\F05E"; } -.van-icon-wap-nav::before { +.van-icon-upgrade::before { content: "\F05F"; } -.van-icon-warn::before { +.van-icon-value-card::before { content: "\F060"; } -.van-icon-wechat::before { +.van-icon-wap-home::before { content: "\F061"; } + +.van-icon-wap-nav::before { + content: "\F062"; +} + +.van-icon-warn::before { + content: "\F063"; +} + +.van-icon-wechat::before { + content: "\F064"; +} diff --git a/packages/nav-bar/index.less b/packages/nav-bar/index.less index 1a452491..91a78d01 100644 --- a/packages/nav-bar/index.less +++ b/packages/nav-bar/index.less @@ -11,7 +11,6 @@ &__arrow { color: @blue; vertical-align: middle; - transform: rotate(180deg); + .van-nav-bar__text { margin-left: -20px; diff --git a/packages/nav-bar/index.wxml b/packages/nav-bar/index.wxml index f84e826f..856fa971 100644 --- a/packages/nav-bar/index.wxml +++ b/packages/nav-bar/index.wxml @@ -6,7 +6,8 @@ {{ leftText }} diff --git a/packages/radio/index.less b/packages/radio/index.less index 062b24b2..acc15839 100644 --- a/packages/radio/index.less +++ b/packages/radio/index.less @@ -1,6 +1,6 @@ @import '../common/style/var.less'; -@van-radio-size: 20px; +@radio-size: 20px; .van-radio { overflow: hidden; @@ -15,7 +15,7 @@ &__input { position: relative; - font-size: @van-radio-size; + font-size: @radio-size; } &__control { @@ -33,7 +33,7 @@ margin-left: 10px; color: @text-color; font-size: 16px; - line-height: @van-radio-size; + line-height: @radio-size; &--left { margin: 0 10px 0 0; diff --git a/packages/tabs/index.less b/packages/tabs/index.less index fd5ff711..d00b4192 100644 --- a/packages/tabs/index.less +++ b/packages/tabs/index.less @@ -1,7 +1,7 @@ @import '../common/style/var.less'; -@van-tabs-line-height: 44px; -@van-tabs-card-height: 30px; +@tabs-line-height: 44px; +@tabs-card-height: 30px; .van-tabs { position: relative; @@ -45,12 +45,12 @@ } &--card { - height: @van-tabs-card-height; + height: @tabs-card-height; .van-tab { color: @red; border-right: 1px solid @red; - line-height: @van-tabs-card-height; + line-height: @tabs-card-height; &:last-child { border-right: none; @@ -75,19 +75,19 @@ } &--line { - padding-top: @van-tabs-line-height; + padding-top: @tabs-line-height; .van-tabs__wrap { - height: @van-tabs-line-height; + height: @tabs-line-height; } } &--card { - padding-top: @van-tabs-card-height; + padding-top: @tabs-card-height; margin: 0 15px; .van-tabs__wrap { - height: @van-tabs-card-height; + height: @tabs-card-height; } } @@ -103,7 +103,7 @@ font-size: 14px; position: relative; color: @gray-darker; - line-height: @van-tabs-line-height; + line-height: @tabs-line-height; text-align: center; box-sizing: border-box; background-color: @white; diff --git a/packages/toast/index.less b/packages/toast/index.less index 4f03188f..8a9aa361 100644 --- a/packages/toast/index.less +++ b/packages/toast/index.less @@ -38,12 +38,12 @@ } .van-toast__text { - padding-top: 10px; + padding-top: 5px; } } &__loading { - margin: 10px 0 5px; + margin: 10px 0; } &--top {