diff options
Diffstat (limited to 'catalog-ui/app/scripts/directives/tutorial/tutorial-directive.less')
| -rw-r--r-- | catalog-ui/app/scripts/directives/tutorial/tutorial-directive.less | 213 |
1 files changed, 213 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.less b/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.less new file mode 100644 index 0000000000..410a54e9c1 --- /dev/null +++ b/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.less @@ -0,0 +1,213 @@ +.sdc-tutorial-page { + + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.8); + + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + left: 0; + z-index: 3000; + + .sdc-tutorial-container-wrapper { + display: flex; + flex-direction: column; + } + + .sdc-tutorial-container { + .bg_c; + width: 830px; + height: 466px; + box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.35); + } + + .sdc-tutorial-container-tabs { + height: 56px; + display: flex; + flex-direction: row; + } + + .sdc-tutorial-container-tab { + .a_6; + flex-grow: 1; + align-items: center; + justify-content: center; + display: flex; + height: 56px; + position: relative; + opacity: 0.8; + + span { + .hand; + } + + &::after { + content: ''; + display: block; + border-right: solid 1px ; + border-color: rgba(59, 123, 155, 0.31); + height: 28px; + right: 0; + position: absolute; + top: 14px; //(56-28)/2 + width: 1px; + } + + &:last-child:after { + display: none; + } + + &.selected { + opacity: 1; + .bold; + } + + } + + .sdc-tutorial-container-content { + .bg_a; + .perfect-scrollbar; + display: flex; + align-items: center; + height: 410px; + } + + .sdc-tutorial-skip { + .c_1; + .hand; + text-align: right; + margin-bottom: 9px; + } + + .sdc-tutorial-footer { + .c_4; + margin-top: 9px; + + .sdc-tutorial-footer-prev-button { + float: left; + position: relative; + padding-left: 14px; + .noselect; + + span { + .hand; + &::before { + content: '<'; + display: block; + position: absolute; + left: 0; + top: 0; + } + } + } + + .sdc-tutorial-footer-page-counter { + .e_3; + position: absolute; + left: 50%; + margin-top: 2px; + cursor: default; + .noselect; + + .selected { + .c_3; + .bold; + margin-right: 2px; + } + + .total { + margin-left: 2px; + } + } + + .sdc-tutorial-footer-next-button { + float: right; + position: relative; + padding-right: 14px; + .noselect; + + span { + .hand; + + &::after { + content: '>'; + display: block; + position: absolute; + right: 0; + top: 0; + } + } + } + + } + +} + +///////////////// TEXT TEMPLATE +.sdc-tutorial-text-template { + + padding: 20px 65px; + + h1 { + .c_15; + margin-top: 0; + } + + p { + .c_10; + } +} + +///////////////// IMAGE TEMPLATE +.sdc-tutorial-image-template { + + .sdc-tutorial-image-template-text { + padding: 16px 38px; + height: 118px; + h1 { + .c_11; + margin: 0 0 4px 0; + } + + p { + .c_4; + font-weight: 300; + line-height: 21px; + } + + } + + .sdc-tutorial-page-2-image { background: transparent url('../../../styles/images/tutorial/2.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-3-image { background: transparent url('../../../styles/images/tutorial/3.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-4-image { background: transparent url('../../../styles/images/tutorial/4.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-5-image { background: transparent url('../../../styles/images/tutorial/5.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-6-image { background: transparent url('../../../styles/images/tutorial/6.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-7-image { background: transparent url('../../../styles/images/tutorial/7.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-8-image { background: transparent url('../../../styles/images/tutorial/8.png') no-repeat 0 0; width: 830px; height: 292px;} + + .sdc-tutorial-page-10-image { background: transparent url('../../../styles/images/tutorial/10.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-11-image { background: transparent url('../../../styles/images/tutorial/11.png') no-repeat 0 0; width: 830px; height: 292px;} + + .sdc-tutorial-page-13-image { background: transparent url('../../../styles/images/tutorial/13.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-14-image { background: transparent url('../../../styles/images/tutorial/14.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-15-image { background: transparent url('../../../styles/images/tutorial/15.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-16-image { background: transparent url('../../../styles/images/tutorial/16.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-17-image { background: transparent url('../../../styles/images/tutorial/17.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-18-image { background: transparent url('../../../styles/images/tutorial/18.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-19-image { background: transparent url('../../../styles/images/tutorial/19.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-20-image { background: transparent url('../../../styles/images/tutorial/20.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-21-image { background: transparent url('../../../styles/images/tutorial/21.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-22-image { background: transparent url('../../../styles/images/tutorial/22.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-23-image { background: transparent url('../../../styles/images/tutorial/23.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-24-image { background: transparent url('../../../styles/images/tutorial/24.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-25-image { background: transparent url('../../../styles/images/tutorial/25.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-26-image { background: transparent url('../../../styles/images/tutorial/26.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-27-image { background: transparent url('../../../styles/images/tutorial/27.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-28-image { background: transparent url('../../../styles/images/tutorial/28.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-29-image { background: transparent url('../../../styles/images/tutorial/29.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-30-image { background: transparent url('../../../styles/images/tutorial/30.png') no-repeat 0 0; width: 830px; height: 292px;} + +} |