/* ------------------------------------------- Custom Icons ---------------------------------------------- */ // Menu Icon .menu-icon { display: inline-block; color: var(--alpus-change-color-light-1); width: 1.7rem; &::before, &::after { display: block; content: ''; width: 100%; } &::before { height: 6px; border-top: 2px solid; border-bottom: 2px solid; } &::after { height: 4px; border-bottom: 2px solid; } } // Close Icon .close-icon { width: 3rem; height: 3rem; &::before, &::after { display: block; position: absolute; background-color: var(--alpus-light-color); content: ''; } &::before { height: 2px; width: 100%; left: 0; top: calc(50% - 1px); } &::after { height: 100%; width: 2px; top: 0; left: calc(50% - 1px); } } .minicart-icon { display: inline-block; position: relative; width: 2.5em; height: 2.5em; margin-top: 1px; border: solid 2px; border-radius: 2px; text-align: center; transition: background .4s; &::before { content: ''; position: absolute; /* top: -9px; */ top: -.75em; /* left: 7px; */ #{$left}: .585em; /* width: 12px; */ width: 1em; /* height: 6px; */ height: .5em; border-radius: corner-values(10px 10px 0 0); border: inherit; border-bottom: none; transition: transform .4s; } &.adding::before { transform: rotateZ(30deg) translate(3px, -3px); } } .minicart-icon2 { height: 1.83em; transition: color .4s; &::before { content: ''; display: block; position: absolute; /* top: -3.14px;*/ top: -0.3em; left: 50%; transform: translateX(-50%) scale(.7); /* width: 15.714px; */ width: 1.29em; /* height: 12.85px; */ height: 1.07em; border: solid 2px; border-radius: corner-values(10px 10px 0 0); border-bottom: none; } &::after { content: ''; display: inline-block; /* width: 30px; */ width: 2.5em; /* height: 25.71px; */ height: 2.1425em; border: solid 2px; background-color: transparent; border-radius: corner-values(0 0 3px 3px); transform: scale(.7); } } // Dashboard Icons .icon-orders::before { content: '\e933'; } .icon-downloads::before { content: '\e957'; } .icon-addresses::before { content: '\e98b'; } .icon-account::before { content: '\ea04'; } .icon-wishlist::before { content: '\ea05'; } .icon-vendor::before { content: '\e920'; } .icon-logout::before { content: '\e931'; }