src/styles.css - onap/appc/cdt - Gitiles

 /*
 ============LICENSE_START==========================================
 ===================================================================
 Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
 ===================================================================

 Unless otherwise specified, all software contained herein is licensed
 under the Apache License, Version 2.0 (the License);
 you may not use this software except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.

 ECOMP is a trademark and service mark of AT&T Intellectual Property.
 ============LICENSE_END============================================ */

 input[type=text],
 input[type=password],
 input[type=email],
 input[type=url],
 input[type=time],
 input[type=date],
 input[type=datetime-local],
 input[type=tel],
 input[type=number],
 input[type=search-md],
 input[type=search],
 textarea.md-textarea {
     font-family: 'Roboto';
     background-color: transparent;
     border: 1px solid;
     border-bottom: 1px solid;
     border-color: grey;
     border-radius: 5px;
     outline: none;
     height: 37px;
     width: 100%;
     font-size: 1rem;
     box-shadow: none;
     box-sizing: inherit;
     padding: 8px;
 }

 select.form-control {
     border-radius: 5px;
     border: 1px solid;
     padding-left: 10px;
     border-color: grey;
     font-family: 'Roboto';
 }

 input[type=text]:disabled {
     background: #e0dada;
     font-family: 'Roboto';
 }

 body {
     background: white;
     font-family: 'Roboto';
 }

 body {
     margin: 0;
 }

 /* Disable ugly boxes around images in IE10 */

 a img {
     border: 0px;
 }

 ::-moz-selection {
     background-color: #6ab344;
     color: #fff;
 }

 ::selection {
     background-color: #6ab344;
     color: #fff;
 }

 .android-search-box .mdl-textfield__input {
     color: rgba(0, 0, 0, 0.87);
 }

 .android-header .mdl-menu__container {
     z-index: 50;
     margin: 0 !important;
 }

 .mdl-textfield--expandable {
     width: auto;
 }

 .android-fab {
     position: absolute;
     right: 20%;
     bottom: -26px;
     z-index: 3;
     background: #64ffda !important;
     color: black !important;
 }

 .android-mobile-title {
     display: none !important;
 }

 .android-logo-image {
     height: 28px;
     width: 140px;
 }

 .warningMarker {
     position: absolute;
     background: orange;
     color: red;
     z-index: 20
 }

 .col-lg-12-ln {
     margin-left: 41px;
     margin-top: 2px;
     position: centre;
 }

 .col-lg-12-ln1 {
     margin-left: 30px;
     margin-top: 2px;
     position: centre;
 }

 .col-lg-12-ln2 {
     margin-left: 370px;
     margin-top: 15px;
     position: centre;
 }

 .keyedMarker {
     position: absolute;
     background: green;
     z-index: 20
 }

 .noKeyedMarker {
     position: absolute;
     background: orange;
     z-index: 20
 }

 .defaultMarker {
     position: absolute;
     background: lightgreen;
     z-index: 20;
 }

 .android-header {
     overflow: visible;
     background-color: white;
 }

 .android-header .material-icons {
     color: #767777 !important;
 }

 .android-header .mdl-layout__drawer-button {
     background: transparent;
     color: #767777;
 }

 .android-header .mdl-navigation__link {
     color: #757575;
     font-weight: 700;
     font-size: 14px;
 }

 .android-navigation-container {
     /* Simple hack to make the overflow happen to the left instead... */
     direction: rtl;
     -webkit-order: 1;
     -ms-flex-order: 1;
     order: 1;
     width: 500px;
     transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .android-navigation {
     /* ... and now make sure the content is actually LTR */
     direction: ltr;
     -webkit-justify-content: flex-end;
     -ms-flex-pack: end;
     justify-content: flex-end;
     width: 800px;
 }

 .android-search-box.is-focused + .android-navigation-container {
     opacity: 0;
     width: 100px;
 }

 .android-navigation .mdl-navigation__link {
     display: inline-block;
     height: 60px;
     line-height: 68px;
     background-color: transparent !important;
     border-bottom: 4px solid transparent;
 }

 .android-navigation .mdl-navigation__link:hover {
     border-bottom: 4px solid #6ab344;
 }

 .android-search-box {
     -webkit-order: 2;
     -ms-flex-order: 2;
     order: 2;
     margin-left: 16px;
     margin-right: 16px;
 }

 .android-more-button {
     -webkit-order: 3;
     -ms-flex-order: 3;
     order: 3;
 }

 .android-drawer {
     border-right: none;
 }

 .android-drawer-separator {
     height: 1px;
     background-color: #dcdcdc;
     margin: 8px 0;
 }

 .android-drawer .mdl-navigation__link.mdl-navigation__link {
     font-size: 14px;
     color: #757575;
 }

 .android-drawer span.mdl-navigation__link.mdl-navigation__link {
     color: #6ab344;
 }

 .android-drawer .mdl-layout-title {
     position: relative;
     background: #6ab344;
     height: 160px;
 }

 .android-drawer .android-logo-image {
     position: absolute;
     bottom: 16px;
 }

 .logo-font {
     font-family: 'Roboto';
     line-height: 1;
     color: #767777;
     font-weight: 500;
 }

 .android-slogan {
     font-size: 60px;
     padding-top: 160px;
 }

 .android-sub-slogan {
     font-size: 21px;
     padding-top: 24px;
 }

 .android-create-character {
     font-size: 21px;
     padding-top: 400px;
 }

 .android-create-character a {
     text-decoration: none;
     color: #767777;
     font-weight: 300;
 }

 .android-screen-section {
     position: relative;
     padding-top: 60px;
     padding-bottom: 80px;
 }

 .android-screens {
     text-align: right;
     width: 100%;
     white-space: nowrap;
     overflow-x: auto;
 }

 .android-screen {
     text-align: center;
 }

 .android-screen .android-link {
     margin-top: 16px;
     display: block;
     z-index: 2;
 }

 .android-image-link {
     text-decoration: none;
 }

 .android-wear {
     display: inline-block;
     width: 160px;
     margin-right: 32px;
 }

 .android-wear .android-screen-image {
     width: 40%;
     z-index: 1;
 }

 .android-phone {
     display: inline-block;
     width: 64px;
     margin-right: 48px;
 }

 .android-phone .android-screen-image {
     width: 100%;
     z-index: 1;
 }

 .android-tablet {
     display: inline-block;
     width: 110px;
     margin-right: 64px;
 }

 .android-tablet .android-screen-image {
     width: 100%;
     z-index: 1;
 }

 .android-tablet .android-link {
     display: block;
     z-index: 2;
 }

 .android-tv {
     display: inline-block;
     width: 300px;
     margin-right: 80px;
 }

 .android-tv .android-screen-image {
     width: 100%;
     z-index: 1;
 }

 .android-auto {
     display: inline-block;
     width: 300px;
     overflow: hidden;
 }

 .android-auto .android-screen-image {
     display: block;
     height: 300px;
     z-index: 1;
 }

 .android-wear-band-text p {
     padding-top: 8px;
 }

 .android-link {
     text-decoration: none;
     color: #6ab344 !important;
 }

 .android-link:hover {
     color: #6ab344 !important;
 }

 .android-link .material-icons {
     position: relative;
     top: -1px;
     vertical-align: middle;
 }

 .android-alt-link {
     text-decoration: none;
     color: #64ffda !important;
     font-size: 16px;
 }

 .android-alt-link:hover {
     color: #00bfa5 !important;
 }

 .android-alt-link .material-icons {
     position: relative;
     top: 6px;
 }

 .android-customized-section {
     text-align: center;
 }

 .android-customized-section-text {
     max-width: 500px;
     margin-left: auto;
     margin-right: auto;
     padding: 80px 16px 0 16px;
 }

 .android-customized-section-text p {
     padding-top: 16px;
 }

 .android-more-section {
     padding: 80px 0;
     max-width: 1044px;
     margin-left: auto;
     margin-right: auto;
 }

 .android-more-section .android-section-title {
     margin-left: 12px;
     padding-bottom: 24px;
 }

 .android-card-container {
 }

 .android-card-container .mdl-card__media {
     overflow: hidden;
     background: transparent;
 }

 .android-card-container .mdl-card__media img {
     width: 100%;
 }

 .android-card-container .mdl-card__title {
     background: transparent;
     height: auto;
 }

 .android-card-container .mdl-card__title-text {
     color: black;
     height: auto;
 }

 .android-card-container .mdl-card__supporting-text {
     height: auto;
     color: black;
     padding-bottom: 56px;
 }

 .android-card-container .mdl-card__actions {
     position: absolute;
     bottom: 0;
 }

 .android-card-container .mdl-card__actions a {
     border-top: none;
     font-size: 16px;
 }

 .android-footer {
     background-color: #fafafa;
     position: relative;
 }

 .android-footer a:hover {
     color: #8bc34a;
 }

 .android-footer .mdl-mega-footer--top-section::after {
     border-bottom: none;
 }

 .android-footer .mdl-mega-footer--middle-section::after {
     border-bottom: none;
 }

 .android-footer .mdl-mega-footer--bottom-section {
     position: relative;
 }

 .android-footer .mdl-mega-footer--bottom-section a {
     margin-right: 2em;
 }

 .android-footer .mdl-mega-footer--right-section a .material-icons {
     position: relative;
     top: 6px;
 }

 .android-link-menu:hover {
     cursor: pointer;
 }

 /**** Mobile layout ****/

 @media (max-width: 900px) {
     .android-navigation-container {
         display: none;
     }

     .android-title {
         display: none !important;
     }

     .android-mobile-title {
         display: block !important;
         position: absolute;
         left: calc(50% - 70px);
         top: 12px;
         transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     }

     /* WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10 break
      consecutive "+" operators in some cases. Therefore, we need to use both
      here to cover all the bases. */
     .android.android-search-box.is-focused ~ .android-mobile-title,
     .android-search-box.is-focused + .android-navigation-container + .android-mobile-title {
         opacity: 0;
     }

     .android-more-button {
         display: none;
     }

     .android-search-box.is-focused {
         width: calc(100% - 48px);
     }

     .android-search-box .mdl-textfield__expandable-holder {
         width: 100%;
     }

     .android-be-together-section {
         height: 350px;
     }

     .android-slogan {
         font-size: 26px;
         margin: 0 16px;
         padding-top: 24px;
     }

     .android-sub-slogan {
         font-size: 16px;
         margin: 0 16px;
         padding-top: 8px;
     }

     .android-create-character {
         padding-top: 200px;
         font-size: 16px;
     }

     .android-create-character img {
         height: 12px;
     }

     .android-fab {
         display: none;
     }

     .android-wear-band-text {
         margin-left: 0;
         padding: 16px;
     }

     .android-footer .mdl-mega-footer--bottom-section {
         display: none;
     }
 }

 input[type=text]:readonly {
     background: #e0dada;
 }
	/*
	============LICENSE_START==========================================
	===================================================================
	Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
	===================================================================

	Unless otherwise specified, all software contained herein is licensed
	under the Apache License, Version 2.0 (the License);
	you may not use this software except in compliance with the License.
	You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

	Unless required by applicable law or agreed to in writing, software
	distributed under the License is distributed on an "AS IS" BASIS,
	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	See the License for the specific language governing permissions and
	limitations under the License.

	ECOMP is a trademark and service mark of AT&T Intellectual Property.
	============LICENSE_END============================================ */

	input[type=text],
	input[type=password],
	input[type=email],
	input[type=url],
	input[type=time],
	input[type=date],
	input[type=datetime-local],
	input[type=tel],
	input[type=number],
	input[type=search-md],
	input[type=search],
	textarea.md-textarea {
	font-family: 'Roboto';
	background-color: transparent;
	border: 1px solid;
	border-bottom: 1px solid;
	border-color: grey;
	border-radius: 5px;
	outline: none;
	height: 37px;
	width: 100%;
	font-size: 1rem;
	box-shadow: none;
	box-sizing: inherit;
	padding: 8px;
	}

	select.form-control {
	border-radius: 5px;
	border: 1px solid;
	padding-left: 10px;
	border-color: grey;
	font-family: 'Roboto';
	}

	input[type=text]:disabled {
	background: #e0dada;
	font-family: 'Roboto';
	}

	body {
	background: white;
	font-family: 'Roboto';
	}

	body {
	margin: 0;
	}

	/* Disable ugly boxes around images in IE10 */

	a img {
	border: 0px;
	}

	::-moz-selection {
	background-color: #6ab344;
	color: #fff;
	}

	::selection {
	background-color: #6ab344;
	color: #fff;
	}

	.android-search-box .mdl-textfield__input {
	color: rgba(0, 0, 0, 0.87);
	}

	.android-header .mdl-menu__container {
	z-index: 50;
	margin: 0 !important;
	}

	.mdl-textfield--expandable {
	width: auto;
	}

	.android-fab {
	position: absolute;
	right: 20%;
	bottom: -26px;
	z-index: 3;
	background: #64ffda !important;
	color: black !important;
	}

	.android-mobile-title {
	display: none !important;
	}

	.android-logo-image {
	height: 28px;
	width: 140px;
	}

	.warningMarker {
	position: absolute;
	background: orange;
	color: red;
	z-index: 20
	}

	.col-lg-12-ln {
	margin-left: 41px;
	margin-top: 2px;
	position: centre;
	}

	.col-lg-12-ln1 {
	margin-left: 30px;
	margin-top: 2px;
	position: centre;
	}

	.col-lg-12-ln2 {
	margin-left: 370px;
	margin-top: 15px;
	position: centre;
	}

	.keyedMarker {
	position: absolute;
	background: green;
	z-index: 20
	}

	.noKeyedMarker {
	position: absolute;
	background: orange;
	z-index: 20
	}

	.defaultMarker {
	position: absolute;
	background: lightgreen;
	z-index: 20;
	}

	.android-header {
	overflow: visible;
	background-color: white;
	}

	.android-header .material-icons {
	color: #767777 !important;
	}

	.android-header .mdl-layout__drawer-button {
	background: transparent;
	color: #767777;
	}

	.android-header .mdl-navigation__link {
	color: #757575;
	font-weight: 700;
	font-size: 14px;
	}

	.android-navigation-container {
	/* Simple hack to make the overflow happen to the left instead... */
	direction: rtl;
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
	width: 500px;
	transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.android-navigation {
	/* ... and now make sure the content is actually LTR */
	direction: ltr;
	-webkit-justify-content: flex-end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	width: 800px;
	}

	.android-search-box.is-focused + .android-navigation-container {
	opacity: 0;
	width: 100px;
	}

	.android-navigation .mdl-navigation__link {
	display: inline-block;
	height: 60px;
	line-height: 68px;
	background-color: transparent !important;
	border-bottom: 4px solid transparent;
	}

	.android-navigation .mdl-navigation__link:hover {
	border-bottom: 4px solid #6ab344;
	}

	.android-search-box {
	-webkit-order: 2;
	-ms-flex-order: 2;
	order: 2;
	margin-left: 16px;
	margin-right: 16px;
	}

	.android-more-button {
	-webkit-order: 3;
	-ms-flex-order: 3;
	order: 3;
	}

	.android-drawer {
	border-right: none;
	}

	.android-drawer-separator {
	height: 1px;
	background-color: #dcdcdc;
	margin: 8px 0;
	}

	.android-drawer .mdl-navigation__link.mdl-navigation__link {
	font-size: 14px;
	color: #757575;
	}

	.android-drawer span.mdl-navigation__link.mdl-navigation__link {
	color: #6ab344;
	}

	.android-drawer .mdl-layout-title {
	position: relative;
	background: #6ab344;
	height: 160px;
	}

	.android-drawer .android-logo-image {
	position: absolute;
	bottom: 16px;
	}

	.logo-font {
	font-family: 'Roboto';
	line-height: 1;
	color: #767777;
	font-weight: 500;
	}

	.android-slogan {
	font-size: 60px;
	padding-top: 160px;
	}

	.android-sub-slogan {
	font-size: 21px;
	padding-top: 24px;
	}

	.android-create-character {
	font-size: 21px;
	padding-top: 400px;
	}

	.android-create-character a {
	text-decoration: none;
	color: #767777;
	font-weight: 300;
	}

	.android-screen-section {
	position: relative;
	padding-top: 60px;
	padding-bottom: 80px;
	}

	.android-screens {
	text-align: right;
	width: 100%;
	white-space: nowrap;
	overflow-x: auto;
	}

	.android-screen {
	text-align: center;
	}

	.android-screen .android-link {
	margin-top: 16px;
	display: block;
	z-index: 2;
	}

	.android-image-link {
	text-decoration: none;
	}

	.android-wear {
	display: inline-block;
	width: 160px;
	margin-right: 32px;
	}

	.android-wear .android-screen-image {
	width: 40%;
	z-index: 1;
	}

	.android-phone {
	display: inline-block;
	width: 64px;
	margin-right: 48px;
	}

	.android-phone .android-screen-image {
	width: 100%;
	z-index: 1;
	}

	.android-tablet {
	display: inline-block;
	width: 110px;
	margin-right: 64px;
	}

	.android-tablet .android-screen-image {
	width: 100%;
	z-index: 1;
	}

	.android-tablet .android-link {
	display: block;
	z-index: 2;
	}

	.android-tv {
	display: inline-block;
	width: 300px;
	margin-right: 80px;
	}

	.android-tv .android-screen-image {
	width: 100%;
	z-index: 1;
	}

	.android-auto {
	display: inline-block;
	width: 300px;
	overflow: hidden;
	}

	.android-auto .android-screen-image {
	display: block;
	height: 300px;
	z-index: 1;
	}

	.android-wear-band-text p {
	padding-top: 8px;
	}

	.android-link {
	text-decoration: none;
	color: #6ab344 !important;
	}

	.android-link:hover {
	color: #6ab344 !important;
	}

	.android-link .material-icons {
	position: relative;
	top: -1px;
	vertical-align: middle;
	}

	.android-alt-link {
	text-decoration: none;
	color: #64ffda !important;
	font-size: 16px;
	}

	.android-alt-link:hover {
	color: #00bfa5 !important;
	}

	.android-alt-link .material-icons {
	position: relative;
	top: 6px;
	}

	.android-customized-section {
	text-align: center;
	}

	.android-customized-section-text {
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
	padding: 80px 16px 0 16px;
	}

	.android-customized-section-text p {
	padding-top: 16px;
	}

	.android-more-section {
	padding: 80px 0;
	max-width: 1044px;
	margin-left: auto;
	margin-right: auto;
	}

	.android-more-section .android-section-title {
	margin-left: 12px;
	padding-bottom: 24px;
	}

	.android-card-container {
	}

	.android-card-container .mdl-card__media {
	overflow: hidden;
	background: transparent;
	}

	.android-card-container .mdl-card__media img {
	width: 100%;
	}

	.android-card-container .mdl-card__title {
	background: transparent;
	height: auto;
	}

	.android-card-container .mdl-card__title-text {
	color: black;
	height: auto;
	}

	.android-card-container .mdl-card__supporting-text {
	height: auto;
	color: black;
	padding-bottom: 56px;
	}

	.android-card-container .mdl-card__actions {
	position: absolute;
	bottom: 0;
	}

	.android-card-container .mdl-card__actions a {
	border-top: none;
	font-size: 16px;
	}

	.android-footer {
	background-color: #fafafa;
	position: relative;
	}

	.android-footer a:hover {
	color: #8bc34a;
	}

	.android-footer .mdl-mega-footer--top-section::after {
	border-bottom: none;
	}

	.android-footer .mdl-mega-footer--middle-section::after {
	border-bottom: none;
	}

	.android-footer .mdl-mega-footer--bottom-section {
	position: relative;
	}

	.android-footer .mdl-mega-footer--bottom-section a {
	margin-right: 2em;
	}

	.android-footer .mdl-mega-footer--right-section a .material-icons {
	position: relative;
	top: 6px;
	}

	.android-link-menu:hover {
	cursor: pointer;
	}

	/** Mobile layout **/

	@media (max-width: 900px) {
	.android-navigation-container {
	display: none;
	}

	.android-title {
	display: none !important;
	}

	.android-mobile-title {
	display: block !important;
	position: absolute;
	left: calc(50% - 70px);
	top: 12px;
	transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10 break
	consecutive "+" operators in some cases. Therefore, we need to use both
	here to cover all the bases. */
	.android.android-search-box.is-focused ~ .android-mobile-title,
	.android-search-box.is-focused + .android-navigation-container + .android-mobile-title {
	opacity: 0;
	}

	.android-more-button {
	display: none;
	}

	.android-search-box.is-focused {
	width: calc(100% - 48px);
	}

	.android-search-box .mdl-textfield__expandable-holder {
	width: 100%;
	}

	.android-be-together-section {
	height: 350px;
	}

	.android-slogan {
	font-size: 26px;
	margin: 0 16px;
	padding-top: 24px;
	}

	.android-sub-slogan {
	font-size: 16px;
	margin: 0 16px;
	padding-top: 8px;
	}

	.android-create-character {
	padding-top: 200px;
	font-size: 16px;
	}

	.android-create-character img {
	height: 12px;
	}

	.android-fab {
	display: none;
	}

	.android-wear-band-text {
	margin-left: 0;
	padding: 16px;
	}

	.android-footer .mdl-mega-footer--bottom-section {
	display: none;
	}
	}

	input[type=text]:readonly {
	background: #e0dada;
	}