some improvement on navbars

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

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

29220
dist/css/material.css vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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 */

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"]}

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 */

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"]}

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 {

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

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

View File

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

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;