
gwt.material.design.public.css.overridecss.css Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of gwt-material Show documentation
Show all versions of gwt-material Show documentation
A Material Design look and feel for GWT Applications
* html,body {
margin: 0 !important;
padding: 0 !important;
height: 100%;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: fixed;
line-height: 1.5;
font-family: "Roboto", sans-serif;
font-weight: normal;
color: rgba(0, 0, 0, 0.87);
}
/**Switch**/
.switch label input[type=checkbox]:checked + .lever.disabled {
background-color: #D4D4D4;
}
/** Button **/
button.btn-flat:focus {
outline: none;
background-color: inherit;
}
button.disabled, i.disabled {
background-color: #DFDFDF !important;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
color: #9F9F9F !important;
cursor: default;
}
button.disabled:hover, i.disabled:hover {
box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
}
.disabled:hover {
box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
}
/** FAB **/
.fixed-action-btn.active ul {
visibility: visible;
}
.fixed-action-btn ul {
left: 0;
right: 0;
text-align: center;
position: absolute;
bottom: 64px;
margin: 0;
visibility: hidden;
}
.fixed-action-btn.horizontal ul li {
display: inline-block;
margin: 15px 15px 0 0;
}
.fixed-action-btn.horizontal ul {
text-align: right;
right: 54px;
transform: translateY(106%);
height: 100%;
left: initial;
width: 500px;
}
ul li button.btn-floating {
opacity: 0;
}
/** Errors **/
.field-error, .field-error-picker input {
border-bottom: 1px solid #F44336 !important;
box-shadow: 0 1px 0 0 #F44336 !important;
}
.field-error-label, .field-success-label {
color: #F44336 !important;
font-size: 12px;
opacity: 1 !important;
}
.field-success-label {
color: #4CAF50 !important;
}
.field-success, .field-success-picker input {
border-bottom: 1px solid #4CAF50 !important;
box-shadow: 0 1px 0 0 #4CAF50 !important;
}
/** Date Picker landscape **/
.landscape .picker__date-display {
width: 298px !important;
display: inline-block !important;
height: 350px !important;
}
.landscape .picker__frame {
max-width: 600px !important;
}
.landscape .picker__calendar-container {
width: 300px !important;
display: inline-block !important;
vertical-align: top !important;
}
.landscape .picker__footer {
position: absolute !important;
right: 0 !important;
bottom: 0 !important;
}
/** Chips **/
.chip {
display: inline-block;
height: 32px;
font-size: 13px;
font-weight: 500;
color: rgba(0, 0, 0, 0.6);
line-height: 32px;
padding: 0 12px;
border-radius: 16px;
background-color: #E4E4E4;
}
.chip img {
float: left;
margin: 0 8px 0 -12px;
height: 32px;
width: 32px;
border-radius: 50%;
}
.chip i.material-icons {
cursor: pointer;
float: right;
font-size: 16px;
line-height: 32px;
padding-left: 8px;
}
.chip.disabled img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
.letter{
float: left;
margin: 0 8px 0 -12px;
height: 32px;
width: 32px;
border-radius: 50%;
font-size: 1.2em;
text-align: center;
}
/** Calendar **/
.picker__table td {
padding: 0 !important;
}
/** DataGrid **/
.striped table tbody tr:nth-child(odd) {
background-color: #f2f2f2 !important;
}
.bordered table tr {
border-bottom: 1px solid #d0d0d0 !important;
}
table .gwt-CheckBox label {
margin-bottom: -10px;
}
.hoverable table > tbody > tr:hover {
background: #f2f2f2 !important;
transition: 1s all;
-webkit-transition: 1s all;
-moz-transition: 1s all;
}
/**RESPONSIVE QUERIES **/
@media only screen and (max-width: 992px) {
.responsive-table table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
display: block;
position: relative;
}
.responsive-table table th {
display: block;
}
.responsive-table table tbody tr {
display: inline-block;
vertical-align: top;
}
.responsive-table table tbody {
display: block;
width: auto;
position: relative;
overflow-x: auto;
white-space: nowrap;
}
.responsive-table table tbody tr {
display: inline-block;
vertical-align: top;
}
.responsive-table table td {
display: block;
min-height: 1.25em;
text-align: left;
}
.responsive-table > div:nth-child(1) {
width: 20% !important;
}
.responsive-table > div:nth-child(3) {
top: 0 !important;
left: 20% !important;
width: 80% !important;
height: 100% !important;
}
.responsive-table table thead {
border: 0;
border-right: 1px solid #d0d0d0;
}
.responsive-table table thead tr {
display: block;
padding: 0 10px 0 0;
}
.responsive-table table thead {
display: block;
float: left;
}
.loginPanel {
width: 90% !important;
}
header,main,footer {
padding-left: 0;
}
.mobileNav {
overflow: auto !important;
}
}
/**SIDEBAR **/
.side-nav li > div {
width: 100%;
margin-left: 0 !important;
}
.side-nav .brand-logo {
font-size: 2.1rem;
border-bottom: 1px solid #e9e9e9;
}
.side-nav a {
width: 100%;
}
.side-nav li {
padding: 0 !important;
}
nav button i {
line-height: inherit !important;
}
/** NavBar tall **/
nav .navbar-tall {
height: 128px;
}
nav .nav-wrapper .side-nav i {
display: inline !important;
vertical-align: middle;
}
/** NavBar Shrink **/
nav.navbar-shrink{
height: 200px;
line-height: 64px;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #0683c9;
}
nav .brand-logo img{
height: 100%;
padding: 12px;
}
nav.navbar-shrink, nav.navbar-shrink .brand-logo{
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
nav.navbar-shrink .brand-logo{
line-height: 264px;
font-size: 4rem;
height: 200px;
}
nav.smaller {
height: 64px;
}
nav.smaller .brand-logo img{
width: auto;
}
nav.smaller .brand-logo{
line-height: 64px;
height: 64px;
font-size: 2.1rem;
}
/** NavBar fixed **/
nav.pinned{
z-index: 996;
}
nav.navbar-fixed{
top: 0;
position: fixed !important;
}
.side-nav i {
font-size: 2em !important;
width: 2rem;
line-height: inherit;
}
.side-nav .collapsible-header, .side-nav .collapsible-body {
padding: 0 !important;
margin: 0 !important;
}
nav .nav-wrapper .collapsible-body {
padding: 0 !important;
}
.collapsible-body {
margin: 0;
padding: 2rem;
}
.collection-item.waves-effect {
display: block;
padding-bottom: 0;
}
.collection .collection-item .secondary-content i {
margin-top: -28px;
}
ul.collection .collection-item .gwt-Label, ul.collection .collection-item a:first-child{
display: block;
}
@media only screen and (max-width : 992px) {
header,main,footer {
padding-left: 0 !important;
padding-right: 0 !important;
}
.side-nav.clip {
top: 50px;
}
.side-nav.mini {
top: 55px;
}
.side-nav.float {
background: white;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.side-nav.card {
height: 100% !important;
margin: initial;
padding-bottom: 60px;
}
nav.navbar-shrink{
height: 64px;
}
nav.navbar-shrink .brand-logo img{
width: auto;
}
nav.navbar-shrink .brand-logo{
line-height: 64px;
height: 64px;
font-size: 2.1rem;
}
}
@media only screen and (max-width : 992px) {
main {
padding-bottom: 70px !important;
}
nav.navbar-fixed{
width: 100%;
}
}
.sideBarBadge {
height: 20px !important;
line-height: 0 !important;
padding: 10px !important;
color: #fff !important;
border-radius: 3px !important;
font-size: 0.7em !important;
}
a span {
vertical-align: middle;
}
ul.side-nav .sideBarBadge {
margin-top: 20px !important;
}
nav ul a span.badge {
margin-left: 8px !important;
float: right;
margin-top: 20px;
}
/** DROPDOWN **/
.dropdown-content {
max-height: 70vh !important;
}
.dropdown-content li > div {
font-size: 1.2rem;
display: block;
padding: 1rem 1rem;
}
.dropdown-content li > a, .dropdown-content li > span {
width: 100%;
}
ul.dropdown-content a.disabled{
color: #e9e9e9 !important;
}
ul.dropdown-content a.disabled:hover{
background: #fff !important;
}
div {
-webkit-font-smoothing: antialiased;
}
.oldCheckBox input {
position: initial !important;
opacity: 0 !important;
}
.collection>li>div>div:first-child {
float: left;
}
[type="checkbox"]:not (:checked ),[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
.badge>div:first-child {
display: inline;
}
a,a:visited {
}
.progress {
background-color: #EBEEF1;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color: #fff;
transition: 1s all;
-webkit-transition: 1s all;
-moz-transition: 1s all;
}
.progress div {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: 1s all;
-webkit-transition: 1s all;
-moz-transition: 1s all;
}
.fullBackground {
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
background-size: contain;
background-position: top right;
background-repeat: no-repeat;
}
.oldCheckBox input{
position: initial !important;
opacity: 0 !important;
}
.floatingButtonsItem ul li div {
transform: scale(0.4) translateY(40px);
-moz-transform: scale(0.4) translateY(40px);
-webkit-transform: scale(0.4) translateY(40px);
opacity: 0;
transition: 400ms all;
-webkit-transition: 400ms all;
-moz-transition: 400ms all;
margin-bottom: -10px;
}
.floatingButtonsItem:hover ul li div {
transform: scale(1) translateY(0px);
-moz-transform: scale(1) translateY(0px);
-webkit-transform: scale(1) translateY(0px);
opacity: 1;
}
* {
outline: 0;
}
html,body {
width: 100%;
height: 100%;
}
a:hover,a:visited {
color: none !important;
text-decoration: none !important;
}
.showPanel {
-webkit-transform: scale(1) !important;
-ms-transform: scale(1) !important;
transform: scale(1) !important;
}
/**
*** Material Animations
**/
.materialScaleInitial,.pullInitial {
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
}
.materialScaleInitial {
transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform-origin: 50% 10%;
-webkit-transform-origin: 50% 10%;
-moz-transform-origin: 50% 10%;
}
.materialScale {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
}
.pullInitial {
margin-top: 500px !important;
}
.pull {
margin-top: -150px !important;
}
/** Animations */
.materialScaleInitial, .pullInitial{
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
}
.materialScaleInitial {
transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform-origin: 50% 10%;
-webkit-transform-origin: 50% 10%;
-moz-transform-origin: 50% 10%;
}
.materialScale {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
}
.pullInitial {
margin-top: 500px !important;
}
.pull {
margin-top: -150px !important;
}
i[class*="waves-"].material-icons {
vertical-align: top;
width: initial;
height: auto;
text-align: center;
padding: 4px;
}
/** Loader */
.loader-wrapper {
width: 100%;
background: rgba(255, 255, 255, 0.701961);
text-align: center;
height: 100%;
position: fixed;
z-index: 999;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.progress-wrapper{
top: 0;
position: fixed;
z-index: 999;
width: 100%;
}
.side-nav .badge{
float: right;
}
/** Splashscreen */
.splash-screen{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
z-index: 999;
}
.splash-screen .progress{
margin: 0;
position: absolute;
z-index: 9999;
left: 0;
bottom: 0;
height: 8px;
}
/** Tabs **/
.tabs{
overflow: hidden !important;
}
.tab a i{
margin-top: 12px;
padding-left: 36%;
}
.tab a span:nth-child(2) {
float: left;
}
ul.tabs .tab.disabled{
opacity: 0.5;
}
/** Collapsibles **/
.collapsible-header > i {
font-size: 1.4rem !important;
line-height: 2.5rem !important;
width: 3rem !important;
margin: 0 !important;
}
/** Cards **/
.card .card-action a{
display: inline-block;
}
.material-label{
display: block;
}
.tabs .tab a i, .tabs .tab a span{
float: none !important;
display: inline-block;
vertical-align: top;
}
.tab a i{
padding-left: 0;
}
@media only screen and (max-width: 992px) {
.tabs.tab-icon a span{
display: none !important;
}
.tab a i{
margin: auto;
margin-top: 12px;
}
}
/** Footer **/
footer.fixed{
position: fixed;
width: 100%;
bottom: 0;
padding-top: 0 !important;
}
/** SideNav Card **/
.side-nav.card, .side-nav.float{
position: absolute;
}
.side-nav.card {
margin: 20px;
height: auto;
width: 232px;
padding-bottom: 0;
margin-top: 80px;
}
/** SideNav Float **/
.side-nav.float {
background-color: transparent;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
margin-top: 64px;
}
/** Sidenav Mini **/
.side-nav.mini {
top: 65px;
text-align: center;
}
.side-nav.mini li div {
padding-bottom: 10px;
padding-top: 10px;
}
/** Sidenav Close **/
.side-nav.close{
top: 0 !important;
}
.navmenu-permanent, .drag-target, #sidenav-overlay{
visibility: hidden !important;
}
@media screen and (max-width: 992px) {
.side-nav.fixed, .side-nav.card {
margin: 0;
top: 0 !important;
left: 0;
height: 100%;
background: #fff;
}
.navmenu-permanent, .drag-target,#sidenav-overlay{
visibility: visible !important;
}
.nav-wrapper{
padding: 0;
}
header, footer, main{
margin-left: 0 !important;
}
nav.pinned{
width: 100% !important;
}
/** Search Bar Responsive design **/
.input-field input[type=search] {
padding-left: 2rem !important;
width: calc(100% - 10rem) !important;
margin-bottom: 0 !important;
}
.input-field input[type=search] + label {
z-index: 999 !important;
}
.search-result{
max-height: 400px;
overflow: auto;
}
}
/** Search Result **/
.search-result{
margin: 0;
border-top: 1px solid #e9e9e9;
background-color: #fff;
max-height: 500px;
overflow: auto;
z-index: 995;
position: relative;
}
.search-result a{
display: block;
border-bottom: 1px solid #e9e9e9;
padding-left: 20px;
}
.search-result a span{
margin-left: 28px;
}
.search-result a:hover, .search-result a.higlighted{
background-color: #eeeeee;
}
.search-result a img{
width: 52px;
margin-top: 5px;
float: left;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
height: 52px;
}
/** Circle badge **/
.badge.circle {
position: absolute;
min-width: 0 !important;
border-radius: 100% !important;
height: 24px !important;
top: -12px;
width: 24px;
font-size: 0.6rem !important;
text-align: center;
padding: 0 !important;
padding-top: 12px !important;
right: 8px;
}
.input-field input[type=search] {
margin-bottom: 0;
height: calc(4rem + 2px);
}
/** Added support for horizontal cards **/
.horizontal .card-action a{
margin-left: 20px;
margin-right: 0 !important;
}
.horizontal .card-action{
padding: 0;
margin-top: 8px;
}
.horizontal .card-content{
width: 70% !important;
float: left;
}
.horizontal .card-image{
width: 30% !important;
float: left;
}
.horizontal .card-image img, .horizontal.card{
height: 120px;
}
.horizontal .card-image {
padding: 0;
}
/** Fixed the input label position **/
.input-field label{
left: 0;
}
.dropdown-content {
z-index: 995 !important;
}
/** Fixed breadcrumb **/
.breadcrumb:nth-child(2):before {
display: none;
}
.breadcrumb i{
float: none !important;
}
© 2015 - 2025 Weber Informatics LLC | Privacy Policy