css - 从 materialize.css 中提取刚需要的 css

标签 css

我正在尝试从 materialize.css 中提取所需的 css 以使用以下页面中的导航按钮:

https://jsfiddle.net/5fqg98xd

我尝试从删除按钮中提取 css:

<div id="btnDelete"><i id="btnDeleteI"></i></div>

但是这个按钮现在根本不起作用，悬停在上面也不会改变它的颜色。

#btnDelete {
  position: absolute;
  top: 20px;
  left: 20px;
}

#btnDeleteI {
    border-bottom-color: rgb(255, 255, 255);
    border-left-color: rgb(255, 255, 255);
    border-right-color: rgb(255, 255, 255);
    border-top-color: rgb(255, 255, 255);
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    font-family: Material-Design-Icons;
    font-size: 24px;
    font-style: normal;
    height: 55px;
    letter-spacing: 0.5px;
    line-height: 55.5px;
    outline-color: rgb(255, 255, 255);
    speak: none;
    text-align: center;
    text-transform: uppercase;
    width: 55.5px;
    z-index: 0;
    perspective-origin: 27.75px 27.5px;
    transform: matrix(1, 0, 0, 1, 0, 0);
    transform-origin: 27.75px 27.5px;
    border: 0px none rgb(255, 255, 255);
    border-top: 0px none rgb(255, 255, 255);
    border-right: 0px none rgb(255, 255, 255);
    border-bottom: 0px none rgb(255, 255, 255);
    border-left: 0px none rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
    font: normal normal normal normal 24px / 55.5px Material-Design-Icons;
    outline: rgb(255, 255, 255) none 0px;
}/*#btnDeleteI*/

如果您能从上面的链接中提取创建导航按钮所需的 CSS，我们将不胜感激。

问题: 为什么需要提取 css，为什么不直接使用整个 materialize.css 文件？我无法使用整个文件，因为它会对无法修改的页面的其余部分造成不必要的修改。

更新#1

我按照下面的建议尝试了 uncss。这破坏了 materialize.css 并且按钮不再显示/正常运行。

更新#2

SnappySnippet在 css 提取方面比 uncss 做得更好，因为它允许您检查所需的元素，然后只显示相关的 css。但即使是 SnappySnippet 也不能​​ 100% 准确地从 materialize.css 中提取 css，并导致按钮失去图标和悬停效果。

更新#3

我正在为这个问题悬赏。请提供工作fiddle example从 materialize.css 中删除所有不需要的 css 以获得赏金奖励。对于一个工作完成的元素，对外部资源“materialize.css”的引用应该消失，所有与导航按钮相关的 css 应该在 jsfiddle 的本地 css 部分。这是一个完整的起点:

https://jsfiddle.net/5fqg98xd/

此外，一切都应该像现在一样工作。例如，按钮在被选中时应该像现在一样改变样式颜色。

最佳答案

这是使用 280 css 代码行的所有内容

访问https://jsfiddle.net/1dq74z80/

对不起上面的 fiddle fiddle widthout materilize css链接是https://jsfiddle.net/toadalskii/tx6pzph7/

或

获取下面的代码

.teal {
  background-color: #009688 !important;
}

.teal.darken-2 {
  background-color: #00796b !important;
}

.orange {
  background-color: #ff9800 !important;
}

.orange.darken-2 {
  background-color: #f57c00 !important;
}


