mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-04-25 19:36:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

some improvement on navbars

Browse Source
This commit is contained in:
FezVrasta 2014-12-13 12:26:25 +01:00
parent f1bac0b4b9
commit cb2472f5cf
17 changed files with 57855 additions and 1475 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29220
dist/css/material-wfont.css vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/css/material-wfont.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material-wfont.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material-wfont.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

29220
dist/css/material.css vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/css/material.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

14
dist/css/ripples.css vendored
View File

@ -20,23 +20,17 @@
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;
}
.ripple.ripple-on {
-webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
opacity: 0.15;
}
.ripple.ripple-out {
-webkit-transition: opacity 0.1s linear 0s !important;
transition: opacity 0.1s linear 0s !important;
transition: opacity 0.1s linear 0s !important;
opacity: 0;
}
/*# sourceMappingURL=ripples.css.map */

2
dist/css/ripples.css.map vendored
View File

@ -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,wGAAA;UAAA,wFAAA;EACA,eAAA;ECCH;ADCD;EACI,uDAAA;UAAA,+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.15;\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.15;\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"],"names":[],"mappings":"AAAA;EACI,kBAAA;;AAEJ;EACI,kBAAA;EACA,MAAA;EACA,OAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,sBAAA;EACA,oBAAA;;AAEJ;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,mBAAA;EACA,qCAAA;EACA,WAAW,QAAX;EACA,qBAAA;EACA,UAAA;EACA,oBAAA;;AAEJ,OAAO;EACH,qDAAqD,iCAArD;EACA,aAAA;;AAEJ,OAAO;EACH,6CAAA;EACA,UAAA","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"]}

2
dist/css/ripples.min.css vendored
View File

@ -1,2 +1,2 @@
.withripple{position:relative}.ripple-wrapper{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;overflow:hidden;border-radius:inherit;pointer-events:none}.ripple{position:absolute;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border-radius:100%;background-color:rgba(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%;opacity:0;pointer-events:none}.ripple.ripple-on{-webkit-transition:opacity .15s ease-in 0s,-webkit-transform .5s cubic-bezier(.4,0,.2,1) .1s;transition:opacity .15s ease-in 0s,transform .5s cubic-bezier(.4,0,.2,1) .1s;opacity:.15}.ripple.ripple-out{-webkit-transition:opacity .1s linear 0s!important;transition:opacity .1s linear 0s!important;opacity:0}
.withripple{position:relative}.ripple-wrapper{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;overflow:hidden;border-radius:inherit;pointer-events:none}.ripple{position:absolute;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border-radius:100%;background-color:rgba(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%;opacity:0;pointer-events:none}.ripple.ripple-on{transition:opacity .15s ease-in 0s,-webkit-transform .5s cubic-bezier(.4,0,.2,1) .1s;transition:opacity .15s ease-in 0s,transform .5s cubic-bezier(.4,0,.2,1) .1s;opacity:.15}.ripple.ripple-out{transition:opacity .1s linear 0s!important;opacity:0}
/*# sourceMappingURL=ripples.min.css.map */

2
dist/css/ripples.min.css.map vendored
View File

@ -1 +1 @@
{"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,6FAAA,CACA,4EAAA,CAAA,WAAA,CAAA,kBAGA,mDAAA,CACA,0CAAA,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"]}
{"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"]}

124
index.html
View File

@ -526,14 +526,14 @@
<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>
@ -571,14 +571,14 @@
<div class="navbar navbar-material-light-blue-300">
<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-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-warning-collapse">
<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>
@ -718,8 +718,8 @@
</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>
<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>
@ -734,9 +734,9 @@
<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>
</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>
@ -751,9 +751,9 @@
<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>
</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>
@ -768,9 +768,9 @@
<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>
</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>
@ -785,9 +785,9 @@
<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>
</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>
@ -802,9 +802,9 @@
<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>
</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>
@ -819,9 +819,9 @@
<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>
</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>
@ -836,9 +836,9 @@
<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>
</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>
@ -853,9 +853,9 @@
<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>
</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>
@ -870,9 +870,9 @@
<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>
</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>
@ -887,9 +887,9 @@
<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>
</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>
@ -904,9 +904,9 @@
<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>
</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>
@ -921,9 +921,9 @@
<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>
</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>
@ -938,9 +938,9 @@
<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>
</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>
@ -955,9 +955,9 @@
<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>
</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>
@ -972,9 +972,9 @@
<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>
</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>
@ -990,8 +990,8 @@
<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>
<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>
@ -1002,9 +1002,9 @@
<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>
</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>
@ -1015,9 +1015,9 @@
<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>
</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>
@ -1028,8 +1028,8 @@
<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>
</div>
<div class="well page" id="button">
<h1 class="header">Button</h1>
<div class="sample1">
@ -1058,7 +1058,7 @@
<button class="btn btn-primary btn-flat"><i class="mdi-navigation-check"></i> Ok</button>
<button class="btn btn-default btn-flat"><i class="mdi-navigation-close"></i> Cancel</button>
</div>
<style>
#button h2 {

315
less/_mixins.less
View File

@ -1,6 +1,6 @@
// usage: .variations(~" .check", color, transparent);
.variations(@extra, @property, @default) {
// Bootstrap shades
&@{extra}, &-default@{extra} {
@{property}: @default;
@ -19,55 +19,55 @@
}
&-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}";
}
.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");
/*
}
}
.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;
@ -123,89 +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
@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);
.set-background-and-font-color(@default);
}
&-primary@{extra} {
.set-background-and-font-color(@primary);
.set-background-and-font-color(@primary);
}
&-success@{extra} {
.set-background-and-font-color(@success);
.set-background-and-font-color(@success);
}
&-info@{extra} {
.set-background-and-font-color(@info);
.set-background-and-font-color(@info);
}
&-warning@{extra} {
.set-background-and-font-color(@warning);
.set-background-and-font-color(@warning);
}
&-danger@{extra} {
.set-background-and-font-color(@danger);
.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");
// 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";

397
less/_navbar.less
View File

@ -1,229 +1,226 @@
.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: transparent;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: inherit;
background-color: transparent;
}
}
}
// 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);
.background-variations(~"", @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;
}
}
}

2
less/_tabs.less
View File

@ -1,5 +1,5 @@
.nav-tabs {
background: @navbar-default-bg;
background: @primary;
> li {
> a {
color: #FFFFFF;

20
less/_variables.less
View File

@ -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;