如何覆蓋$ MD-工具欄，最小高度在材料2

MD-商工具欄的默認高度爲64像素，而在
material toobar.scss

@import '../core/style/variables'; 

$md-toolbar-min-height: 64px !default; 
$md-toolbar-font-size: 20px !default; 
$md-toolbar-padding: 16px !default;

定義

我如何將它重寫爲32px在sample app material2-app-theme.scss？

@import '[email protected]/material/core/theming/all-theme'; 

// NOTE: Theming is currently experimental and not yet publically released! 

@include md-core(); 

$primary: md-palette($md-deep-purple); 
$accent: md-palette($md-amber, A200, A100, A400); 

$theme: md-light-theme($primary, $accent); 

@include angular-material-theme($theme); 

.m2app-dark { 
    $dark-primary: md-palette($md-pink, 700, 500, 900); 
    $dark-accent: md-palette($md-blue-grey, A200, A100, A400); 
    $dark-warn: md-palette($md-deep-orange); 

    $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn); 

    @include angular-material-theme($dark-theme); 
}

來源

2016-10-01 John Siu

，因爲在材料2組件已燒燬不能在此改變特定變量。 Scss編譯已經執行了md-toolbar特定的樣式。你可以這樣做：

md-toolbar { 
    min-height: 32px !important; 
} 
md-toolbar md-toolbar-row { 
    height: 32px !important; 
}

在你的自定義主題。我找不到任何優雅的解決方案。

來源

2016-10-14 14:17:33 nlyk

是的，那也是我發現的。我有一個punker [demo]（http://embed.plnkr.co/PMez6Y/）。但是，當我們在討論'md-toolbar'的內部css組件時，這真的很糟糕。這打破了有一個UI框架的目的。 –

答案接受，因爲這是我發佈問題的情況。 –

這不適用於2.0.0.0.beta6 – bhantol

我知道這個問題有點古怪，但我們有類似的問題，我們需要改變顏色和其他全球風格，以適應我們的品牌。以爲我會在上面的答案中分享我們的變體。我們希望在我們的sass中避免「！important」，並且能夠在構建應用程序時重用樣式，所以我們在我們的全局sass文件中添加了覆蓋選擇器。然後，我們能夠將覆蓋選擇器添加到我們想覆蓋的任何md元素。這使我們能夠更具體地瞭解我們的壓倒一切。

下面的示例顯示背景顏色和工具欄高度覆蓋。仍然違背框架，但從品牌角度來看，您至少需要控制顏色。還要注意，如果你想添加新的選擇器到覆蓋sass，你可以追加到md選擇器列表。

<!-- md-toolbar example --> 
<md-toolbar class="my-app-toolbar my-app-bg-color"></md-toolbar> 

// override bg-color for md-button, md-card-content, md-toolbar 
.md-button, 
md-card-content, 
md-toolbar { 
    &.my-app-bg-color { 
    background-color: #00acc1; 
    } 
} 

// override md-toolbar 
md-toolbar { 
    &.my-app-toolbar { 
    min-height: 32px; 
    height: 32px; 
    } 
}

來源

2017-06-01 23:02:10

如何覆蓋$ MD-工具欄，最小高度在材料2

回答

相關問題