.btn-large, .btn-floating{
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.btn-large:hover, .btn-floating:hover {
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.material-icons {
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: 'liga';
     -moz-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
}

@font-face {
  font-family: "Material-Design-Icons";
  src: url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/font/material-design-icons/Material-Design-Icons.eot?#iefix") format("embedded-opentype"), url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/font/material-design-icons/Material-Design-Icons.woff2") format("woff2"), url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/font/material-design-icons/Material-Design-Icons.woff") format("woff"), url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/font/material-design-icons/Material-Design-Icons.ttf") format("truetype"), url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/font/material-design-icons/Material-Design-Icons.svg#Material-Design-Icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="mdi-"], [class*="mdi-"] {
  speak: none;
  display: inline-block;
  font-family: "Material-Design-Icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-rendering: auto;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

[class^="mdi-"]:before, [class*="mdi-"]:before {
  display: inline-block;
  speak: none;
  text-decoration: inherit;
}

[class^="mdi-device-signal-cellular-"]:after, {
  opacity: .3;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: inline-block;
  speak: none;
  text-decoration: inherit;
}

.mdi-device-signal-cellular-null:after {
    content: "";
}

.mdi-action-speaker-notes:before {
    content: "\e677";
}

.mdi-editor-mode-edit:before {
    content: "\e7a4";
}

.mdi-maps-place:before {
    content: "\e899";
}

.mdi-social-share:before {
    content: "\e8ed";
}

.mdi-device-signal-cellular-null:before {
    content: "\e75f";
}

.mdi-action-delete:before {
    content: "\e621";
}

.mdi-content-add:before {
    content: "\e701";
}

.mdi-content-remove:before {
    content: "\e716";
}

/ new content */



.disabled.btn-large, .btn-floating.disabled, .btn-large.disabled, .btn-large:disabled, .btn-large:disabled, .btn-floating:disabled {
  background-color: #DFDFDF !important;
  box-shadow: none;
  color: #9F9F9F !important;
  cursor: default;
}

.disabled.btn-large *, .btn-floating.disabled *, .btn-large.disabled *, .btn-large:disabled *, .btn-large:disabled *, .btn-floating:disabled * {
  pointer-events: none;
}

.disabled.btn-large:hover, .btn-floating.disabled:hover, .btn-large.disabled:hover, .btn:disabled:hover, .btn-large:disabled:hover, .btn-large:disabled:hover, .btn-floating:disabled:hover {
  background-color: #DFDFDF;
  color: #9F9F9F;
}

.btn i, .btn-large i, .btn-floating i, .btn-large i {
  font-size: 1.3rem;
  line-height: inherit;
}
.btn-large {
  border: none;
  border-radius: 2px;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  outline: 0;
  padding: 0 2rem;
  text-transform: uppercase;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  color: #fff;
  background-color: #26a69a;
  text-align: center;
  letter-spacing: .5px;
  transition: .2s ease-out;
  cursor: pointer;
}

.btn-floating {
  display: inline-block;
  color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 37px;
  height: 37px;
  line-height: 37px;
  padding: 0;
  background-color: #26a69a;
  border-radius: 50%;
  transition: .3s;
  cursor: pointer;
  vertical-align: middle;
}

.btn-floating i {
  width: inherit;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 1.6rem;
  line-height: 37px;
}

.btn-floating:hover {
  background-color: #26a69a;
}

.btn-floating:before {
  border-radius: 0;
}

.btn-floating.btn-large {
  width: 55.5px;
  height: 55.5px;
}

.btn-floating.btn-large i {
  line-height: 55.5px;
}

.btn-large {
  height: 54px;
  line-height: 56px;
}

.btn-large i {
  font-size: 1.6rem;
}

.waves-effect {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  z-index: 1;
  will-change: opacity, transform;
  transition: all .3s ease-out;
}


.btn-floating {
    background-color: #f44336;
}

#btnSelect {
    position: absolute;
    top: 20px;
    right: 20px;
}

#btnEdit {
    position: absolute;
    top: 20px;
    right: 80px;
}

#btnDrawPoint {
    position: absolute;
    top: 20px;
    right: 140px;
}

#btnDrawLine {
    position: absolute;
    top: 20px;
    right: 200px;
}

#btnDrawPoly {
    position: absolute;
    top: 20px;
    right: 260px;
}

#btnDelete {
    position: absolute;
    top: 20px;
    right: 320px;
}

#btnZoomIn {
    position: absolute;
    top: 20px;
    left: 20px;
}



#btnZoomOut {
    position: absolute;
    top: 80px;
    left: 20px;
}

关于css - 从 materialize.css 中提取刚需要的 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35001597/

上一篇：javascript - 通过 JavaScript 使用 HTML5 音频标签

下一篇：jquery - 使用 jquery 弹出内容

相关文章：

css - 可以让 css/bootstrap 系统地忽略脚本标签吗？

image - CSS 中从顶部 0% 到底部 100% 的透明(不透明度)图像

html - 如何在动态大小的绝对 div 中包含 "overflow: auto;"滚动条的宽度？

javascript - 嵌入在我的电脑中下载的视频而不是 youtube 链接

html - 清除 div 在 IE 和 chrome 中不起作用

html - 网站未调整为移动设备

javascript - 更改 Window.print() 纸张方向

java - 如何修复无法在maven springmvc元素的maven构建中加载css文件

jquery - 通过聊天模块中的 div 刷新 div

html - 找不到办法做到这一点

©2024 IT工具网  联系我们