Open7

カートイン数のバッジなコンポーネントの各ショップの実装調査

hirohiro

ユニクロ

https://www.uniqlo.com/jp/ja/

実装

.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桁で円状になるだけで、桁超えしたときに形を維持しない

hirohiro

BEAMS

https://www.beams.co.jp/

実装

#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桁になったときの表示

hirohiro

ベルメゾン

http://www.bellemaison.jp/

実装

.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桁でも円状のまま

hirohiro

セシール

http://www.cecile.co.jp/

実装

.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;
}

例外

hirohiro

ONWARD CROSSET

https://crosset.onward.co.jp/

#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;
}
hirohiro

クロックス

https://www.crocs.co.jp/

実装

.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;
}
hirohiro

coen

https://www.coen.co.jp/

実装

#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;
}