diff options
author | 2018-09-18 10:57:13 +0000 | |
---|---|---|
committer | 2018-09-18 10:57:13 +0000 | |
commit | 795b874b98b320fdf7a58d557c53a584d2ba80c5 (patch) | |
tree | b69fb1af3c239475c751a4e2d2097879d762504f /rulemgt-frontend/src/assets/framework/browser/style/docs.css | |
parent | 153b0f688907ff17929723d0a33c0feb4477913e (diff) | |
parent | 19a11640b3ed8d770fd1cb6f296c4c0e793cdb2a (diff) |
Merge "Changed the Style of GUI"
Diffstat (limited to 'rulemgt-frontend/src/assets/framework/browser/style/docs.css')
-rw-r--r-- | rulemgt-frontend/src/assets/framework/browser/style/docs.css | 1480 |
1 files changed, 1480 insertions, 0 deletions
diff --git a/rulemgt-frontend/src/assets/framework/browser/style/docs.css b/rulemgt-frontend/src/assets/framework/browser/style/docs.css new file mode 100644 index 0000000..d5ff754 --- /dev/null +++ b/rulemgt-frontend/src/assets/framework/browser/style/docs.css @@ -0,0 +1,1480 @@ +/* hide site until we know if they are logged in or not */ +html{opacity:0; visibility:hidden;} +html[data-signed-in="true"]{opacity:1; visibility:visible;} +/* end hide until we know if they are logged in or not */ + +/***** b2bTryme *****/ +.b2b-tryme { + width: 100%; + max-width: 100% !important; +} + +/***** Remove usage section but not parameters section****/ +.usage .prettyprint { + display:none; +} +h2#example { + display: none; +} +h2#usage { + display: none; +} + +#usage ol.linenums { + display:none; +} +/******ngDocs overrides*****/ +.variables-matrix .type-hint { + background: transparent !important; +} +/******Welcome Page*****/ +.portal-switcher { + float: left; + margin-top: 20px; + margin-right: 10px; +} +/* Universal NAV */ +.navbar{height:85px; width:100%; background-color:#222;} +.navbar button{background-color:transparent; border:none !important; margin:5px -10px 0 0 !important; padding:0 !important; min-width:55px !important; display:none !important} +.navbar:before, .navbar:after { display: table; content: ""; line-height: 0; } +.navbar:after { clear: both; } +.navInner{height:85px; overflow:hidden} +.navbar .container{height:85px; transition:none;} +.navbar .container:after { + content: ""; + display: block; + height: 0; + position: relative; + top: 85px; +} +.brand { + color: #ffffff; + display: block; + float: left; + font-family: "Omnes-ATT-W02-Light"; + font-size: 2.3rem; + height: 45px; + line-height: 44px; + margin: 20px 0 0 -5px; + padding: 0 15px 0 5px; + position: absolute; +} +.brand:active{color:#fff;} +.brand sup { + color: #fcb314; + font-family: "Omnes-ATT-W02"; + font-size: 1.4rem; + position: relative; + right: 0; + top: 12px; +} +.brand:hover, +.brand:focus{text-decoration:none;} +.brand:focus{outline:1px dotted white;} +.brand .icon-att-globe { + color: #44c7f5; + float: left; + font-size: 44px; + left: -2px; + margin-right:25px; + position: relative; + top: 0; +} +.brand strong { + font-family: "Omnes-ATT-W02-Medium"; + font-weight: normal; +} +.navbar button { + border: medium none; + border-radius: 0; + color: #fff; + font-family: "Omnes-ATT-W02-Medium"; + font-size: 3rem; + height: 45px; + margin: 0 -10px 0 0; + outline-offset: 0 !important; + padding: 0; + text-align: center; + top: 0; + width: 45px; +} +.navbar button:hover, +.navbar button:focus{ + outline-offset: 0 !important; +} +.navbar button:focus { + outline:1px dotted white !important; +} + +/* UNIVERSAL NAV */ +#nav-menu { + display: block; + float: right; + height: 85px; + width: auto; + position:relative; + padding-bottom:20px; +} +#nav-menu li { + display: block; + float: left; + height: 45px; + margin: 22px 0 0; +} + +.navbar li a { + color:#fff; + display: block; + font-family: "Omnes-ATT-W02"; + font-size: 1.6rem; + height:100%; + line-height:1; + text-align: center; + transition:all .3s linear 0s; +} +.navbar li a:focus{outline:1px dotted white; text-decoration:none;} +.navbar li a:hover{outline:none; text-decoration:none;} + +/* 1012015 */ +.navbar li a:focus, +.navbar li a:hover{ + transition:color .3s linear 0s; + color:#44c8f5; +} +/* END 1012015 */ + +.navbar li a div, +.stickynav li a div{ + color: transparent; + display: block; + font-family: "Omnes-ATT-W02-Medium"; + font-size: inherit; + height: 2px; + margin: 0 10px; + overflow: hidden; + padding: 0; + position: relative; + text-align: center; + top: 6px; + opacity:0; + visibility:hidden; +} + +body:not(#home) .navbar li a div{background-color: transparent;} +body:not(#home) .navbar li a.active div{ + background-color: #fcb314; + opacity:1; + transition:opacity .3s linear .1s; + visibility:visible; +} + +#nav-menu li li a { + display:none; + padding-left:30px; +} +#nav-menu li li li a{ + padding-left:60px; +} + +.top-nav-btn-align { + margin-top: 20px !important; +} + +/* THREE LINES OF THE HAMBURGER */ +.btn-menu{display:none} +.btn-menu .svgIcon-hamburger{ + border:none; + border-top:5px solid #000; + content: ""; + display: table; + height: 0; + left: 10px; + position: relative; + top: 0; + width: 40px; +} +.btn-menu .svgIcon-hamburger{ + margin-bottom:15px; + top:4px; +} + +/* MAIN CONTENT */ +#ddh-fixed-230{ + background-color:#efefef; +} +#ddh-fixed-230 + .fluid-space{ + padding-top:0; +} +#ddh-fixed-230 + .fluid-space > section.content-pad:first-child{ + margin-top:11px; +} +#ddh-fixed-230 + .fluid-space .stickypad{ + height:85px; + position:relative; + z-index:100; +} +/* STICKY NAV */ +.stickynav { + background-color: #ffffff; + border-bottom: 1px solid #ccc; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + position: absolute; + top: 46px; + width: 100%; +} +.stickynav h1 { + line-height: 3.8rem; + margin: 10px 20px 9px 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; +} +.cato-div { + -webkit-flex: 2 1 auto !important; + -ms-flex: 2 1 auto !important; + flex: 2 1 auto !important; + margin: 0; + padding-right: 20px; +} +.heading-page + div, +.cato-div + div { + display: block; + -webkit-flex: 1 1 0; + -ms-flex: 1 1 0; + flex: 1 1 0; + margin:0; +} +.heading-page + div ul, +.cato-div + div ul { + -webkit-align-content: space-around; + -ms-flex-line-pack: distribute; + align-content: space-around; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; + width: 100%; +} +.cato-badge, +.cato-approved { + background-color: #fff; + border: 1px solid #1b7e28; + border-radius: 6px; + color: #1b7e28; + float: left; + font-size: 1.2rem; + line-height: 1; + margin-top: 18px; + padding: 5px 10px; +} +.cato-badge { + background-color: #1b7e28; + color: #fff; + margin-right: 15px; +} +.stickynav ul { + display: block; + float: right; + height: 44px; + position: relative; + right: 15px; + top: 5px; + margin-bottom: 12px; +} +.stickynav li { + display: block; + float: left; + height: 44px; + margin: 1px 0 0; +} +.stickynav li > a { + display: block; + /*font-family: "Omnes-ATT-W02-Light";*/ + font-size: 1.6rem; + line-height: 1; + margin: 4px 0 0; + padding: 11px 15px; + text-align: center; +} +.stickynav li.active > a { + color: #666; + font-family: "Omnes-ATT-W02-Medium"; + /*line-height:1.1;*/ + /*text-decoration: underline;*/ +} +.stickynav li > a { + text-decoration: none !important; +} +.stickynav li a div { + transition: opacity 0.3s linear 0.1s; +} +.stickynav li.active a div { + border-top: 3px solid #0574ac; + margin: 0; + opacity: 1; + padding: 0 10px; + top: 17px; + visibility: visible; + transition: opacity 0.3s linear 0.1s; +} +.stickynav.affix { + box-shadow:0 5px 20px 20px rgba(255,255,255,1); + position: fixed; + top: 0; + z-index: 9999; + margin-top: 0; +} + + +/*section#overview{margin-top:36px;}*/ +.downloads { + display: inline-block; + float: right; + font-size: 1.4rem; + line-height: 0.75; + margin: 0 15px 30px 20px; + position: relative; + text-align: right; + top: -15px; + min-width:180px; +} +.downloads-box{ + background-color:#efefef; + margin-top:10px; + padding:15px 15px 5px 15px; + border-radius:7px; + font-size:1.6rem; +} +.downloads a{line-height:16px;} +.downloads .downloadicon{vertical-align:middle; display:inline-block; fill: #0574ac; height:20px; width:20px; margin-left:5px; margin-top:-2px;} +.downloads li{ + margin-bottom:10px; +} + +h1.primary { + border-bottom: 1px solid transparent; +} +h1.landing { + border-bottom: 1px solid #ccc; + min-height: 58px; + line-height: 58px; + margin-bottom:30px; + margin-top:43px; +} +.hr-spacer{margin-top:60px; margin-bottom:60px;} + +/* ******* FOOTER ******* */ +.ddh-footer:before{ + height:0; +} +.ddh-footer{ + + padding-top: 20px; + background-color:#222; +} +.link-farm + .ddh-footer{margin-top:0;} +.footer-nav, +.footer-legal, +.footer-logo{ + padding-left:40px; +} +.footer-legal > p{ line-height:1.4rem;} +.ddh-footer, +.ddh-footer a{ + color:#fff !important; +} +.ddh-footer a:focus{ + outline:1px dotted white; + text-decoration:none; +} +.footer-logo { + display: table; + font-family:"Omnes-ATT-W02-Light"; + height: 25px; + position: relative; + font-size:1.6rem; + padding:5px 5px 5px 40px; +} +.footer-logo:hover, +.footer-logo:focus{text-decoration:none;} +.footer-logo b{font-family:"Omnes-ATT-W02-Medium"; font-weight:normal;} + +.ddh-footer .icon-att-globe { + display: inline-block; + color: #44c7f5; + font-size:2.5rem; + left: 0; + margin-right: 16px; + position: absolute; + top: 3px; +} +.footer-nav{line-height:1rem; margin-top:10px; } +.footer-nav li{font-size:1.0rem; line-height:1; display:inline; padding-right:12px; padding-left:12px; border-left:1px solid #ccc; } +.footer-nav li:first-child{border-left:none; padding-left:0; } + +.footer-nav a { + display: inline-block; + font-size: 1.2rem; + position: relative; + margin-top:0; + top: 1px; +} +.footer-nav a:hover, +.footer-nav a.active{text-decoration:none;} + +.footer-nav a:hover, +.footer-nav a:focus{ + transition:color .3s linear 0s; + color:#44c8f5 !important; +} +.footer-nav a:after { + background-color: transparent; + bottom: -6px; + content: ""; + display: block; + height: 2px; + position: absolute; + width: 100%; + opacity:0; +} +.footer-nav a.active:after { + opacity:1; + background-color:#fcb314; + transition:opacity .3s linear 0s; +} +/* ************ */ + +.footer-legal { + font-size: 1.1rem; + margin-top: 25px; + padding-bottom:30px; +} +.footer-legal a{ + font-size:1.1rem; + text-decoration:underline; +} +.footer-legal a:hover{ + text-decoration:none; +} + +p.ds2.heading{margin-bottom:30px; line-height:1; color:#666666} + +/* CODE SECTION */ +.codebox { + background-image: linear-gradient(transparent 50%, #fff 50%); + background-size: 40px 40px; + padding: 0 0 0 10px !important; + overflow-x:hidden; + border-radius:5px 0 5px 5px; + background-color:#f5f5f5 !important; + width:100%; + box-sizing:border-box; + min-height:0; + margin-bottom:40px; + max-height:300px; + font-size:1.1rem; + line-height:20px; + font-family:'Courier New'; + cursor:copy !important; + white-space:pre; +} +[data-code-id*="ANGULAR"]{ + margin-bottom:0; +} +.selectalllink { + font-family:"Omnes-ATT-W02-Medium"; + border:1px solid #b7b7b7; + border-bottom:0; + border-radius:5px 5px 0 0; + padding:3px 7px; + float:right; + background-color:#f5f5f5; + font-size:11px; + margin-bottom:-1px; + position:relative; +} +.selectalllink.focus{ + border-color:#0574ac #0574ac transparent; + box-shadow: 2px 3px 2px -2px rgba(5, 116, 172, 0.35) inset; + transition:all 0.3s linear 0s; +} +.selectalllink:after { + background: #f5f5f5; + bottom: -3px; + content: ""; + display: block; + height: 5px; + left: 0; + position: absolute; + width: 100%; +} + +/* EDITORIAL & MARKETING TABLES */ +.ds2-table{width:100%; margin-bottom:40px;} +.ds2-table th{text-align:left; white-space:nowrap;} +.ds2-table thead h2{margin:0 0 15px 0} +.ds2-table:not(.table-bordered) th, +.ds2-table:not(.table-bordered) tbody td{padding:10px 20px 10px 0; vertical-align:top} + +pre{white-space: pre-wrap; font-size:1.2rem;} + +.link-farm{display:table; width:100%; padding-top:60px; } +.svg-home-button{ + background-color:transparent; + border:none; +} +@media (min-width: 768px){ + .landing-page .text-center p{max-width:620px; margin-left:auto; margin-right:auto; } + .nav-links > div{padding:0 10px;} + .nav-links p.ds2.heading{text-align:left; margin:0 0 10px;} + .nav-links p.ds2.heading + ul.no-bullet{margin-bottom:60px;} + .nav-links p.ds2.heading + ul.no-bullet a, ul.no-bullet li > p{font-size:1.4rem} + ul.no-bullet li > p{margin-top:8px;} + .nav-links ul.no-bullet li{line-height:11px;} + .landing-page .request-new-pattern{font-size:2rem; font-family:"Omnes-ATT-W02-Light";} + + .link-farm{text-align:center; background-color:#f2f2f2; margin-top:60px} +} + +@media (max-width:767px){ + + h1.landing { + margin-left: -15px; + margin-right: -15px; + margin-top:0; + padding:17px 15px; + line-height:normal; + } + .link-farm{background-color:#f2f2f2; padding-top:0; } + .landing-page + .link-farm{margin-top:0;} + .link-farm .nav-links.top-space{margin-top:0 !important} + + .landing-page .request-new-pattern{font-size:1.6rem; font-family:"Omnes-ATT-W02-Medium";} + .landing-page .request-new-pattern a{white-space:nowrap} + + /* LINK TYPE 2 */ + .nav-links p.ds2.heading{margin:30px -15px 15px; padding:0 15px;} + .nav-links a::after { + background-repeat:no-repeat; + content: ""; + display: block; + position: absolute; + right: 15px; + top: 14px; + } + .nav-links a { + display: block; + height: 45px; + line-height: 45px; + padding: 0 15px; + position: relative; + } + .nav-links ul{margin:0 -15px 0; } + .nav-links ul.no-bullet li { + border-top: 1px solid #ccc; + margin: 0; + padding: 0; + } + .nav-links ul.no-bullet li:last-child{ + border-bottom:1px solid #ccc; + } + ul.no-bullet li>p{padding-left: 15px;margin-top: -7px;margin-bottom: 7px;} + .svg-home-button{ + height:40px; + width:40px; + background-color:transparent; + } + .top-space{ + margin-top:20px; + } + + #ddh-fixed-230{ + display:none; + } + #ddh-fixed-230 + .fluid-space .stickypad{ + height:20px; + } + .stickynav{ + display:block; + top:0; + border-width:0; + } + .stickynav h1{display:inline-block; margin:10px 20px 5px 0; } + .stickynav.affix {height:84px; box-shadow:0 5px 20px 20px rgba(255,255,255,1);} + .heading-page + div, + .cato-div{ display:inline-block; position:relative; top:5px;} + .cato-badge, .cato-approved{display:inline-block; margin-top:0;} + .cato-div + div{ + display:inline-block; + width:100%; + } + .cato-div + div::before { + background: #ccc none repeat scroll 0 0; + content: ""; + display: block; + height: 44px; + position: absolute; + right: -15px; + width: 150%; + } + .stickynav ul { + background-color: #cccccc; + display: block; + float: none; + margin: 0 0 0 15px; + top:0; + text-align:center; + right:0; + left:-15px; + } + .stickynav li{margin-top:0} + .stickynav li > a { + height: 40px; + line-height: 1; + margin: 2px 0 0; + padding: 14px 10px 0; + width: 100%; + } + .stickynav li.active a div{top:8px} + + .downloads{ font-size:1.2rem; top:0; margin:0 0 10px 10px; min-width:auto;} + .downloads-box{ font-size:1.4rem; } + + .toolkit.fluid-space{padding-top:100px;} + + .selectalllink{display:none;} + + .ds2-table{border:0;} + .ds2-table *{padding:0 !important; border:0 !important;} + .ds2-table tr{position:relative;} + .ds2-table tbody tr{display:table; margin-bottom:20px; width:100%} + .ds2-table tbody tr:last-child{margin-bottom:0;} + .ds2-table tbody td{display:table; width:auto;} + .ds2-table.table-bullet td{margin-left:20px;} + .ds2-table.table-bullet .document:after { + background-color: black; + border-radius: 50%; + content: ""; + display: table-cell; + font-size: 50px; + height: 6px; + left: 5px; + position: absolute; + top: 10px; + width: 6px; + } + .ds2-table tbody td:nth-child(3){display:none;} + .ds2-table tbody td:nth-child(4){float:left; margin-right:10px; } + .ds2-table tbody td:nth-child(5){float:left; } + .ds2-table tbody td:nth-child(5):not(:empty):before{content:"(";} + .ds2-table tbody td:nth-child(5):not(:empty):after{content:")";} + + .ds2-table thead .border th{display:none;} + .ds2-table thead .border{border-top:1px solid #ccc;} + .ds2-table thead h2{margin:0 0 20px;} + .ds2-table tbody + thead h2{margin:30px 0 20px;} + .ds2-table thead hr{margin-bottom:0} + .ds2-table tbody{padding-top:20px;} + + + /* FOOTER */ + /*.ddh-footer{padding-top:20px; margin-top:20px;}*/ + .ddh-footer.top-space{margin-top:0 !important} + .ddh-footer .container{padding-left:0; padding-right:0;} + .footer-logo{margin-left:10px;} + .footer-nav{margin-top:15px} + .footer-nav, + .footer-legal { + padding-left:0; + } + .footer-nav li{box-sizing:content-box; font-size:inherit; display:block; padding-right:0; padding-left:0; border-left:none; border-bottom:1px solid #aaa; height:40px; line-height:40px} + .footer-nav li:first-child{border-left:none; padding-left:0;border-top:1px solid #aaa;} + .footer-nav li a{position:relative;padding-left:10px; padding-right:10px; outline-offset:-2px; top:0} + + body:not(#home) .footer-nav a.active:after, + body:not(#home) .footer-nav a:hover:after { + background-color: transparent !important; + border-bottom: 2px solid #fcb314; + bottom: 0; + color: transparent; + content: attr(title) ""; + display: inline; + height: inherit; + left: 10px; + width: auto; + } + body:not(#home) .footer-nav a:after {width:auto;} + .footer-nav a { + font-size:1.8rem; + display: block; + font-size: 1.8rem; + position:static; + } + .footer-nav a:hover:after, + .footer-nav a.active:after { + display:none; + } + + .footer-legal { + margin-top: 15px; + padding:0 10px 10px; + } + .footer-legal a{text-decoration:underline;} + .footer-legal a:focus{text-decoration:none;} +} + +@media (min-width: 481px) and (max-width: 767px){ + .stickynav h1{ margin:10px 20px 5px 0} +} +@media (max-width: 1020px) { + .navbar li a{font-size:1.4rem; padding:16px 5px; transition:all .3s linear 0s;} +} +@media (max-width: 910px) { + .fixed-230-subnav.affix{margin:2px 0 0} + .navbar button{display:inline-block !important} + .navbar, + .navInner, + .navbar .container{height:55px; } + .brand{font-size:2.0rem; line-height:33px; height:33px; margin-top:11px; padding-right:10px;} + .brand:focus{outline:1px dotted white;} + .brand .icon-att-globe { + font-size:33px; + left: -3px; + margin-right: 10px; + top: 0; + } + .btn-menu{display:block;} + #nav-menu > ul{display:none;} + #nav-menu{ + top: 46px; + width:100%; + } + #nav-menu[aria-hidden="true"] { + height:0; + } + .btn-menu + #nav-menu{ + height:0; + } + + /* MENU ARROW */ + #nav-menu[aria-expanded="false"] .menu-arrow { display:none; } + #nav-menu[aria-expanded="true"] .menu-arrow { + background-color: #222; + border: 1px solid #777; + display:block; + height: 10px; + position: absolute; + right: 28px; + top: -5px; + transform: rotate(45deg); + width: 10px; + z-index: 1; + } + #nav-menu[aria-expanded="true"] .menu-arrow:after { + background-color: #222; + content: ""; + display: block; + height: 10px; + position: relative; + right: 0; + top: 0; + width: 10px; + } + + #nav-menu li a{ text-align:left; line-height:normal; } + #nav-menu[aria-expanded="true"]{ + height:auto; + background-color: #222; + overflow:visible; + left: 0; + position: absolute; + top: 55px; + width: 100% !important; + z-index: 9999; + box-shadow:0 10px 5px -5px rgba(0,0,0,.5); + } + #nav-menu[aria-expanded="true"] ul{ display:block; } + #nav-menu[aria-expanded="true"] li{ position:relative; margin:0; display:block; border-bottom:1px solid #777; float:none; height:auto; overflow:visible; } + #nav-menu[aria-expanded="true"] li:first-child{border-top:1px solid #777;} + #nav-menu[aria-expanded="true"] ul ul{display:none;} + #nav-menu[aria-expanded="true"] li a{position:relative; height:42px; display:block; color:#fff; padding:0 16px; line-height:41px;} + #nav-menu[aria-expanded="true"] li li a{ + padding-left:30px; + } + #nav-menu[aria-expanded="true"] li li li a{ padding-left:45px;} + body:not(#home) #nav-menu[aria-expanded="true"] li a div { + margin: 0; + position: absolute; + top: inherit; + } + + .stickynav li{ + display:inline-block; + float:none; + } +} +.cato-div.hide{display: none;} +.cato-div .cato-draft{background-color:#cf2a2a; border:1px solid #cf2a2a;} + + + + +/* junk to delete later*/ +.versionspan { + font-size:1rem; + word-spacing:1rem; + color:#999; +} +.versionspan a { + font-size:1rem; + word-spacing:normal; + color:blue; +} + +code{border:1px solid #ccc; padding:0 5px; background-color:#f5f5f5; border-radius:3px; font-family:"Courier New", monospace; font-size:15px; margin:0 5px} + + +/* SVG PICKER */ +.corner-banner { + font-family:"Omnes-ATT-W02-Medium"; + position:fixed; + background-color: yellow; + border: 1px solid; + color: red; + font-size: 1rem; + height: 160px; + line-height: 1rem; + margin-left: -80px; + margin-top: -80px; + padding: 100px 0 0; + transform: rotate(-45deg); + width: 160px; +} +.corner-banner b{font-family:"Omnes-ATT-W02-Bold"; font-weight:normal; display:inline-block; margin-top:10px;} +body.svg-picker{text-align:center;} +.svg-picker #svg-tiles{padding-top:280px;} +.svg-picker svg{cursor:pointer; max-width:100%; height:100%; position:relative; top:50%; margin:-50px auto auto; fill:#e3e3e3; z-index:0;} +.svg-picker .svg-box{float:left; border:1px solid #ccc; padding:0; margin:10px; height:100px; width:100px;} +.svg-picker .svg-box:hover, +.svg-picker .svg-box.active {background-color:#69b158 !important} + +#preview{position:relative; display:block;} +#preview svg{max-width:180px; } +.svg-picker .row{position:relative; top:0; margin:0 auto; padding:0 40px; } +[id*="pgraph"]{text-align:center; width:100%; font-size:38px; color:orange; font-family:"Omnes-ATT-W02-Medium-Italic"; margin-top:20px; padding-left:15px; padding-right:15px;} +[id*="pgraph"] span{font-size:26px; color:#333;} +.introtext{font-family:'Omnes-ATT-W02-Light'; font-size:20px; line-height:normal; display:block; height:100px; transition:height 1s ease 0s; transition:opacity 1s linear 0s; } + +.svg-picker .svg-20px{height:20px !important; width:20px !important; margin-top:-10px;} +.svg-picker .svg-24px{height:24px !important; width:24px !important; margin-top:-12px;} +.svg-picker .svg-28px{height:28px !important; width:28px !important; margin-top:-14px;} +.svg-picker .svg-32px{height:32px !important; width:32px !important; margin-top:-16px;} +.svg-picker .svg-36px{height:36px !important; width:36px !important; margin-top:-18px;} +.svg-picker .svg-40px{height:40px !important; width:40px !important; margin-top:-20px;} +.svg-picker .svg-44px{height:44px !important; width:44px !important; margin-top:-22px;} +.svg-picker .svg-48px{height:48px !important; width:48px !important; margin-top:-24px;} +.svg-picker .svg-52px{height:52px !important; width:52px !important; margin-top:-26px;} +.svg-picker .svg-56px{height:56px !important; width:56px !important; margin-top:-28px;} +.svg-picker .svg-60px{height:60px !important; width:60px !important; margin-top:-30px;} +.svg-picker .svg-64px{height:64px !important; width:64px !important; margin-top:-32px;} +.svg-picker .svg-68px{height:68px !important; width:68px !important; margin-top:-34px;} +.svg-picker .svg-72px{height:72px !important; width:72px !important; margin-top:-36px;} +.svg-picker .svg-76px{height:76px !important; width:76px !important; margin-top:-38px;} +.svg-picker .svg-80px{height:80px !important; width:80px !important; margin-top:-40px;} +.svg-picker .svg-84px{height:84px !important; width:84px !important; margin-top:-42px;} +.svg-picker .svg-88px{height:88px !important; width:88px !important; margin-top:-44px;} +.svg-picker .svg-92px{height:92px !important; width:92px !important; margin-top:-46px;} +.svg-picker .svg-96px{height:96px !important; width:96px !important; margin-top:-48px;} +.svg-picker .svg-100px{height:100px !important; width:100px !important; margin-top:-50px;} + + +.svg-picker .svg-color1, .svg-picker .svg-color1 path {fill:#666666 !important} +.svg-picker .svg-color2, .svg-picker .svg-color2 path {fill:#0574ac !important} +.svg-picker .svg-color3, .svg-picker .svg-color3 path {fill:#cf2a2a !important} +.svg-picker .svg-color4, .svg-picker .svg-color4 path {fill:#000000 !important} +.svg-picker .svg-color5, .svg-picker .svg-color5 path {fill:#ffffff !important} +#nameBox[readonly]{ background-color:#69B158; color:white; overflow:hidden; text-align:center; border:1px solid #ccc; border-radius:15px; padding:20px; font-size:11px; font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} +#code{margin-bottom:60px} +@media (max-width:767px){ + body.svg-picker .row{ + width:100%; + } + [id*="pgraph"] span{ font-size:16px; color:#666; text-shadow:none; margin-top:15px; display:block;} + .introtext.scrolled{opacity:0; height:0; transition:all 1s linear 0s; } + #code{margin-bottom:20px;} +} + +.doctype{color:#666;} +.highlight{background-color:yellow} + +#atlwdg-container { + left: 0 !important; + margin-left: 0 !important; + margin-top: 0 !important; + position: absolute !important; + right: 0 !important; + top: 0; + width: 100% !important; +} + +.skiplink{ + color: #fff; + font-size: 1.2rem; + left: 50%; + outline: 1px dotted white; + padding: 0 10px; + position: fixed; + text-align: center; + top: 0; + visibility:visible; + z-index:-1; +} +.skiplink:focus { + visibility:visible; + z-index:auto; +} +.ddh-tabs li{ + border-left:1px solid #ccc !important; + border-right:1px solid #ccc; +} +.ddh-tab-pane{border:1px solid #ccc !important;} + +code, +pre { + font-family: Monaco, Menlo, Consolas, "Courier New", monospace; + font-size:11px; + color: #333333; + border-radius: 3px; +} +code { + padding: 2px 4px; + color: #d14; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; + sword-wrap:break-word; +} +pre { + padding: 9.5px; + word-break: break-all; + word-wrap: break-word; + white-space: pre; + white-space: pre-wrap; + background-color: #f5f5f5; + border-radius: 5px; +} + +.pagelegend{ + border:1px solid #ccc; + border-radius:8px; + float:right; + padding:10px 15px; + background-color:#fcfcfc; + display:inline-block; + min-width:230px; + margin:0 0 20px 20px; +} +.pagelegend li{ + font-size:1.4rem; +} +.pagelegend ul li + li{margin-top:0;} +.pagelegend + p{margin-top:30px;} +[class*="data-hide-at"]{visibility:hidden;} + +/********************* Phone number input - START *********************/ +input.b2b-phone-mask-input, input.b2b-phone-mask-input:hover, input.b2b-phone-mask-input:focus { + padding-right: 15px; +} +/********************* Phone number input - END *********************/ + + +.b2b-header-tabs .header__item.profile .profile-info{ + border: 1px solid #d3d3d3; + max-width:400px; + width:300px; + padding: 20px; + pointer-events: auto; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + font-size: 16px; + -webkit-transition: opacity .2s ease-out; + -moz-transition: opacity .2s ease-out; + transition: opacity .2s ease-out; + background: #fff; + border-radius: 5px; + box-shadow: 0 5px 6px 0 rgba(0,0,0,.25); + color: #333; + line-height: 20px; + position: absolute; + left:-123px; + top:38px; + display:none; +} +.b2b-header-tabs .header__item.profile .profile-info.open{ + display:block; +} +.b2b-header-tabs .header__item.profile .profile-info label{ + font-family:Omnes-ATT-W02; + display:block; + margin-top:20px; +} +.b2b-header-tabs .header__item.profile .profile-info span{ + font-family:Omnes_ATTW02Medium; + display:block; +} + +.b2b-header-tabs i.caret{ + position:absolute; + top:-7px; + left:50%; +} +.b2b-header-tabs i.caret:before{ + content:""; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-bottom: 8px solid #d3d3d3; + position:absolute; + top:-1px; + +} +.b2b-header-tabs i.caret:after{ + content:""; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-bottom: 8px solid #fff; + position:absolute; +} + +/******* Breadcrumbs *********/ +.breadcrumb-css-override > li { + margin-right: 24px; +} +.breadcrumb-css-override li > * { + float: left !important; +} + +/******* CHANGELOG ******/ +/* TODO: Need to rewrite this with new b2b */ +.changelog { + font-family: "Omnes-ATT-W02"; + font-size: 16px; + margin-left: 20%; + margin-right: 20%; +} +.changelog .row { + display: block; +} +.changelog h1 { + border-top: 1px solid #e2e2e2; + padding-top: 10px; +} +.changelog h1:first-of-type { + border-top: none; + padding-top: 0px; +} + +#fixed, #added, #changed { + +} + +#breaking-change { + color: red; + text-transform: uppercase; +} + +.slide-reveal { + margin-top: 10px; +} + +/*nav*/ + +.nav { + margin-bottom: 20px; + margin-left: 0; + list-style: none; +} + +.nav > li > a { + display: block; +} + +.nav > li > a:hover, +.nav > li > a:focus { + text-decoration: none; + background-color: #eeeeee; +} + +.nav > li > a > img { + max-width: none; +} + +.nav > .pull-right { + float: right; +} + +.nav-header { + display: block; + padding: 3px 15px; + font-size: 11px; + font-weight: bold; + line-height: 20px; + color: #999999; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + text-transform: uppercase; +} + +.nav li + .nav-header { + margin-top: 9px; +} + +.nav-list { + padding-right: 15px; + padding-left: 15px; + margin-bottom: 0; +} + +.nav-list > li > a, +.nav-list .nav-header { + margin-right: -15px; + margin-left: -15px; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); +} + +.nav-list > li > a { + padding: 3px 15px; +} + +.nav-list > .active > a, +.nav-list > .active > a:hover, +.nav-list > .active > a:focus { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); + background-color: #0088cc; +} + +.nav-list [class^="icon-"], +.nav-list [class*=" icon-"] { + margin-right: 2px; +} + +.nav-list .divider { + *width: 100%; + height: 1px; + margin: 9px 1px; + *margin: -5px 0 5px; + overflow: hidden; + background-color: #e5e5e5; + border-bottom: 1px solid #ffffff; +} + +.nav-tabs, +.nav-pills { + *zoom: 1; +} + +.nav-tabs:before, +.nav-pills:before, +.nav-tabs:after, +.nav-pills:after { + display: table; + line-height: 0; + content: ""; +} + +.nav-tabs:after, +.nav-pills:after { + clear: both; +} + +.nav-tabs > li, +.nav-pills > li { + float: left; +} + +.nav-tabs > li > a, +.nav-pills > li > a { + padding-right: 12px; + padding-left: 12px; + margin-right: 2px; + line-height: 14px; +} + +.nav-tabs { + border-bottom: 1px solid #ddd; +} + +.nav-tabs > li { + margin-bottom: -2px; +} + +.nav-tabs > li > a { + padding-top: 8px; + padding-bottom: 8px; + line-height: 20px; + border: 1px solid transparent; + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; +} + +.nav-tabs > li > a:hover, +.nav-tabs > li > a:focus { + border-color: #eeeeee #eeeeee #dddddd; +} + +.nav-tabs > .active > a, +.nav-tabs > .active > a:hover, +.nav-tabs > .active > a:focus { + color: #555555; + cursor: default; + background-color: #ffffff; + border: 1px solid #ddd; + border-bottom-color: transparent; +} + +.well { + background-color: #ffffff; + border: 1px solid #e3e3e3; + border-radius: 4px; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset; + margin-bottom: 20px; + min-height: 20px; + padding: 19px; +} +/************************** Overrides for Top Navigation ends ***************************/ + +/****** Icon ref page ******/ +.b2b-icons-size { + font-size:16px; + display: inline-block; + width: 15%; + box-sizing: border-box; + vertical-align: top; + padding: 20px; + margin-bottom: 20px; + cursor: default; + min-height: 130px; + position: relative; + overflow: hidden; + border: 1px solid transparent; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + -webkit-transition: all .2s ease-out; + -moz-transition: all .2s ease-out; + transition: all .2s ease-out; +} +.b2b-icons-size:hover { + background: #fff; + color: #199DDF; + border-color: #d3d3d3; +} +.b2b-icons-size i:before, i:after { + text-align: initial; +} +.b2b-icons-header { + margin-bottom: 40px; +} +.b2b-icons-size span { + margin-top: 15px; + display: block; +} +.b2b-bc-naming { + float: right; + margin-top: 5px; +} +.b2b-icons-alignment { + margin: 4% 8%; +} +.b2b-icons-alignment .ds2.heading-group { + margin-top: 5px; +} +/****** End - Icon ref page ******/ + +/****** Start - Listbox Demo ******/ +.listbox-list { + outline: 0px none; + overflow-x: hidden; + width: 200px; + position: relative; + height: 300px; + border: 1px solid #333; + border-radius: 6px; + margin-bottom: 10px; +} +/****** End - Listbox Demo ******/ + + + +/******** Start - Scroll to Top ********/ +.b2b-scroll-speed-label { + margin-left: 30px; +} +.b2b-scroll-speed { + margin-left: 5px; +} +/******** End - Scroll to Top ********/ + +/********************* Cato verification box starts ******************/ +.cato-verification-approved, .cato-verification-pending { + background-color: #fff; + border: 1px solid #1b7e28; + border-radius: 6px; + color: #333; + line-height: 1; + margin-top: 18px; + padding: 5px 10px; + text-align: center; + font-size: 1.6rem; +} +.cato-verification-pending { + border-color: #ef6f00; +} +.description .downloads { + margin-bottom: 5px; +} +/********************* Cato verification box Ends ********************/ + +.form-search { + margin-top: 15px; +} + +.att-timeline .timeline-dot .above-info-box .info-container .date { + font-size: 14px; + color: #444; + line-height: 20px; + position: relative; + width: 100% +} + +.form-search .search-query { + width: 80% !important; +} + +/********************* Grids Demo ********************/ + +.b2b-grid-reference > .container { + background: #0574ac; + padding: 30px; + margin-bottom: 20px; +} + +.b2b-grid-reference .row > [class*='span']:last-of-type { + margin-right: 0px !important; +} + +.b2b-grid-reference .row { + margin-bottom: 12px; +} + +.b2b-grid-reference .row [class*='span'] { + float: left; +} + +.b2b-grid-reference .row [class*='span'] { + background: #fff; + color: #000; + text-align: center; + padding: 10px 0; + box-shadow: 2px 2px 3px #000; +} + +.b2b-grid-reference .row:after { + content: ''; + display: table; + clear: both; +} + +.b2b-grid-reference .row:last-of-type { + margin-bottom: 0px; +} + +.b2b-offset-column .row { + margin-bottom: 12px; +} + +.b2b-offset-column .row:first-of-type { + margin-top: 10px; +} + +.b2b-offset-column .row > [class*='span']{ + margin-right: 0px !important; + padding: 10px; +} + +.b2b-offset-column .row [class*='span'] { + background: #0574ac; + color: #fff; + text-align: center; + padding: 10px 0; +} + +.b2b-headings-style, b2b-headings-specs { + display: inline-block; +} + +.b2b-headings-specs-container { + background-color: #eeeeee; + padding: 10px; +} + +.b2b-headings-container:not(:last-of-type) { + margin-bottom: 20px; +} +/********************* Redline Debug Classes **********************/ +.redline{ + border: 1px solid red !important; +} +.redlines *{ + border: 1px solid red !important; +} + +.hidden-drag-ghost { + opacity: 0; +} + +.settings-icon { + display: inline-block; + font-size: 26px; + color: #0568ae; + margin-bottom: 10px; +} +.settings-icon .flyout-link { + font: regular; + color: #0568ae; + size: 16px; + margin-top: 15px; +} +.settings-icon .dashboard-name { + text-align: left; + margin-bottom: 15px; +} +.settings-icon .dashboard-name .name { + margin-bottom: 10px; +} +.settings-icon .dashboard-name input { + width: 280px !important; +} +.settings-icon .form-row { + margin-top: -10px; +} +.settings-icon .b2b-flyout-container { + width: 310px; +} +.flyoutselect p { + margin: 0 0 15px 0; +}
\ No newline at end of file |