mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-26 03:24:05 +03:00
Merge branch 'korgan00#material-colors-implementation'
Conflicts: dist/css/ripples.css dist/css/ripples.css.map dist/css/ripples.min.css dist/css/ripples.min.css.map less/_colors.less
This commit is contained in:
FezVrasta
commit
0c12c1fc85
29221
dist/css/material-wfont.css
vendored
29221
dist/css/material-wfont.css
vendored
File diff suppressed because it is too large
Load Diff
2
dist/css/material-wfont.css.map
vendored
2
dist/css/material-wfont.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material-wfont.min.css
vendored
2
dist/css/material-wfont.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material-wfont.min.css.map
vendored
2
dist/css/material-wfont.min.css.map
vendored
File diff suppressed because one or more lines are too long
29221
dist/css/material.css
vendored
29221
dist/css/material.css
vendored
File diff suppressed because it is too large
Load Diff
2
dist/css/material.css.map
vendored
2
dist/css/material.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material.min.css
vendored
2
dist/css/material.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material.min.css.map
vendored
2
dist/css/material.min.css.map
vendored
File diff suppressed because one or more lines are too long
8
dist/css/ripples.css
vendored
8
dist/css/ripples.css
vendored
|
|
@ -20,12 +20,8 @@
|
|||
margin-top: -10px;
|
||||
border-radius: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-transform-origin: 50%;
|
||||
-ms-transform-origin: 50%;
|
||||
transform-origin: 50%;
|
||||
transform: scale(1);
|
||||
transform-origin: 50%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
2
dist/css/ripples.css.map
vendored
2
dist/css/ripples.css.map
vendored
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["/less/ripples.less","ripples.css"],"names":[],"mappings":"AAAA;EACI,oBAAA;ECCH;ADCD;EACI,oBAAA;EACA,QAAA;EACA,SAAA;EACA,YAAA;EACA,aAAA;EACA,cAAA;EACA,kBAAA;EACA,wBAAA;EACA,sBAAA;ECCH;ADCD;EACI,oBAAA;EACA,aAAA;EACA,cAAA;EACA,oBAAA;EACA,mBAAA;EACA,qBAAA;EACA,uCAAA;EACA,6BAAA;MAAA,yBAAA;UAAA,qBAAA;EACA,+BAAA;MAAA,2BAAA;UAAA,uBAAA;EACA,YAAA;EACA,sBAAA;ECCH;ADCD;EACI,gGAAA;EAAA,wFAAA;EACA,cAAA;ECCH;ADCD;EACI,+CAAA;EACA,YAAA;ECCH","file":"ripples.css","sourcesContent":[".withripple {\n position: relative;\n}\n.ripple-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: rgba(0,0,0,0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n",".withripple {\n position: relative;\n}\n.ripple-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: rgba(0, 0, 0, 0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n/*# sourceMappingURL=ripples.css.map */"]}
|
||||
{"version":3,"sources":["/less/ripples.less","ripples.css"],"names":[],"mappings":"AAAA;EACI,oBAAA;ECCH;ADCD;EACI,oBAAA;EACA,QAAA;EACA,SAAA;EACA,YAAA;EACA,aAAA;EACA,cAAA;EACA,kBAAA;EACA,wBAAA;EACA,sBAAA;ECCH;ADCD;EACI,oBAAA;EACA,aAAA;EACA,cAAA;EACA,oBAAA;EACA,mBAAA;EACA,qBAAA;EACA,uCAAA;EACA,6BAAA;MAAA,yBAAA;UAAA,qBAAA;EACA,+BAAA;MAAA,2BAAA;UAAA,uBAAA;EACA,YAAA;EACA,sBAAA;ECCH;ADCD;EACI,gGAAA;EAAA,wFAAA;EACA,cAAA;ECCH;ADCD;EACI,+CAAA;EACA,YAAA;ECCH","file":"ripples.css","sourcesContent":[".withripple {\n position: relative;\n}\n.ripple-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: rgba(0,0,0,0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n",".withripple {\n position: relative;\n}\n.ripple-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: rgba(0, 0, 0, 0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n/*# sourceMappingURL=ripples.css.map */"]}
|
||||
|
|
|
|||
6
dist/css/ripples.min.css.map
vendored
6
dist/css/ripples.min.css.map
vendored
|
|
@ -1 +1,5 @@
|
|||
{"version":3,"sources":["/less/ripples.less"],"names":[],"mappings":"AAAA,YACI,kBAAA,CAAA,eAGA,kBACA,CAAA,KACA,CAAA,MACA,CAAA,SACA,CAAA,UACA,CAAA,WACA,CAAA,eACA,CAAA,qBACA,CAAA,mBAEJ,CAAA,OACI,kBACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,gBACA,CAAA,kBACA,CAAA,gCACA,CAAA,0BAAA,CACA,sBADA,CACA,kBAAA,CAAA,4BAAA,CACA,wBADA,CACA,oBAAA,CAAA,SACA,CAAA,mBAAA,CAAA,iBAGA,qFAAA,CACA,4EAAA,CAAA,UAAA,CAAA,kBAGA,2CACA,CAAA,SAAA,CAAA","file":"ripples.min.css","sourcesContent":[".withripple {\n position: relative;\n}\n.ripple-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: rgba(0,0,0,0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n"]}
|
||||
<<<<<<< HEAD
|
||||
{"version":3,"sources":["/less/ripples.less"],"names":[],"mappings":"AAAA,YACI,kBAAA,CAAA,eAGA,kBACA,CAAA,KACA,CAAA,MACA,CAAA,SACA,CAAA,UACA,CAAA,WACA,CAAA,eACA,CAAA,qBACA,CAAA,mBAEJ,CAAA,OACI,kBACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,gBACA,CAAA,kBACA,CAAA,gCACA,CAAA,0BAAA,CACA,sBADA,CACA,kBAAA,CAAA,4BAAA,CACA,wBADA,CACA,oBAAA,CAAA,SACA,CAAA,mBAAA,CAAA,iBAGA,qFAAA,CACA,4EAAA,CAAA,UAAA,CAAA,kBAGA,2CACA,CAAA,SAAA,CAAA","file":"ripples.min.css","sourcesContent":[".withripple {\n position: relative;\n}\n.ripple-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: rgba(0,0,0,0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n"]}
|
||||
=======
|
||||
{"version":3,"sources":["/less/ripples.less"],"names":[],"mappings":"AAAA,YACI,kBAAA,CAAA,eAGA,kBACA,CAAA,KACA,CAAA,MACA,CAAA,SACA,CAAA,UACA,CAAA,WACA,CAAA,eACA,CAAA,qBACA,CAAA,mBAEJ,CAAA,OACI,kBACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,gBACA,CAAA,kBACA,CAAA,gCACA,CAAA,0BAAA,CACA,sBADA,CACA,kBAAA,CAAA,4BAAA,CACA,wBADA,CACA,oBAAA,CAAA,SACA,CAAA,mBAAA,CAAA,iBAGA,qFAAA,CACA,4EAAA,CAAA,WAAA,CAAA,kBAGA,2CACA,CAAA,SAAA,CAAA","file":"ripples.min.css","sourcesContent":[".withripple {\n position: relative;\n}\n.ripple-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: rgba(0,0,0,0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.15;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n"]}
|
||||
>>>>>>> korgan00#material-colors-implementation
|
||||
|
|
|
|||
367
index.html
367
index.html
|
|
@ -156,6 +156,7 @@
|
|||
<ul>
|
||||
<li class="active withripple" data-target="#about">Material Design for Bootstrap</li>
|
||||
<li><a href="http://fezvrasta.github.com/bootstrap-material-design/bootstrap-elements.html" target="_blank">Bootstrap elements <i class="mdi-action-open-in-new"></i></a></li>
|
||||
<li class="withripple" data-target="#material-colors">Material Colors</li>
|
||||
<li class="withripple" data-target="#checkbox">Checkbox</li>
|
||||
<li class="withripple" data-target="#radio-button">Radio Button</li>
|
||||
<li class="withripple" data-target="#toggle-button">Toggle Button</li>
|
||||
|
|
@ -525,14 +526,59 @@
|
|||
|
||||
<div class="navbar navbar-inverse">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-warning-collapse">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
|
||||
</div>
|
||||
<div class="navbar-collapse collapse navbar-warning-collapse">
|
||||
<div class="navbar-collapse collapse navbar-inverse-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="javascript:void(0)">Active</a></li>
|
||||
<li><a href="javascript:void(0)">Link</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="javascript:void(0)">Action</a></li>
|
||||
<li><a href="javascript:void(0)">Another action</a></li>
|
||||
<li><a href="javascript:void(0)">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-header">Dropdown header</li>
|
||||
<li><a href="javascript:void(0)">Separated link</a></li>
|
||||
<li><a href="javascript:void(0)">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-form navbar-left">
|
||||
<input type="text" class="form-control col-lg-8" placeholder="Search">
|
||||
</form>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="javascript:void(0)">Link</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="javascript:void(0)">Action</a></li>
|
||||
<li><a href="javascript:void(0)">Another action</a></li>
|
||||
<li><a href="javascript:void(0)">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="javascript:void(0)">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar navbar-material-light-blue-300">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-material-light-blue-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
|
||||
</div>
|
||||
<div class="navbar-collapse collapse navbar-material-light-blue-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="javascript:void(0)">Active</a></li>
|
||||
<li><a href="javascript:void(0)">Link</a></li>
|
||||
|
|
@ -670,6 +716,320 @@
|
|||
</style>
|
||||
|
||||
</div>
|
||||
<div class="well page" id="material-colors">
|
||||
<h1 class="header">Material Color Samples</h1>
|
||||
<div class="sampleRed">
|
||||
<h2><button class="btn btn-material-red btn-lg">Red</button></h2>
|
||||
<button class="btn btn-material-red-50">050</button>
|
||||
<button class="btn btn-material-red-100">100</button>
|
||||
<button class="btn btn-material-red-200">200</button>
|
||||
<button class="btn btn-material-red-300">300</button>
|
||||
<button class="btn btn-material-red-400">400</button>
|
||||
<button class="btn btn-material-red-500">500</button>
|
||||
<button class="btn btn-material-red-600">600</button>
|
||||
<button class="btn btn-material-red-700">700</button>
|
||||
<button class="btn btn-material-red-800">800</button>
|
||||
<button class="btn btn-material-red-900">900</button><br>
|
||||
<button class="btn btn-material-red-A100">A100</button>
|
||||
<button class="btn btn-material-red-A200">A200</button>
|
||||
<button class="btn btn-material-red-A400">A400</button>
|
||||
<button class="btn btn-material-red-A700">A700</button>
|
||||
</div>
|
||||
<div class="samplePink">
|
||||
<h2><button class="btn btn-material-pink btn-lg">Pink</button></h2>
|
||||
<button class="btn btn-material-pink-50">050</button>
|
||||
<button class="btn btn-material-pink-100">100</button>
|
||||
<button class="btn btn-material-pink-200">200</button>
|
||||
<button class="btn btn-material-pink-300">300</button>
|
||||
<button class="btn btn-material-pink-400">400</button>
|
||||
<button class="btn btn-material-pink-500">500</button>
|
||||
<button class="btn btn-material-pink-600">600</button>
|
||||
<button class="btn btn-material-pink-700">700</button>
|
||||
<button class="btn btn-material-pink-800">800</button>
|
||||
<button class="btn btn-material-pink-900">900</button><br>
|
||||
<button class="btn btn-material-pink-A100">A100</button>
|
||||
<button class="btn btn-material-pink-A200">A200</button>
|
||||
<button class="btn btn-material-pink-A400">A400</button>
|
||||
<button class="btn btn-material-pink-A700">A700</button>
|
||||
</div>
|
||||
<div class="samplePurple">
|
||||
<h2><button class="btn btn-material-purple btn-lg">Purple</button></h2>
|
||||
<button class="btn btn-material-purple-50">050</button>
|
||||
<button class="btn btn-material-purple-100">100</button>
|
||||
<button class="btn btn-material-purple-200">200</button>
|
||||
<button class="btn btn-material-purple-300">300</button>
|
||||
<button class="btn btn-material-purple-400">400</button>
|
||||
<button class="btn btn-material-purple-500">500</button>
|
||||
<button class="btn btn-material-purple-600">600</button>
|
||||
<button class="btn btn-material-purple-700">700</button>
|
||||
<button class="btn btn-material-purple-800">800</button>
|
||||
<button class="btn btn-material-purple-900">900</button><br>
|
||||
<button class="btn btn-material-purple-A100">A100</button>
|
||||
<button class="btn btn-material-purple-A200">A200</button>
|
||||
<button class="btn btn-material-purple-A400">A400</button>
|
||||
<button class="btn btn-material-purple-A700">A700</button>
|
||||
</div>
|
||||
<div class="sampleDeepPurple">
|
||||
<h2><button class="btn btn-material-deep-purple btn-lg">Deep Purple</button></h2>
|
||||
<button class="btn btn-material-deep-purple-50">050</button>
|
||||
<button class="btn btn-material-deep-purple-100">100</button>
|
||||
<button class="btn btn-material-deep-purple-200">200</button>
|
||||
<button class="btn btn-material-deep-purple-300">300</button>
|
||||
<button class="btn btn-material-deep-purple-400">400</button>
|
||||
<button class="btn btn-material-deep-purple-500">500</button>
|
||||
<button class="btn btn-material-deep-purple-600">600</button>
|
||||
<button class="btn btn-material-deep-purple-700">700</button>
|
||||
<button class="btn btn-material-deep-purple-800">800</button>
|
||||
<button class="btn btn-material-deep-purple-900">900</button><br>
|
||||
<button class="btn btn-material-deep-purple-A100">A100</button>
|
||||
<button class="btn btn-material-deep-purple-A200">A200</button>
|
||||
<button class="btn btn-material-deep-purple-A400">A400</button>
|
||||
<button class="btn btn-material-deep-purple-A700">A700</button>
|
||||
</div>
|
||||
<div class="sampleIndigo">
|
||||
<h2><button class="btn btn-material-indigo btn-lg">Indigo</button></h2>
|
||||
<button class="btn btn-material-indigo-50">050</button>
|
||||
<button class="btn btn-material-indigo-100">100</button>
|
||||
<button class="btn btn-material-indigo-200">200</button>
|
||||
<button class="btn btn-material-indigo-300">300</button>
|
||||
<button class="btn btn-material-indigo-400">400</button>
|
||||
<button class="btn btn-material-indigo-500">500</button>
|
||||
<button class="btn btn-material-indigo-600">600</button>
|
||||
<button class="btn btn-material-indigo-700">700</button>
|
||||
<button class="btn btn-material-indigo-800">800</button>
|
||||
<button class="btn btn-material-indigo-900">900</button><br>
|
||||
<button class="btn btn-material-indigo-A100">A100</button>
|
||||
<button class="btn btn-material-indigo-A200">A200</button>
|
||||
<button class="btn btn-material-indigo-A400">A400</button>
|
||||
<button class="btn btn-material-indigo-A700">A700</button>
|
||||
</div>
|
||||
<div class="sampleBlue">
|
||||
<h2><button class="btn btn-material-blue btn-lg">Blue</button></h2>
|
||||
<button class="btn btn-material-blue-50">050</button>
|
||||
<button class="btn btn-material-blue-100">100</button>
|
||||
<button class="btn btn-material-blue-200">200</button>
|
||||
<button class="btn btn-material-blue-300">300</button>
|
||||
<button class="btn btn-material-blue-400">400</button>
|
||||
<button class="btn btn-material-blue-500">500</button>
|
||||
<button class="btn btn-material-blue-600">600</button>
|
||||
<button class="btn btn-material-blue-700">700</button>
|
||||
<button class="btn btn-material-blue-800">800</button>
|
||||
<button class="btn btn-material-blue-900">900</button><br>
|
||||
<button class="btn btn-material-blue-A100">A100</button>
|
||||
<button class="btn btn-material-blue-A200">A200</button>
|
||||
<button class="btn btn-material-blue-A400">A400</button>
|
||||
<button class="btn btn-material-blue-A700">A700</button>
|
||||
</div>
|
||||
<div class="sampleLightBlue">
|
||||
<h2><button class="btn btn-material-light-blue btn-lg">Light Blue</button></h2>
|
||||
<button class="btn btn-material-light-blue-50">050</button>
|
||||
<button class="btn btn-material-light-blue-100">100</button>
|
||||
<button class="btn btn-material-light-blue-200">200</button>
|
||||
<button class="btn btn-material-light-blue-300">300</button>
|
||||
<button class="btn btn-material-light-blue-400">400</button>
|
||||
<button class="btn btn-material-light-blue-500">500</button>
|
||||
<button class="btn btn-material-light-blue-600">600</button>
|
||||
<button class="btn btn-material-light-blue-700">700</button>
|
||||
<button class="btn btn-material-light-blue-800">800</button>
|
||||
<button class="btn btn-material-light-blue-900">900</button><br>
|
||||
<button class="btn btn-material-light-blue-A100">A100</button>
|
||||
<button class="btn btn-material-light-blue-A200">A200</button>
|
||||
<button class="btn btn-material-light-blue-A400">A400</button>
|
||||
<button class="btn btn-material-light-blue-A700">A700</button>
|
||||
</div>
|
||||
<div class="sampleCyan">
|
||||
<h2><button class="btn btn-material-cyan btn-lg">Cyan</button></h2>
|
||||
<button class="btn btn-material-cyan-50">050</button>
|
||||
<button class="btn btn-material-cyan-100">100</button>
|
||||
<button class="btn btn-material-cyan-200">200</button>
|
||||
<button class="btn btn-material-cyan-300">300</button>
|
||||
<button class="btn btn-material-cyan-400">400</button>
|
||||
<button class="btn btn-material-cyan-500">500</button>
|
||||
<button class="btn btn-material-cyan-600">600</button>
|
||||
<button class="btn btn-material-cyan-700">700</button>
|
||||
<button class="btn btn-material-cyan-800">800</button>
|
||||
<button class="btn btn-material-cyan-900">900</button><br>
|
||||
<button class="btn btn-material-cyan-A100">A100</button>
|
||||
<button class="btn btn-material-cyan-A200">A200</button>
|
||||
<button class="btn btn-material-cyan-A400">A400</button>
|
||||
<button class="btn btn-material-cyan-A700">A700</button>
|
||||
</div>
|
||||
<div class="sampleTeal">
|
||||
<h2><button class="btn btn-material-teal btn-lg">Teal</button></h2>
|
||||
<button class="btn btn-material-teal-50">050</button>
|
||||
<button class="btn btn-material-teal-100">100</button>
|
||||
<button class="btn btn-material-teal-200">200</button>
|
||||
<button class="btn btn-material-teal-300">300</button>
|
||||
<button class="btn btn-material-teal-400">400</button>
|
||||
<button class="btn btn-material-teal-500">500</button>
|
||||
<button class="btn btn-material-teal-600">600</button>
|
||||
<button class="btn btn-material-teal-700">700</button>
|
||||
<button class="btn btn-material-teal-800">800</button>
|
||||
<button class="btn btn-material-teal-900">900</button><br>
|
||||
<button class="btn btn-material-teal-A100">A100</button>
|
||||
<button class="btn btn-material-teal-A200">A200</button>
|
||||
<button class="btn btn-material-teal-A400">A400</button>
|
||||
<button class="btn btn-material-teal-A700">A700</button>
|
||||
</div>
|
||||
<div class="sampleGreen">
|
||||
<h2><button class="btn btn-material-green btn-lg">Green</button></h2>
|
||||
<button class="btn btn-material-green-50">050</button>
|
||||
<button class="btn btn-material-green-100">100</button>
|
||||
<button class="btn btn-material-green-200">200</button>
|
||||
<button class="btn btn-material-green-300">300</button>
|
||||
<button class="btn btn-material-green-400">400</button>
|
||||
<button class="btn btn-material-green-500">500</button>
|
||||
<button class="btn btn-material-green-600">600</button>
|
||||
<button class="btn btn-material-green-700">700</button>
|
||||
<button class="btn btn-material-green-800">800</button>
|
||||
<button class="btn btn-material-green-900">900</button><br>
|
||||
<button class="btn btn-material-green-A100">A100</button>
|
||||
<button class="btn btn-material-green-A200">A200</button>
|
||||
<button class="btn btn-material-green-A400">A400</button>
|
||||
<button class="btn btn-material-green-A700">A700</button>
|
||||
</div>
|
||||
<div class="sampleLightGreen">
|
||||
<h2><button class="btn btn-material-light-green btn-lg">LightGreen</button></h2>
|
||||
<button class="btn btn-material-light-green-50">050</button>
|
||||
<button class="btn btn-material-light-green-100">100</button>
|
||||
<button class="btn btn-material-light-green-200">200</button>
|
||||
<button class="btn btn-material-light-green-300">300</button>
|
||||
<button class="btn btn-material-light-green-400">400</button>
|
||||
<button class="btn btn-material-light-green-500">500</button>
|
||||
<button class="btn btn-material-light-green-600">600</button>
|
||||
<button class="btn btn-material-light-green-700">700</button>
|
||||
<button class="btn btn-material-light-green-800">800</button>
|
||||
<button class="btn btn-material-light-green-900">900</button><br>
|
||||
<button class="btn btn-material-light-green-A100">A100</button>
|
||||
<button class="btn btn-material-light-green-A200">A200</button>
|
||||
<button class="btn btn-material-light-green-A400">A400</button>
|
||||
<button class="btn btn-material-light-green-A700">A700</button>
|
||||
</div>
|
||||
<div class="sampleLime">
|
||||
<h2><button class="btn btn-material-lime btn-lg">Lime</button></h2>
|
||||
<button class="btn btn-material-lime-50">050</button>
|
||||
<button class="btn btn-material-lime-100">100</button>
|
||||
<button class="btn btn-material-lime-200">200</button>
|
||||
<button class="btn btn-material-lime-300">300</button>
|
||||
<button class="btn btn-material-lime-400">400</button>
|
||||
<button class="btn btn-material-lime-500">500</button>
|
||||
<button class="btn btn-material-lime-600">600</button>
|
||||
<button class="btn btn-material-lime-700">700</button>
|
||||
<button class="btn btn-material-lime-800">800</button>
|
||||
<button class="btn btn-material-lime-900">900</button><br>
|
||||
<button class="btn btn-material-lime-A100">A100</button>
|
||||
<button class="btn btn-material-lime-A200">A200</button>
|
||||
<button class="btn btn-material-lime-A400">A400</button>
|
||||
<button class="btn btn-material-lime-A700">A700</button>
|
||||
</div>
|
||||
<div class="sampleYellow">
|
||||
<h2><button class="btn btn-material-yellow btn-lg">Yellow</button></h2>
|
||||
<button class="btn btn-material-yellow-50">050</button>
|
||||
<button class="btn btn-material-yellow-100">100</button>
|
||||
<button class="btn btn-material-yellow-200">200</button>
|
||||
<button class="btn btn-material-yellow-300">300</button>
|
||||
<button class="btn btn-material-yellow-400">400</button>
|
||||
<button class="btn btn-material-yellow-500">500</button>
|
||||
<button class="btn btn-material-yellow-600">600</button>
|
||||
<button class="btn btn-material-yellow-700">700</button>
|
||||
<button class="btn btn-material-yellow-800">800</button>
|
||||
<button class="btn btn-material-yellow-900">900</button><br>
|
||||
<button class="btn btn-material-yellow-A100">A100</button>
|
||||
<button class="btn btn-material-yellow-A200">A200</button>
|
||||
<button class="btn btn-material-yellow-A400">A400</button>
|
||||
<button class="btn btn-material-yellow-A700">A700</button>
|
||||
</div>
|
||||
<div class="sampleAmber">
|
||||
<h2><button class="btn btn-material-amber btn-lg">Amber</button></h2>
|
||||
<button class="btn btn-material-amber-50">050</button>
|
||||
<button class="btn btn-material-amber-100">100</button>
|
||||
<button class="btn btn-material-amber-200">200</button>
|
||||
<button class="btn btn-material-amber-300">300</button>
|
||||
<button class="btn btn-material-amber-400">400</button>
|
||||
<button class="btn btn-material-amber-500">500</button>
|
||||
<button class="btn btn-material-amber-600">600</button>
|
||||
<button class="btn btn-material-amber-700">700</button>
|
||||
<button class="btn btn-material-amber-800">800</button>
|
||||
<button class="btn btn-material-amber-900">900</button><br>
|
||||
<button class="btn btn-material-amber-A100">A100</button>
|
||||
<button class="btn btn-material-amber-A200">A200</button>
|
||||
<button class="btn btn-material-amber-A400">A400</button>
|
||||
<button class="btn btn-material-amber-A700">A700</button>
|
||||
</div>
|
||||
<div class="sampleOrange">
|
||||
<h2><button class="btn btn-material-orange btn-lg">Orange</button></h2>
|
||||
<button class="btn btn-material-orange-50">050</button>
|
||||
<button class="btn btn-material-orange-100">100</button>
|
||||
<button class="btn btn-material-orange-200">200</button>
|
||||
<button class="btn btn-material-orange-300">300</button>
|
||||
<button class="btn btn-material-orange-400">400</button>
|
||||
<button class="btn btn-material-orange-500">500</button>
|
||||
<button class="btn btn-material-orange-600">600</button>
|
||||
<button class="btn btn-material-orange-700">700</button>
|
||||
<button class="btn btn-material-orange-800">800</button>
|
||||
<button class="btn btn-material-orange-900">900</button><br>
|
||||
<button class="btn btn-material-orange-A100">A100</button>
|
||||
<button class="btn btn-material-orange-A200">A200</button>
|
||||
<button class="btn btn-material-orange-A400">A400</button>
|
||||
<button class="btn btn-material-orange-A700">A700</button>
|
||||
</div>
|
||||
<div class="sampleDeepOrange">
|
||||
<h2><button class="btn btn-material-deep-orange btn-lg">Deep Orange</button></h2>
|
||||
<button class="btn btn-material-deep-orange-50">050</button>
|
||||
<button class="btn btn-material-deep-orange-100">100</button>
|
||||
<button class="btn btn-material-deep-orange-200">200</button>
|
||||
<button class="btn btn-material-deep-orange-300">300</button>
|
||||
<button class="btn btn-material-deep-orange-400">400</button>
|
||||
<button class="btn btn-material-deep-orange-500">500</button>
|
||||
<button class="btn btn-material-deep-orange-600">600</button>
|
||||
<button class="btn btn-material-deep-orange-700">700</button>
|
||||
<button class="btn btn-material-deep-orange-800">800</button>
|
||||
<button class="btn btn-material-deep-orange-900">900</button><br>
|
||||
<button class="btn btn-material-deep-orange-A100">A100</button>
|
||||
<button class="btn btn-material-deep-orange-A200">A200</button>
|
||||
<button class="btn btn-material-deep-orange-A400">A400</button>
|
||||
<button class="btn btn-material-deep-orange-A700">A700</button><br><br>
|
||||
</div>
|
||||
<div class="sampleBrown">
|
||||
<h2><button class="btn btn-material-brown btn-lg">Brown</button></h2>
|
||||
<button class="btn btn-material-brown-50">050</button>
|
||||
<button class="btn btn-material-brown-100">100</button>
|
||||
<button class="btn btn-material-brown-200">200</button>
|
||||
<button class="btn btn-material-brown-300">300</button>
|
||||
<button class="btn btn-material-brown-400">400</button>
|
||||
<button class="btn btn-material-brown-500">500</button>
|
||||
<button class="btn btn-material-brown-600">600</button>
|
||||
<button class="btn btn-material-brown-700">700</button>
|
||||
<button class="btn btn-material-brown-800">800</button>
|
||||
<button class="btn btn-material-brown-900">900</button>
|
||||
</div>
|
||||
<div class="sampleGrey">
|
||||
<h2><button class="btn btn-material-grey btn-lg">Grey</button></h2>
|
||||
<button class="btn btn-material-grey-50">050</button>
|
||||
<button class="btn btn-material-grey-100">100</button>
|
||||
<button class="btn btn-material-grey-200">200</button>
|
||||
<button class="btn btn-material-grey-300">300</button>
|
||||
<button class="btn btn-material-grey-400">400</button>
|
||||
<button class="btn btn-material-grey-500">500</button>
|
||||
<button class="btn btn-material-grey-600">600</button>
|
||||
<button class="btn btn-material-grey-700">700</button>
|
||||
<button class="btn btn-material-grey-800">800</button>
|
||||
<button class="btn btn-material-grey-900">900</button>
|
||||
</div>
|
||||
<div class="sampleBlueGrey">
|
||||
<h2><button class="btn btn-material-blue-grey btn-lg">Blue Grey</button></h2>
|
||||
<button class="btn btn-material-blue-grey-50">050</button>
|
||||
<button class="btn btn-material-blue-grey-100">100</button>
|
||||
<button class="btn btn-material-blue-grey-200">200</button>
|
||||
<button class="btn btn-material-blue-grey-300">300</button>
|
||||
<button class="btn btn-material-blue-grey-400">400</button>
|
||||
<button class="btn btn-material-blue-grey-500">500</button>
|
||||
<button class="btn btn-material-blue-grey-600">600</button>
|
||||
<button class="btn btn-material-blue-grey-700">700</button>
|
||||
<button class="btn btn-material-blue-grey-800">800</button>
|
||||
<button class="btn btn-material-blue-grey-900">900</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="well page" id="button">
|
||||
<h1 class="header">Button</h1>
|
||||
<div class="sample1">
|
||||
|
|
@ -699,6 +1059,7 @@
|
|||
<button class="btn btn-default btn-flat"><i class="mdi-navigation-close"></i> Cancel</button>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
#button h2 {
|
||||
padding: 14px;
|
||||
|
|
@ -912,7 +1273,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-xs-2">
|
||||
<button class="btn btn-fab btn-material-lightgrey" id="opensource"><i class="mdi-action-open-in-new"></i></button></div>
|
||||
<button class="btn btn-fab btn-material-grey-200" id="opensource"><i class="mdi-action-open-in-new"></i></button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,10 +18,10 @@
|
|||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
outline: none !important;
|
||||
|
||||
.variations(~":not(.btn-link):not(.btn-flat)", background-color, @btn-default);
|
||||
|
||||
.variations(~".btn-flat:not(.btn-link)", color, @lightbg-text);
|
||||
|
||||
.background-variations(~":not(.btn-link):not(.btn-flat)", @btn-default);
|
||||
|
||||
&.btn-flat {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
|
|
|
|||
|
|
@ -317,6 +317,10 @@ Then, run this script to get the list.
|
|||
@brown-700: #5d4037;
|
||||
@brown-800: #4e342e;
|
||||
@brown-900: #3e2723;
|
||||
@brown-A100: #d7ccc8;
|
||||
@brown-A200: #bcaaa4;
|
||||
@brown-A400: #8d6e63;
|
||||
@brown-A700: #5d4037;
|
||||
@brown: @brown-500;
|
||||
|
||||
|
||||
|
|
@ -330,6 +334,10 @@ Then, run this script to get the list.
|
|||
@grey-700: #616161;
|
||||
@grey-800: #424242;
|
||||
@grey-900: #212121;
|
||||
@grey-A100: #f5f5f5;
|
||||
@grey-A200: #eeeeee;
|
||||
@grey-A400: #bdbdbd;
|
||||
@grey-A700: #616161;
|
||||
@grey: @grey-500;
|
||||
|
||||
|
||||
|
|
@ -343,6 +351,10 @@ Then, run this script to get the list.
|
|||
@blue-grey-700: #455a64;
|
||||
@blue-grey-800: #37474f;
|
||||
@blue-grey-900: #263238;
|
||||
@blue-grey-A100: #cfd8dc;
|
||||
@blue-grey-A200: #b0bec5;
|
||||
@blue-grey-A400: #78909c;
|
||||
@blue-grey-A700: #455a64;
|
||||
@blue-grey: @blue-grey-500;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// usage: .variations(~" .check", color, transparent);
|
||||
.variations(@extra, @property, @default) {
|
||||
|
||||
// Bootstrap shades
|
||||
&@{extra}, &-default@{extra} {
|
||||
@{property}: @default;
|
||||
|
|
@ -19,6 +20,54 @@
|
|||
&-danger@{extra} {
|
||||
@{property}: @danger;
|
||||
}
|
||||
|
||||
|
||||
.variations-factory(@material-color) {
|
||||
.variations-factory-deep(@material-color-number) {
|
||||
|
||||
&-material-@{material-color}@{material-color-number}@{extra} {
|
||||
@final-color: "@{material-color}@{material-color-number}";
|
||||
@{property}: @@final-color;
|
||||
}
|
||||
|
||||
}
|
||||
.variations-factory-deep(~"");
|
||||
.variations-factory-deep(~"-50");
|
||||
.variations-factory-deep(~"-100");
|
||||
.variations-factory-deep(~"-200");
|
||||
.variations-factory-deep(~"-300");
|
||||
.variations-factory-deep(~"-400");
|
||||
.variations-factory-deep(~"-500");
|
||||
.variations-factory-deep(~"-600");
|
||||
.variations-factory-deep(~"-700");
|
||||
.variations-factory-deep(~"-800");
|
||||
.variations-factory-deep(~"-900");
|
||||
.variations-factory-deep(~"-A100");
|
||||
.variations-factory-deep(~"-A200");
|
||||
.variations-factory-deep(~"-A400");
|
||||
.variations-factory-deep(~"-A700");
|
||||
}
|
||||
.variations-factory(~"red");
|
||||
.variations-factory(~"pink");
|
||||
.variations-factory(~"purple");
|
||||
.variations-factory(~"deep-purple");
|
||||
.variations-factory(~"indigo");
|
||||
.variations-factory(~"blue");
|
||||
.variations-factory(~"light-blue");
|
||||
.variations-factory(~"cyan");
|
||||
.variations-factory(~"teal");
|
||||
.variations-factory(~"green");
|
||||
.variations-factory(~"light-green");
|
||||
.variations-factory(~"lime");
|
||||
.variations-factory(~"yellow");
|
||||
.variations-factory(~"amber");
|
||||
.variations-factory(~"orange");
|
||||
.variations-factory(~"deep-orange");
|
||||
.variations-factory(~"brown");
|
||||
.variations-factory(~"grey");
|
||||
.variations-factory(~"blue-grey");
|
||||
|
||||
/*
|
||||
// Material shades
|
||||
&-material-red@{extra} {
|
||||
@{property}: @red;
|
||||
|
|
@ -74,6 +123,170 @@
|
|||
&-material-lightgrey@{extra} {
|
||||
@{property}: @lightgrey;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
.background-variations(@extra, @default) {
|
||||
|
||||
@contrast-factor: 40%;
|
||||
|
||||
.set-background-and-font-color(@bg-color) {
|
||||
background-color: @bg-color;
|
||||
color: contrast(@bg-color, @lightbg-text, @darkbg-text, @contrast-factor);
|
||||
}
|
||||
|
||||
// bootstrap styles
|
||||
&@{extra}, &-default@{extra} {
|
||||
.set-background-and-font-color(@default);
|
||||
}
|
||||
&-primary@{extra} {
|
||||
.set-background-and-font-color(@primary);
|
||||
}
|
||||
&-success@{extra} {
|
||||
.set-background-and-font-color(@success);
|
||||
}
|
||||
&-info@{extra} {
|
||||
.set-background-and-font-color(@info);
|
||||
}
|
||||
&-warning@{extra} {
|
||||
.set-background-and-font-color(@warning);
|
||||
}
|
||||
&-danger@{extra} {
|
||||
.set-background-and-font-color(@danger);
|
||||
}
|
||||
|
||||
// given a color build multiples dephs
|
||||
.background-variations-factory(@material-color) {
|
||||
|
||||
// given a color and its deph build css
|
||||
.background-variations-factory-deep(@material-color-number) {
|
||||
|
||||
&-material-@{material-color}@{material-color-number}@{extra} {
|
||||
@final-background-color: "@{material-color}@{material-color-number}";
|
||||
.set-background-and-font-color(@@final-background-color);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.background-variations-factory-deep(~"");
|
||||
.background-variations-factory-deep(~"-50");
|
||||
.background-variations-factory-deep(~"-100");
|
||||
.background-variations-factory-deep(~"-200");
|
||||
.background-variations-factory-deep(~"-300");
|
||||
.background-variations-factory-deep(~"-400");
|
||||
.background-variations-factory-deep(~"-500");
|
||||
.background-variations-factory-deep(~"-600");
|
||||
.background-variations-factory-deep(~"-700");
|
||||
.background-variations-factory-deep(~"-800");
|
||||
.background-variations-factory-deep(~"-900");
|
||||
.background-variations-factory-deep(~"-A100");
|
||||
.background-variations-factory-deep(~"-A200");
|
||||
.background-variations-factory-deep(~"-A400");
|
||||
.background-variations-factory-deep(~"-A700");
|
||||
}
|
||||
|
||||
.background-variations-factory(~"red");
|
||||
.background-variations-factory(~"pink");
|
||||
.background-variations-factory(~"purple");
|
||||
.background-variations-factory(~"deep-purple");
|
||||
.background-variations-factory(~"indigo");
|
||||
.background-variations-factory(~"blue");
|
||||
.background-variations-factory(~"light-blue");
|
||||
.background-variations-factory(~"cyan");
|
||||
.background-variations-factory(~"teal");
|
||||
.background-variations-factory(~"green");
|
||||
.background-variations-factory(~"light-green");
|
||||
.background-variations-factory(~"lime");
|
||||
.background-variations-factory(~"yellow");
|
||||
.background-variations-factory(~"amber");
|
||||
.background-variations-factory(~"orange");
|
||||
.background-variations-factory(~"deep-orange");
|
||||
.background-variations-factory(~"brown");
|
||||
.background-variations-factory(~"grey");
|
||||
.background-variations-factory(~"blue-grey");
|
||||
|
||||
|
||||
}
|
||||
|
||||
.text-variations(@extra, @default) {
|
||||
|
||||
@contrast-factor: 40%;
|
||||
|
||||
.set-font-color(@bg-color) {
|
||||
color: contrast(@bg-color, @lightbg-text, @darkbg-text, @contrast-factor);
|
||||
}
|
||||
|
||||
// bootstrap styles
|
||||
&@{extra}, &-default@{extra} {
|
||||
.set-font-color(@default);
|
||||
}
|
||||
&-primary@{extra} {
|
||||
.set-font-color(@primary);
|
||||
}
|
||||
&-success@{extra} {
|
||||
.set-font-color(@success);
|
||||
}
|
||||
&-info@{extra} {
|
||||
.set-font-color(@info);
|
||||
}
|
||||
&-warning@{extra} {
|
||||
.set-font-color(@warning);
|
||||
}
|
||||
&-danger@{extra} {
|
||||
.set-font-color(@danger);
|
||||
}
|
||||
|
||||
// given a color build multiples dephs
|
||||
.background-variations-factory(@material-color) {
|
||||
|
||||
// given a color and its deph build css
|
||||
.background-variations-factory-deep(@material-color-number) {
|
||||
|
||||
&-material-@{material-color}@{material-color-number}@{extra} {
|
||||
@final-background-color: "@{material-color}@{material-color-number}";
|
||||
.set-font-color(@@final-background-color);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.background-variations-factory-deep(~"");
|
||||
.background-variations-factory-deep(~"-50");
|
||||
.background-variations-factory-deep(~"-100");
|
||||
.background-variations-factory-deep(~"-200");
|
||||
.background-variations-factory-deep(~"-300");
|
||||
.background-variations-factory-deep(~"-400");
|
||||
.background-variations-factory-deep(~"-500");
|
||||
.background-variations-factory-deep(~"-600");
|
||||
.background-variations-factory-deep(~"-700");
|
||||
.background-variations-factory-deep(~"-800");
|
||||
.background-variations-factory-deep(~"-900");
|
||||
.background-variations-factory-deep(~"-A100");
|
||||
.background-variations-factory-deep(~"-A200");
|
||||
.background-variations-factory-deep(~"-A400");
|
||||
.background-variations-factory-deep(~"-A700");
|
||||
}
|
||||
|
||||
.background-variations-factory(~"red");
|
||||
.background-variations-factory(~"pink");
|
||||
.background-variations-factory(~"purple");
|
||||
.background-variations-factory(~"deep-purple");
|
||||
.background-variations-factory(~"indigo");
|
||||
.background-variations-factory(~"blue");
|
||||
.background-variations-factory(~"light-blue");
|
||||
.background-variations-factory(~"cyan");
|
||||
.background-variations-factory(~"teal");
|
||||
.background-variations-factory(~"green");
|
||||
.background-variations-factory(~"light-green");
|
||||
.background-variations-factory(~"lime");
|
||||
.background-variations-factory(~"yellow");
|
||||
.background-variations-factory(~"amber");
|
||||
.background-variations-factory(~"orange");
|
||||
.background-variations-factory(~"deep-orange");
|
||||
.background-variations-factory(~"brown");
|
||||
.background-variations-factory(~"grey");
|
||||
.background-variations-factory(~"blue-grey");
|
||||
|
||||
|
||||
}
|
||||
|
||||
@all-variations: ~"-default, -primary, -info, -success, -warning, -danger";
|
||||
|
|
|
|||
|
|
@ -1,227 +1,227 @@
|
|||
.navbar {
|
||||
background-color: @navbar-default-bg;
|
||||
background-color: @primary;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
|
||||
.navbar-brand {
|
||||
position: relative;
|
||||
height: 60px;
|
||||
line-height: 30px;
|
||||
color: inherit;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: inherit;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
> li > a {
|
||||
color: inherit;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
> .active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
> .disabled > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Darken the responsive nav toggle
|
||||
.navbar-toggle {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
.icon-bar {
|
||||
background-color: inherit;
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
position: relative;
|
||||
height: 60px;
|
||||
line-height: 30px;
|
||||
color: @navbar-brand-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-brand-color;
|
||||
background-color: transparent;
|
||||
.navbar-default .navbar-toggle,
|
||||
.navbar-inverse .navbar-toggle {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-collapse,
|
||||
.navbar-form {
|
||||
border-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
// Dropdowns
|
||||
.navbar-nav {
|
||||
> .open > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
// Dropdowns get custom display
|
||||
.open .dropdown-menu {
|
||||
> .dropdown-header {
|
||||
border: 0;
|
||||
color: inherit;
|
||||
}
|
||||
.divider {
|
||||
border-bottom: 1px solid;
|
||||
opacity: 0.08;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: @navbar-color;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
> li > a {
|
||||
color: @navbar-link-color;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-hover-color;
|
||||
background-color: @navbar-link-hover-bg;
|
||||
}
|
||||
color: inherit;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
> .active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-active-color;
|
||||
background-color: @navbar-link-active-bg;
|
||||
}
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
> .disabled > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-disabled-color;
|
||||
background-color: @navbar-link-disabled-bg;
|
||||
}
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Darken the responsive nav toggle
|
||||
.navbar-toggle {
|
||||
border-color: transparent;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @navbar-toggle-hover-bg;
|
||||
}
|
||||
.icon-bar {
|
||||
background-color: @navbar-toggle-icon-bar-bg;
|
||||
}
|
||||
.navbar-link {
|
||||
color: inherit;
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-default .navbar-toggle,
|
||||
.navbar-inverse .navbar-toggle {
|
||||
border-color: transparent;
|
||||
.btn-link {
|
||||
color: inherit;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.navbar-collapse,
|
||||
.navbar-form {
|
||||
border-color: rgba(0,0,0,0.1);
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdowns
|
||||
.navbar-form {
|
||||
margin-top: 16px;
|
||||
.form-control-wrapper .form-control, .form-control {
|
||||
border-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
.form-control-wrapper {
|
||||
.material-input:before, input:focus ~ .material-input:after {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
.background-variations(~"", @primary);
|
||||
.text-variations(~" .form-control::placeholder", @primary);
|
||||
|
||||
&-inverse {
|
||||
background-color: @indigo;
|
||||
}
|
||||
&-material-white {
|
||||
background-color: #FFF;
|
||||
.navbar-brand, .navbar-brand:hover, .navbar-brand:focus {
|
||||
color: inherit;
|
||||
}
|
||||
.navbar-nav {
|
||||
> .open > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @navbar-link-active-bg;
|
||||
color: @navbar-link-active-color;
|
||||
}
|
||||
}
|
||||
& > li > a {
|
||||
color: inherit;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
// Dropdowns get custom display
|
||||
.open .dropdown-menu {
|
||||
> .dropdown-header {
|
||||
border: 0;
|
||||
color: darken(@navbar-link-color, 17%)
|
||||
}
|
||||
.divider {
|
||||
background-color: @navbar-border;
|
||||
}
|
||||
> li > a {
|
||||
color: @navbar-link-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-hover-color;
|
||||
background-color: @navbar-link-hover-bg;
|
||||
}
|
||||
}
|
||||
> .active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-active-color;
|
||||
background-color: @navbar-link-active-bg;
|
||||
}
|
||||
}
|
||||
> .disabled > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-disabled-color;
|
||||
background-color: @navbar-link-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
color: @navbar-link-color;
|
||||
&:hover {
|
||||
color: @navbar-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
color: @navbar-link-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-hover-color;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-link-disabled-color;
|
||||
}
|
||||
}
|
||||
& > .active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .disabled > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
& > .open > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
|
||||
.navbar-brand {
|
||||
height: 50px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.navbar-form {
|
||||
margin-top: 16px;
|
||||
.form-control-wrapper .form-control, .form-control {
|
||||
border-color: @navbar-border;
|
||||
color: @navbar-border;
|
||||
}
|
||||
.form-control-wrapper {
|
||||
.material-input:before, input:focus ~ .material-input:after {
|
||||
background-color: @navbar-border;
|
||||
}
|
||||
}
|
||||
::-webkit-input-placeholder { color: @navbar-border; }
|
||||
:-moz-placeholder { color: @navbar-border; };
|
||||
::-moz-placeholder { color: @navbar-border; };
|
||||
:-ms-input-placeholder { color: @navbar-border; };
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.variations(~"", background-color, @primary);
|
||||
&-inverse {
|
||||
background-color: @navbar-inverse-bg;
|
||||
}
|
||||
&-material-white {
|
||||
background-color: #FFF;
|
||||
.navbar-brand, .navbar-brand:hover, .navbar-brand:focus {
|
||||
color: @lightbg-text;
|
||||
}
|
||||
.navbar-nav {
|
||||
& > li > a {
|
||||
color: @lightbg-text;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @lightbg-text;
|
||||
background-color: @navbar-link-hover-bg;
|
||||
}
|
||||
}
|
||||
& > .active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @lightbg-text;
|
||||
background-color: @navbar-link-active-bg;
|
||||
}
|
||||
}
|
||||
& > .disabled > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @lightbg-text;
|
||||
background-color: @navbar-link-disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
& > .open > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @navbar-link-active-bg;
|
||||
color: @lightbg-text;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
|
||||
.navbar-brand {
|
||||
height: 50px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.navbar-form {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.navbar-nav > li > a {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.navbar-nav > li > a {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.nav-tabs {
|
||||
background: @navbar-default-bg;
|
||||
background: @primary;
|
||||
> li {
|
||||
> a {
|
||||
color: #FFFFFF;
|
||||
|
|
|
|||
|
|
@ -69,26 +69,6 @@
|
|||
@input-success: @success;
|
||||
@input-info: @info;
|
||||
|
||||
@navbar-danger-bg: @danger;
|
||||
@navbar-inverse-bg: #5264AE;
|
||||
@navbar-warning-bg: @warning;
|
||||
@navbar-success-bg: @success;
|
||||
@navbar-info-bg: @info;
|
||||
@navbar-default-bg: @primary;
|
||||
@navbar-color: @darkbg-text;
|
||||
@navbar-link-color: @darkbg-text;
|
||||
@navbar-link-hover-color: @darkbg-text;
|
||||
@navbar-link-hover-bg: transparent;
|
||||
@navbar-link-active-color: @darkbg-text;
|
||||
@navbar-link-active-bg: rgba(0,0,0,0.05);
|
||||
@navbar-link-disabled-color: #E5E5E5;
|
||||
@navbar-link-disabled-bg: transparent;
|
||||
@navbar-brand-color: @darkbg-text;
|
||||
@navbar-toggle-border-color: @darkbg-text;
|
||||
@navbar-toggle-hover-bg: transparent;
|
||||
@navbar-toggle-icon-bar-bg: @darkbg-text;
|
||||
@navbar-border: @darkbg-text;
|
||||
|
||||
@alert-success: @success;
|
||||
@alert-info: @info;
|
||||
@alert-warning: @warning;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "_variables.less";
|
||||
@import "_colors.less";
|
||||
@import "_mixins.less";
|
||||
@import "_icons-material-design.less";
|
||||
@import "_shadows.less";
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user