summaryrefslogtreecommitdiffstats
path: root/catalog-ui/app/styles/welcome-style.less
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-02-19 10:28:42 +0200
committerMichael Lando <ml636r@att.com>2017-02-19 10:51:01 +0200
commit451a3400b76511393c62a444f588a4ed15f4a549 (patch)
treee4f5873a863d1d3e55618eab48b83262f874719d /catalog-ui/app/styles/welcome-style.less
parent5abfe4e1fb5fae4bbd5fbc340519f52075aff3ff (diff)
Initial OpenECOMP SDC commit
Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/app/styles/welcome-style.less')
-rw-r--r--catalog-ui/app/styles/welcome-style.less651
1 files changed, 651 insertions, 0 deletions
diff --git a/catalog-ui/app/styles/welcome-style.less b/catalog-ui/app/styles/welcome-style.less
new file mode 100644
index 0000000000..0d969878c7
--- /dev/null
+++ b/catalog-ui/app/styles/welcome-style.less
@@ -0,0 +1,651 @@
+@zoom-in-animation-play: 2s;
+@zoom-in-animation: 3s;
+@slide-fade-in-text-main-animation: 2s;
+
+html,
+body {
+ height: 100%;
+ /*overflow-x: hidden;*/
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-image: url(images/welcome/bg/global.png);
+}
+
+.sdc-welcome-new-page {
+
+ opacity: 1;
+ height: 100%;
+ background-color: @main_color_l;
+
+ .os-welcome {
+ top: 47%;
+ position: fixed;
+ left: 42%;
+ font-size: 40px;
+ }
+
+ #slide-2, #slide-3, #slide-4, #slide-5 {
+ padding: 0 50px 0 30px;
+ }
+
+ .visible {
+ visibility: visible;
+ }
+
+ .asdc-welcome-close {
+ position: absolute;
+ right: 38px;
+ top: 30px;
+ z-index: 101;
+ cursor: pointer;
+
+ .sprite-welcome;
+ .sprite-welcome.close;
+
+ &:hover {
+ .sprite-welcome.close_white;
+ }
+ }
+
+ .asdc-welcome-frame {
+ height: 100vh;
+ width: 100%;
+ background-size: cover;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .asdc-welcome-frame.frame-0 {
+ background-image: url(images/welcome/bg/002.jpg);
+ background-size: cover;
+
+ .asdc-whats-new {
+
+ z-index: 1;
+
+ .news-items-row {
+ display: flex;
+ flex-direction: row;
+
+ .news-item-wrapper {
+ width: 250px;
+ height: 343px;
+ background-color: @main_color_p;
+ margin: 16px;
+ padding: 40px 20px 20px 20px;
+ border-radius: 4px;
+ opacity: 0;
+
+ ul {
+ padding-left: 17px;
+ li {
+ list-style: disc;
+ }
+ }
+
+ ol {
+ padding-left: 12px;
+ }
+
+ &.bg-1 {border-bottom: solid 5px @main_color_a;}
+ &.bg-2 {border-bottom: solid 5px @main_color_j;}
+ &.bg-3 {border-bottom: solid 5px @main_color_d;}
+ &.bg-4 {border-bottom: solid 5px @main_color_i;}
+ &.bg-5 {border-bottom: solid 5px @main_color_e;}
+ &.bg-6 {border-bottom: solid 5px @func_color_b;}
+ &.bg-7 {border-bottom: solid 5px @main_color_c;}
+ &.bg-8 {border-bottom: solid 5px @main_color_k;}
+
+ .news-body {
+ .m_14_r;
+ }
+ .news-title {
+ margin-bottom: 20px;
+ .s_18_m;
+ }
+ }
+ }
+
+
+ }
+ }
+
+ .asdc-welcome-frame.frame-01 {
+ background-image: url(images/welcome/bg/002.png);
+ background-size: cover;
+ }
+
+ .asdc-welcome-frame.frame-02 .asdc-welcome-slide-image-box {
+ position: absolute;
+ right: 11.6vw;
+ top: 10.5vw;
+ z-index: 1;
+ }
+
+ .asdc-welcome-frame.frame-02 .asdc-welcome-slide-text-box {
+ position: absolute;
+ top: 33%;
+ left: 10%;
+ z-index: 1;
+ }
+
+ .asdc-welcome-frame.frame-02 .asdc-welcome-frame-shape {
+ background-image: url(images/welcome/bg/shape02.png);
+ position: absolute;
+ height: 19vw;
+ width: 19vw;
+ top: 2.1vw;
+ left: 32.1vw;
+ /* opacity: .3; */
+ background-size: contain;
+ /* background-repeat: no-repeat; */
+ z-index: 0;
+ visibility: hidden;
+
+ animation-duration: @zoom-in-animation;
+ -moz-animation-duration: @zoom-in-animation;
+ -webkit-animation-duration: @zoom-in-animation;
+ }
+
+ .asdc-welcome-frame.frame-02 .asdc-welcome-frame-connection {
+ background-image: url(images/welcome/bg/connection02.png);
+ width: 56px;
+ height: 27vw;
+ position: absolute;
+ bottom: 0;
+ right: 295px;
+ background-position: 0px 35vw;
+ }
+
+ .asdc-welcome-frame.frame-03 .asdc-welcome-slide-image-box {
+ position: absolute;
+ left: 6%;
+ top: 20%;
+ z-index: 1;
+ }
+
+ .asdc-welcome-frame.frame-03 .asdc-welcome-slide-text-box {
+ position: absolute;
+ top: 38%;
+ right: 14.2vw;
+ z-index: 1;
+ }
+
+ .asdc-welcome-frame.frame-03 .asdc-welcome-frame-shape {
+ background-image: url(images/welcome/bg/shape03.png);
+ position: absolute;
+ height: 378px;
+ width: 252px;
+ top: 0vw;
+ right: 195px;
+ background-size: contain;
+ z-index: 0;
+ visibility: hidden;
+
+ animation-duration: @zoom-in-animation;
+ -moz-animation-duration: @zoom-in-animation;
+ -webkit-animation-duration: @zoom-in-animation;
+ }
+
+ .asdc-welcome-frame.frame-03 .asdc-welcome-frame-connection {
+ background-image: url(images/welcome/bg/connection03.png);
+ width: 204px;
+ height: 371px;
+ position: absolute;
+ bottom: -109px;
+ right: 590px;
+ }
+
+ .asdc-welcome-frame.frame-04 .asdc-welcome-slide-image-box {
+ position: absolute;
+ right: 10%;
+ top: 20%;
+ z-index: 5;
+ }
+
+ .asdc-welcome-frame.frame-04 .asdc-welcome-slide-text-box {
+ position: absolute;
+ top: 34%;
+ left: 8%;
+ z-index: 5;
+ }
+
+ .asdc-welcome-frame.frame-04 .asdc-welcome-frame-connection {
+ background-image: url(images/welcome/bg/connection04.png);
+ width: 56px;
+ height: 752px;
+ position: absolute;
+ bottom: -143px;
+ right: 946px;
+ }
+
+ .asdc-welcome-frame.frame-04 .asdc-welcome-frame-shape {
+ background-image: url(images/welcome/bg/shape04.png);
+ position: absolute;
+ height: 412px;
+ width: 355px;
+ top: 0;
+ right: 734px;
+ z-index: 1;
+ visibility: hidden;
+
+ animation-duration: @zoom-in-animation;
+ -moz-animation-duration: @zoom-in-animation;
+ -webkit-animation-duration: @zoom-in-animation;
+ }
+
+ .asdc-welcome-frame.frame-05 .asdc-welcome-slide-text-box {
+ position: absolute;
+ top: 29%;
+ right: 10%;
+ z-index: 5;
+ }
+
+ .asdc-welcome-frame.frame-05 .asdc-welcome-frame-shape {
+ background-image: url(images/welcome/bg/shape05.png);
+ position: absolute;
+ height: 794px;
+ width: 597px;
+ top: 0;
+ right: 40%;
+ z-index: 1;
+ visibility: hidden;
+
+ animation-duration: @zoom-in-animation;
+ -moz-animation-duration: @zoom-in-animation;
+ -webkit-animation-duration: @zoom-in-animation;
+ }
+
+ .asdc-welcome-frame.frame-06 {
+ background-image: url(images/welcome/bg/004.png);
+ background-size: cover;
+ }
+
+ .asdc-welcome-frame.frame-06 .asdc-welcome-main {
+ bottom: 30%;
+ }
+
+ .asdc-welcome-header {
+ /*background-color: rgba(17, 21, 33, 0.52);*/
+ height: 70px;
+ width: 100%;
+ padding: 55px 0 0 65px;
+ color: #fff;
+ z-index: 1;
+ position: absolute;
+ left: 0;
+ top: 0;
+ }
+
+ .welcome-nav {
+ visibility: hidden;
+ }
+
+ .welcome-logo {
+ cursor: pointer;
+ }
+
+ #sdc-welcome-video-wrapper {
+ opacity: 0;
+ }
+
+ .asdc-welcome-video-close {
+ position: absolute;
+ top: 30px;
+ right: 30px;
+ z-index: 1;
+ }
+
+ .asdc-welcome-video {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ min-width: 100%;
+ min-height: 100%;
+ width: auto;
+ height: auto;
+ -webkit-transform: translateX(-50%) translateY(-50%);
+ transform: translateX(-50%) translateY(-50%);
+ }
+
+ .asdc-welcome-video-icon {
+ cursor: pointer;
+ /*margin-bottom: 80px;*/
+ visibility: hidden;
+ width: 140px;
+ margin: 0 auto;
+ right: -24px;
+ position: relative;
+
+ animation-duration: @zoom-in-animation-play;
+ -moz-animation-duration: @zoom-in-animation-play;
+ -webkit-animation-duration: @zoom-in-animation-play;
+
+ .asdc-welcome-video-icon-play {
+ position: absolute;
+ top: -11px;
+ left: -11px;
+ z-index: 1;
+ }
+
+ .asdc-welcome-video-icon-play:hover + .asdc-welcome-inner-circle {
+ -webkit-animation-play-state: running;
+ -moz-animation-play-state: running;
+ animation-play-state: running;
+
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ transform: rotate(360deg);
+
+ -webkit-animation:turning_acw 3s;
+ -moz-animation:turning_acw 3s;
+ animation:turning_acw 3s;
+
+ -webkit-animation-iteration-count: 99;
+ -moz-animation-iteration-count: 99;
+ animation-iteration-count: 99;
+ }
+
+ .asdc-welcome-inner-circle {
+ border: 2px solid #ECEBFA;
+ border-left-color:#666666;
+ border-right-color:#999999;
+ .opacity(0.5);
+
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ transform: rotate(360deg);
+
+ position:absolute;
+
+ width: 96px;
+ height: 96px;
+
+ .border-radius(96px);
+
+ -webkit-animation:turning_acw 3s;
+ -moz-animation:turning_acw 3s;
+ animation:turning_acw 3s;
+
+ -webkit-animation-iteration-count: 3;
+ -moz-animation-iteration-count: 3;
+ animation-iteration-count: 3;
+ }
+ }
+
+ /*@-webkit-keyframes turning_acw {
+ 0%{
+ -webkit-transform: rotate(360deg); }
+ 100%{
+ -webkit-transform: rotate(0deg); }
+ }
+
+ @-moz-keyframes turning_acw {
+ 0%{
+ -moz-transform: rotate(360deg); }
+ 100%{
+ -moz-transform: rotate(0deg); }
+ }*/
+
+ @keyframes turning_acw {
+ 0%{
+ transform: rotate(360deg); }
+ 100%{
+ transform: rotate(0deg); }
+ }
+
+ .asdc-welcome-title {
+ color: #373f51;
+ font-size: 2.4vw;
+ font-family: omnes-light;
+ line-height: 1.0em;
+ letter-spacing: -0.01em;
+ }
+
+ .asdc-welcome-main {
+ text-align: center;
+ position: absolute;
+ bottom: 40%;
+ z-index: 1;
+ color: #fff;
+ left: 0;
+ width: 100%;
+ }
+
+ .whats-new {
+ .p_16_r;
+ position: absolute;
+ left: 205px;
+ top: 45px;
+ cursor: pointer;
+ text-decoration: none;
+ }
+
+ .asdc-welcome-main-title {
+ color: #fff;
+ font-size: 62px;
+ font-family: omnes-light;
+ visibility: hidden;
+ height: 72px;
+
+ animation-duration: @slide-fade-in-text-main-animation;
+ -moz-animation-duration: @slide-fade-in-text-main-animation;
+ -webkit-animation-duration: @slide-fade-in-text-main-animation;
+ }
+
+ .asdc-welcome-main-message {
+ font-size: 28px;
+ font-family: omnes-light;
+ line-height: 1.8em;
+ visibility: hidden;
+
+ animation-duration: @slide-fade-in-text-main-animation;
+ -moz-animation-duration: @slide-fade-in-text-main-animation;
+ -webkit-animation-duration: @slide-fade-in-text-main-animation;
+ }
+
+ .asdc-welcome-main-back-btn-ph {
+ margin: 24px 0 70px;
+ }
+
+ .asdc-welcome-main-back-btn {
+ font-size: 16px;
+ color: #009fdb;
+ font-family: omnes-medium;
+ border: 2px solid;
+ border-radius: 3px;
+ line-height: 40px;
+ min-width: 242px;
+ display: inline-block;
+ visibility: hidden;
+ text-decoration: none;
+
+ &:hover {
+ color: #33bfec;
+ border-color: #33bfec;
+ }
+ }
+
+ .asdc-welcome-cover {
+ position: absolute;
+ top: 0px;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ background-color: rgba(14, 13, 12, 0.8);
+ z-index: 0;
+ }
+
+ .asdc-welcome-slide-text-box {
+ border-radius: 10px;
+ background-color: #fff;
+ padding: 10px;
+ }
+
+ .asdc-welcome-slide-text-box-title {
+ color: #373f51;
+ font-size: 2.4vw;
+ font-family: omnes-light;
+ letter-spacing: -0.015em;
+ line-height: 1.04em;
+ visibility: hidden;
+
+ animation-duration: @slide-fade-in-text-main-animation;
+ -moz-animation-duration: @slide-fade-in-text-main-animation;
+ -webkit-animation-duration: @slide-fade-in-text-main-animation;
+ }
+
+ .asdc-welcome-slide-text-box-content {
+ color: #737b81;
+ font-size: 1vw;
+ font-family: omnes-light;
+ padding-top: .5vw;
+ line-height: 1.3em;
+ visibility: hidden;
+
+ animation-duration: @slide-fade-in-text-main-animation;
+ -moz-animation-duration: @slide-fade-in-text-main-animation;
+ -webkit-animation-duration: @slide-fade-in-text-main-animation;
+ }
+
+ .asdc-welcome-slide-image-box {
+ box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2);
+ height: 29.6vw;
+ width: 40vw;
+ }
+
+ .asdc-welcome-slide-image {
+ height: 100%;
+ width: 100%;
+ }
+
+ /*.asdc-welcome-frame-content {*/
+ /*display: flex;*/
+ /*justify-content: center;*/
+ /*align-items: center;*/
+ /*}*/
+ /*.asdc-welcome-frame-content-text {*/
+ /*color: #666;*/
+ /*font-size: 16px;*/
+ /*font-family: omnes-light;*/
+ /*margin-top: 30px;*/
+ /*line-height: 1.6em;*/
+ /*}*/
+ /*.asdc-welcome-frame-content-text-p {*/
+ /*position: relative;*/
+ /*}*/
+ /*.asdc-welcome-frame-content-text-p-icon {*/
+ /*position: absolute;*/
+ /*height: 25px;*/
+ /*width: 25px;*/
+ /*left: -40px;*/
+ /*top: 10px;*/
+ /*}*/
+ /*.asdc-welcome-frame.frame-02 .asdc-welcome-frame-content-right,*/
+ /*.asdc-welcome-frame.frame-04 .asdc-welcome-frame-content-right {*/
+ /*max-width: 30%;*/
+ /*flex: 1;*/
+ /*margin-left: 5%;*/
+ /*}*/
+ /*.asdc-welcome-frame.frame-02 .asdc-welcome-frame-content-left,*/
+ /*.asdc-welcome-frame.frame-04 .asdc-welcome-frame-content-left {*/
+ /*max-width: 55%;*/
+ /*flex: 1;*/
+ /*}*/
+ /*.asdc-welcome-frame.frame-04 .asdc-welcome-frame-content-img {*/
+ /*width: 36vw;*/
+ /*}*/
+ /*.asdc-welcome-frame.frame-03 .asdc-welcome-frame-content-left {*/
+ /*max-width: 30%;*/
+ /*flex: 1;*/
+ /*margin-right: 5%;*/
+ /*}*/
+ /*.asdc-welcome-frame.frame-03 .asdc-welcome-frame-content-right {*/
+ /*max-width: 55%;*/
+ /*flex: 1;*/
+ /*}*/
+ /*.asdc-welcome-frame.frame-03 .asdc-welcome-frame-content-img {*/
+ /*left: 0;*/
+ /*right: auto;*/
+ /*}*/
+ /*.asdc-welcome-frame.frame-03 .asdc-welcome-frame-content-img-bubble {*/
+ /*left: auto;*/
+ /*top: 0;*/
+ /*position: absolute;*/
+ /*right: 0;*/
+ /*top: -7vh;*/
+ /*}*/
+ /*.asdc-welcome-frame.frame-05 .asdc-welcome-frame-content{*/
+ /*color: #fff;*/
+ /*font-size: 37px;*/
+ /*font-family: omnes-light;*/
+ /*flex-direction: column;*/
+ /*}*/
+ /*.asdc-welcome-frame-content-img-ph {*/
+ /*position: relative;*/
+ /*!*width: 42%*!*/
+ /*!*width: 840px;*!*/
+ /*!*height: 674px;*!*/
+ /*width: 52vw;*/
+ /*height: 39vw;*/
+ /*}*/
+ /*.asdc-welcome-frame-content-img {*/
+ /*width: 45vw;*/
+ /*position: absolute;*/
+ /*z-index: 1;*/
+ /*right: 0;*/
+ /*bottom: 0;*/
+ /*}*/
+ /*.asdc-welcome-frame-content-img-bubble {*/
+ /*border-radius: 50%;*/
+ /*height: 38vw;*/
+ /*width: 38vw;*/
+ /*position: absolute;*/
+ /*left: 0;*/
+ /*top: 0;*/
+ /*position: absolute;*/
+ /*right: 0;*/
+ /*top: -7vh;*/
+ /*}*/
+ /*.asdc-welcome-frame-content-img-bubble.blue {*/
+ /*background: linear-gradient(to right, #067ab4 0%, #44c8f5 100%);*/
+ /*}*/
+ /*.asdc-welcome-frame-content-img-bubble.green {*/
+ /*background: linear-gradient(to right, #77be46 0%, #d2e15f 100%);*/
+ /*}*/
+ /*.asdc-welcome-frame-content-img-bubble.purple {*/
+ /*background: linear-gradient(to right, #8a559f 0%, #d6b7e5 100%);*/
+ /*}*/
+ /*.asdc-welcome-button {*/
+ /*font-family: omnes-medium;*/
+ /*font-size: 14px;*/
+ /*background-color: #009fdb;*/
+ /*text-decoration: none;*/
+ /*border: 0;*/
+ /*border-radius: 4px;*/
+ /*color: #fff;*/
+ /*text-align: center;*/
+ /*line-height: 30px;*/
+ /*min-width: 200px;*/
+ /*margin-top: 50px;*/
+ /*}*/
+ .asdc-welcome-footer {
+ background-color: #000;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ font-size: 12px;
+ padding: 20px 10%;
+ left: 0;
+ color: #fff;
+ text-align: center;
+ }
+
+}