Skip to content

J
joshine
Commit 3fc82b55 by halweg
Options

fix: tips css优化

parent 0de4921a
Showing with 194 additions and 165 deletions
app/code/Joshine/Category/view/frontend/layout/default.xml deleted 100644 → 0
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Joshine_Category::css/topmenu.css"/>
</head>
</page>
\ No newline at end of file
app/code/Joshine/Category/view/frontend/web/css/topmenu.css deleted 100644 → 0
@media (min-width: 1024px) {
span.ui-menu-icon-1 {
top: -13px;
right: 12px;
background-color: #0cc485;
position: absolute;
text-transform: uppercase;
font: inherit;
font-size: 9px;
padding: 3px;
border-radius: 2px;
line-height: 1.2;
color: #ffffff;
min-width: 35px;
text-align: center;
}
span.ui-menu-icon-1.ui-icon-1:before {
border-top-color: #0cc485;
}
span.ui-menu-icon-2 {
top: -13px;
right: 24px;
background-color: #eb2771;
position: absolute;
text-transform: uppercase;
font: inherit;
font-size: 9px;
padding: 3px;
border-radius: 2px;
line-height: 1.2;
color: #ffffff;
min-width: 35px;
text-align: center;
}
span.ui-menu-icon-2.ui-icon-2:before {
border-top-color: #eb2771;
}
span.ui-menu-icon-3 {
top: -13px;
right: 24px;
background-color: #df0e0e;
position: absolute;
text-transform: uppercase;
font: inherit;
font-size: 9px;
padding: 3px;
border-radius: 2px;
line-height: 1.2;
color: #ffffff;
min-width: 35px;
text-align: center;
}
span.ui-menu-icon-3.ui-icon-3:before {
border-top-color: #df0e0e;
}
span.ui-menu-icon-1:before,
span.ui-menu-icon-2:before,
span.ui-menu-icon-3:before {
left: 3px;
bottom: -6px;
}
span.ui-menu-icon-1:before,
span.ui-menu-icon-2:before,
span.ui-menu-icon-3:before {
content: "";
position: absolute;
width: 3px;
height: 3px;
border: 3px solid transparent;
}
}
@media (max-width: 1024px) {
span.ui-menu-icon-1 {
top: 50%;
right: 36px;
margin-top: -7px;
position: absolute;
text-transform: uppercase;
font: inherit;
font-size: 9px;
padding: 2px;
border-radius: 2px;
line-height: 1;
color: #fff;
}
span.ui-menu-icon-1.ui-icon-1 {
background-color: #0cc485 !important;
}
span.ui-menu-icon-1:before {
content: "";
position: absolute;
width: 3px;
height: 3px;
border: 3px solid transparent;
left: -6px;
bottom: 3px;
}
span.ui-menu-icon-1.ui-icon-1:before {
border-right-color: #0cc485 !important;
}
span.ui-menu-icon-2 {
top: 50%;
right: 36px;
margin-top: -7px;
position: absolute;
text-transform: uppercase;
font: inherit;
font-size: 9px;
padding: 2px;
border-radius: 2px;
line-height: 1;
color: #fff;
}
span.ui-menu-icon-2.ui-icon-2 {
background-color: #eb2771 !important;
}
span.ui-menu-icon-2:before {
content: "";
position: absolute;
width: 3px;
height: 3px;
border: 3px solid transparent;
left: -6px;
bottom: 3px;
}
span.ui-menu-icon-2.ui-icon-2:before {
border-right-color: #eb2771 !important;
}
span.ui-menu-icon-3 {
top: 50%;
right: 36px;
margin-top: -7px;
position: absolute;
text-transform: uppercase;
font: inherit;
font-size: 9px;
padding: 2px;
border-radius: 2px;
line-height: 1;
color: #fff;
}
span.ui-menu-icon-3.ui-icon-3 {
background-color: #df0e0e !important;
}
span.ui-menu-icon-3:before {
content: "";
position: absolute;
width: 3px;
height: 3px;
border: 3px solid transparent;
left: -6px;
bottom: 3px;
}
span.ui-menu-icon-3.ui-icon-3:before {
border-right-color: #df0e0e !important;
}
}
app/design/frontend/Joshine/breeze/Magento_Theme/templates/html/topmenu.phtml
<style>
@media (min-width: 1024px) {
#joshine-navigation span.ui-menu-icon-1 {
top: -13px;
right: 12px;
background-color: #0cc485;
position: absolute;
text-transform: uppercase;
font: inherit;
font-size: 9px;
padding: 3px;
border-radius: 2px;
line-height: 1.2;
color: #ffffff;
min-width: 35px;
text-align: center;
}
#joshine-navigation span.ui-menu-icon-1.ui-icon-1:before {
border-top-color: #0cc485;
}
#joshine-navigation span.ui-menu-icon-2 {
top: -13px;
right: 24px;
background-color: #eb2771;
position: absolute;
text-transform: uppercase;
font: inherit;
font-size: 9px;
padding: 3px;
border-radius: 2px;
line-height: 1.2;
color: #ffffff;
min-width: 35px;
text-align: center;
}
#joshine-navigation span.ui-menu-icon-2.ui-icon-2:before {
border-top-color: #eb2771;
}
#joshine-navigation span.ui-menu-icon-3 {
top: -13px;
right: 24px;
background-color: #df0e0e;
position: absolute;
text-transform: uppercase;
font: inherit;
font-size: 9px;
padding: 3px;
border-radius: 2px;
line-height: 1.2;
color: #ffffff;
min-width: 35px;
text-align: center;
}
#joshine-navigation span.ui-menu-icon-3.ui-icon-3:before {
border-top-color: #df0e0e;
}
#joshine-navigation span.ui-menu-icon-1:before,
#joshine-navigation span.ui-menu-icon-2:before,
#joshine-navigation span.ui-menu-icon-3:before {
left: 3px;
bottom: -6px;
}
#joshine-navigation span.ui-menu-icon-1:before,
#joshine-navigation span.ui-menu-icon-2:before,
#joshine-navigation span.ui-menu-icon-3:before {
content: "";
position: absolute;
width: 3px;
height: 3px;
border: 3px solid transparent;
}
#joshine-navigation .submenu span.ui-menu-icon-1,
#joshine-navigation .submenu span.ui-menu-icon-2,
#joshine-navigation .submenu span.ui-menu-icon-3 {
position: relative;
left: 6px;
top: 0;
}
#joshine-navigation .submenu span.ui-menu-icon-1:before,
#joshine-navigation .submenu span.ui-menu-icon-2:before,
#joshine-navigation .submenu span.ui-menu-icon-3:before {
content: "";
position: absolute;
width: 3px;
height: 3px;
border: 3px solid transparent;
top: 8px;
left: -6px;
}
#joshine-navigation .submenu span.ui-menu-icon-1:before {
border-right-color: #0cc485;
}
#joshine-navigation .submenu span.ui-menu-icon-2:before {
border-right-color: #eb2771;
}
#joshine-navigation .submenu span.ui-menu-icon-3:before {
border-right-color: #df0e0e;
}
}
@media (max-width: 1024px) {
#joshine-navigation span.ui-menu-icon-1 {
top: 50%;
right: 36px;
margin-top: -7px;
position: absolute;
text-transform: uppercase;
font: inherit;
font-size: 9px;
padding: 2px;
border-radius: 2px;
line-height: 1;
color: #fff;
}
#joshine-navigation span.ui-menu-icon-1.ui-icon-1 {
background-color: #0cc485 !important;
}
#joshine-navigation span.ui-menu-icon-1:before {
content: "";
position: absolute;
width: 3px;
height: 3px;
border: 3px solid transparent;
left: -6px;
bottom: 3px;
}
#joshine-navigation span.ui-menu-icon-1.ui-icon-1:before {
border-right-color: #0cc485 !important;
}
#joshine-navigation span.ui-menu-icon-2 {
top: 50%;
right: 36px;
margin-top: -7px;
position: absolute;
text-transform: uppercase;
font: inherit;
font-size: 9px;
padding: 2px;
border-radius: 2px;
line-height: 1;
color: #fff;
}
#joshine-navigation span.ui-menu-icon-2.ui-icon-2 {
background-color: #eb2771 !important;
}
#joshine-navigation span.ui-menu-icon-2:before {
content: "";
position: absolute;
width: 3px;
height: 3px;
border: 3px solid transparent;
left: -6px;
bottom: 3px;
}
#joshine-navigation span.ui-menu-icon-2.ui-icon-2:before {
border-right-color: #eb2771 !important;
}
#joshine-navigation span.ui-menu-icon-3 {
top: 50%;
right: 36px;
margin-top: -7px;
position: absolute;
text-transform: uppercase;
font: inherit;
font-size: 9px;
padding: 2px;
border-radius: 2px;
line-height: 1;
color: #fff;
}
#joshine-navigation span.ui-menu-icon-3.ui-icon-3 {
background-color: #df0e0e !important;
}
#joshine-navigation span.ui-menu-icon-3:before {
content: "";
position: absolute;
width: 3px;
height: 3px;
border: 3px solid transparent;
left: -6px;
bottom: 3px;
}
#joshine-navigation span.ui-menu-icon-3.ui-icon-3:before {
border-right-color: #df0e0e !important;
}
}
</style>
<?php <?php
/** /**
* Copyright © Magento, Inc. All rights reserved. * Copyright © Magento, Inc. All rights reserved.
...@@ -14,7 +207,7 @@ $columnsLimit = $block->getColumnsLimit() ?: 0; ...@@ -14,7 +207,7 @@ $columnsLimit = $block->getColumnsLimit() ?: 0;
$_menuHtml = $block->getHtml('level-top', 'submenu', $columnsLimit) $_menuHtml = $block->getHtml('level-top', 'submenu', $columnsLimit)
?> ?>
<div class="nav-sections"> <div class="nav-sections">
<nav class="navigation" data-action="navigation"> <nav class="navigation" data-action="navigation" id="joshine-navigation">
<ul data-mage-init='{"menu":{"responsive":true,"dropdown":"div", "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'> <ul data-mage-init='{"menu":{"responsive":true,"dropdown":"div", "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
<li class="level0 nav-0 level-top"><a href="/" class="level-top"><span>Home</span></a></li> <li class="level0 nav-0 level-top"><a href="/" class="level-top"><span>Home</span></a></li>
<?= /* @noEscape */ $_menuHtml?> <?= /* @noEscape */ $_menuHtml?>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment