From 2c977e2b66ced314a4f51121801f62fe5c3c05e4 Mon Sep 17 00:00:00 2001 From: Skip Wonnell Date: Thu, 1 Mar 2018 08:30:15 -0600 Subject: Initial seed code contribution for CDT Issue-ID: APPC-682 Change-Id: I0331ffce2a430195c29d0d1b2295966f9eb28699 Signed-off-by: Skip Wonnell --- src/styles.css | 591 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 591 insertions(+) create mode 100644 src/styles.css (limited to 'src/styles.css') diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..57ba1f2 --- /dev/null +++ b/src/styles.css @@ -0,0 +1,591 @@ +/* +============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; +} \ No newline at end of file -- cgit 1.2.3-korg