Use Bootstrap variables in styles
This commit is contained in:
parent
b7ff2bbd85
commit
5a9f540cc0
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,5 +1,8 @@
|
|||
$rowMarginTop: 30px;
|
||||
$rowMarginBottom: 10px;
|
||||
|
||||
.row {
|
||||
margin-top: 30px;
|
||||
margin-top: $rowMarginTop;
|
||||
}
|
||||
|
||||
.art {
|
||||
|
@ -22,19 +25,10 @@
|
|||
float: none;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: $rowMarginBottom;
|
||||
}
|
||||
|
||||
.songs {
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
composes: songs from "./Songs.scss";
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
$titleImage-size: $font-size-h1 + 10px;
|
||||
|
||||
.titleImage {
|
||||
height: 46px;
|
||||
height: $titleImage-size;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
padding: 5px;
|
||||
padding: $table-condensed-cell-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,10 +1,12 @@
|
|||
$marginBottom: 34px;
|
||||
|
||||
.filter {
|
||||
margin-bottom: 34px;
|
||||
margin-bottom: $marginBottom;
|
||||
}
|
||||
|
||||
.legend {
|
||||
text-align: right;
|
||||
line-height: 34px;
|
||||
line-height: $marginBottom;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
|
|
@ -1,5 +1,8 @@
|
|||
$marginBottom: 30px;
|
||||
$artMarginBottom: 10px;
|
||||
|
||||
.placeholders {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: $marginBottom;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
@ -9,7 +12,7 @@
|
|||
|
||||
.art {
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: $artMarginBottom;
|
||||
width: 75%;
|
||||
height: auto;
|
||||
|
||||
|
|
|
@ -3,6 +3,10 @@ $hoverBackground: #222;
|
|||
$activeBackground: $hoverBackground;
|
||||
$foreground: white;
|
||||
$lightgrey: #eee;
|
||||
$titleFontSize: $font-size-h1 - 10px;
|
||||
$titleMarginBottom: 20px;
|
||||
$mainPadding: 20px;
|
||||
$condensedNavPadding: 5px;
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
|
@ -46,12 +50,12 @@ $lightgrey: #eee;
|
|||
|
||||
.title {
|
||||
margin: 0;
|
||||
margin-bottom: 20px;
|
||||
font-size: 26px;
|
||||
margin-bottom: $titleMarginBottom;
|
||||
font-size: $titleFontSize;
|
||||
}
|
||||
|
||||
.imgTitle {
|
||||
height: 36px;
|
||||
height: $font-size-h1;
|
||||
}
|
||||
|
||||
/* Sidebar navigation */
|
||||
|
@ -81,7 +85,7 @@ $lightgrey: #eee;
|
|||
* Main content
|
||||
*/
|
||||
.main-panel {
|
||||
padding: 20px;
|
||||
padding: $mainPadding;
|
||||
}
|
||||
|
||||
/*
|
||||
|
@ -103,8 +107,8 @@ $lightgrey: #eee;
|
|||
.nav {
|
||||
li {
|
||||
a {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-left: $condensedNavPadding;
|
||||
padding-right: $condensedNavPadding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
// Make variables and mixins available when using CSS modules.
|
||||
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables";
|
||||
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_mixins";
|
|
@ -69,6 +69,7 @@
|
|||
"resolve-url-loader": "^1.6.0",
|
||||
"rimraf": "^2.5.4",
|
||||
"sass-loader": "^4.0.0",
|
||||
"sass-resources-loader": "^1.0.2",
|
||||
"style-loader": "^0.13.1",
|
||||
"stylelint": "^7.0.3",
|
||||
"stylelint-config-standard": "^11.0.0",
|
||||
|
|
|
@ -49,7 +49,8 @@ module.exports = {
|
|||
"style-loader",
|
||||
"css-loader?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]" +
|
||||
"!postcss-loader" +
|
||||
"!sass-loader"
|
||||
"!sass-loader" +
|
||||
"!sass-resources-loader"
|
||||
)
|
||||
},
|
||||
{
|
||||
|
@ -81,6 +82,8 @@ module.exports = {
|
|||
|
||||
postcss: [autoprefixer({ browsers: browsers }), postcssReporter({ throwError: true, clearMessages: true })],
|
||||
|
||||
sassResources: "./app/styles/variables.scss",
|
||||
|
||||
resolve: {
|
||||
// Include empty string "" to resolve files by their explicit extension
|
||||
// (e.g. require("./somefile.ext")).
|
||||
|
|
Loading…
Reference in New Issue