Open7
カートイン数のバッジなコンポーネントの各ショップの実装調査
ユニクロ
実装
.uq-uikit-badge {
display: inline-flex;
fill: #fff;
background: #1b1b1b;
min-width: 1rem;
height: 1rem;
border-radius: .5rem;
text-align: center;
justify-content: center;
align-items: center;
padding: 0 .1875rem;
}
.uq-uikit-badge-text {
margin: 0;
line-height: 1.25;
letter-spacing: .025rem;
font-family: UniqloProLight,system-ui,-apple-system,sans-serif;
text-transform: uppercase;
font-weight: 300;
font-style: normal;
}
例外
3桁になったときの表示
あくまで2桁で円状になるだけで、桁超えしたときに形を維持しない
BEAMS
実装
#beams-header .header-1200 .beams-header-right .pc-navigation-menu .pc-navigation-menu-item .header-badge {
font-family: 'BST', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'MS Pゴシック', -apple-system, BlinkMacSystemFont, sans-serif;
background-color: #ff3700;
border-radius: 8px;
color: #fff;
content: " ";
display: block;
font-size: 11px;
height: 12px;
left: 14px;
line-height: 16px;
min-width: 12px;
overflow-y: hidden;
padding: 2px;
position: absolute;
text-align: center;
top: 10px;
}
例外
3桁になったときの表示
ベルメゾン
実装
.c-header__cart-qty {
position: absolute;
top: 3px;
left: calc(50% + 5px);
width: 24px;
height: 24px;
text-align: center;
color: #fff;
border-radius: 12px;
background-color: #f97f74;
line-height: 24px;
}
例外
3桁でも円状のまま
セシール
実装
.headwrap .head ul.usermenu li.cart .cartNum {
position: absolute;
top: -5px;
left: 15px;
display: block;
background: #9c154f;
border-radius: 15px;
color: #fff;
text-indent: 0;
text-align: center;
z-index: 200;
font-size: 8px;
line-height: 2;
font-weight: normal;
text-shadow: none;
padding: 0 3px;
min-width: 2em;
}
例外
ONWARD CROSSET
#g-header .customer-menu .customer-nav li .item-number {
position: absolute;
width: 18px;
height: 18px;
line-height: 12px;
border-radius: 30px;
background: #e7001c;
color: #fff;
text-align: center;
font-size: 10px;
}
クロックス
実装
.nav-link-cart-quantity {
width: 15px;
height: 15px;
margin-top: -8px;
margin-left: -8px;
border-radius: 50%;
font-size: 10px;
line-height: 16px;
}
.background-blue {
background-color: #006da4!important;
}
.text-white {
color: #fff!important;
}
.text-center {
text-align: center!important;
}
coen
実装
#header .logoArea ul li span.count {
position: absolute;
top: -8px;
right: -5px;
width: 24px;
height: 24px;
color: #fff;
background: #f00;
text-align: center;
line-height: 24px;
border-radius: 50%;
font-size: 12px;
}