.doc_documentation_area{ padding-bottom: 110px; z-index: 0; @media(min-width:1400px){ min-height: 1000px; } .overlay_bg{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #1d2746; opacity: 0; z-index: 1; visibility: hidden; transition: all 0.4s linear; } &.body_fixed{ .doc_left_sidebarlist{ position: fixed; top: 0; width: 270px; @media (min-width:1500px){ width: 307px; } @media (max-height: 630px){ padding-top: 20px; } } .doc_rightsidebar{ position: fixed; top: 0; @media (max-height: 630px){ padding-top: 20px; } } } &.overlay{ .overlay_bg{ opacity: 0.5; visibility: visible; } } } .full-width-doc { .body_fixed { .doc_rightsidebar, .doc_left_sidebarlist { padding-top: 30px; } } } /*============ doc_left_sidebarlist css =========*/ .doc_left_sidebarlist{ padding-top: 50px; padding-bottom: 30px; z-index: 1; margin-right: 30px; position: relative; height: 100%; &:before{ content: ""; width: 200%; right: 0; height: 100%; background: #fafcfd; position: absolute; border-bottom: 1px solid #e5e9eb; top: 0; z-index: -1; } .scroll{ max-height: 800px; .mCSB_inside>.mCSB_container{ margin-right: 0 !important; } @media (max-height: 630px){ padding-bottom: 0; max-height: 450px; } } h2{ margin-bottom: 25px; } } .nav-sidebar{ margin-bottom: 0; .nav-item{ margin-bottom: 20px; padding-right: 35px; position: relative; cursor: pointer; .nav-link{ padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; line-height: 20px; font-weight: 500; color: $h_title; position: relative; img{ padding-right: 15px; } & + .icon{ font-size: 20px; color: $p_color; float: right; position: absolute; right: 30px; top: -2px; transition: all 0.3s linear; } } &:hover,&.active{ .nav-link{ color: $blue; } .icon{ color: $blue; } } &.active{ .icon{ transform: rotate(-180deg); } } .dropdown_nav{ padding-left: 32px !important; margin-bottom: 0; padding-top: 12px; width: 100% !important; display: none; li{ a{ font-size: 14px; font-weight: 400; line-height: 30px; color: $p_color; padding: 0; &:hover,&.active{ color: $blue; i{ color: $blue; } } } } } } & + .nav-sidebar{ border-top: 1px solid #e5e9eb; padding-top: 20px; } } .coding_nav{ padding-top: 15px; padding-bottom: 20px; } .bottom_nav{ .nav-item .nav-link{ i{ position: relative; color: $h_title; padding-left: 4px; transition: all 0.2s linear; } &:hover{ i{ transform: translateX(5px); } } } } /*============ doc_left_sidebarlist css =========*/ .documentation_info{ padding-right: 59px; padding-left: 15px; position: relative; .c_head{ font-weight: 500; margin-bottom: 12px; .anchorjs-link { font-size: 22px !important; } } .slideshow{ width: auto; height: 600px; .slide{ width: inherit; height: inherit; .item--horse { top: 124px; left: 78px; } } .nav{ display: none; } .title{ color: $blue; } } } .sticky-nav-doc #documentation { padding-top: 174px; } .documentation_body{ padding-top: 60px; footer{ .border_bottom{ margin-top: 100px; } } } .doc_documentation_area .shortcode_title{ margin-bottom: 40px; h1{ font-size: 30px; font-weight: 500; margin-bottom: 12px; } h4{ margin-bottom: 15px; } p{ span{ font-weight: 500; } } .s_title{ margin-bottom: 10px; } &+ul{ margin-top: -.8rem; } } .get_started{ padding-top: 45px; padding-bottom: 50px; .c_head{ i{ color: $blue; font-size: 16px; margin-left: 8px; } } p{ color: $p_color; a{ color: $blue; } } } .link{ background: #f1fdf3; padding: 14px 10px 14px 30px; border-radius: 4px; p{ position: relative; margin-bottom: 0; padding-left: 40px; &:before{ content: "\52"; position: absolute; font-family: eleganticons; left: 0; top: 4px; font-size: 24px; color: #10d631; } } } .test_version{ padding-top: 45px; p{ font-size: 16px; span{ color: $h_title; } } } .v_menu{ border-bottom: 1px solid #e8ecee; padding-bottom: 20px; padding-top: 5px; margin-bottom: 20px; .nav-item{ display: inline-block; .nav-link{ font-size: 16px; color: $p_color; transition: all 0.2s linear; padding: 0; border: 0; border-radius: 0; span{ width: 20px; height: 20px; border-radius: 50%; background: #e1e3eb; display: inline-block; text-align: center; line-height: 20px; font-size: 12px; margin-right: 10px; transition: all 0.2s linear; } &.active,&:hover{ color: $blue; border: 0; background: transparent; span{ background: $blue; color: #fff; } } } & + li{ margin-left: 55px; } } } .process_tab_shortcode { .version { background: #f8fafb; padding: 30px; font-size: 15px; margin-bottom: 20px; p { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } .v_head { padding-bottom: 24px; } .v_middle { p { margin-bottom: 0; font-size: 15px; .red { color: #f12249; } .green { color: #11c52f; } } } .v_footer { padding-top: 25px; p { margin-bottom: 0; } } } } .developer{ padding: 34px 0 20px; p{ a{ color: $blue; } } .tag_list li{ margin-top: 10px; i{ padding-right: 10px; } } } .help_text{ padding: 40px 0 0; .help_info{ display: flex; flex-wrap: wrap; padding-top: 16px; margin-left: -30px; margin-right: -30px; .help_item{ width: 33.33%; margin-bottom: 15px; padding: 0 30px; h4{ font-size: 16px; margin-bottom: 15px; transition: color 0.2s linear; i{ font-size: 18px; top: 2px; position: relative; } &:hover{ color: $blue; } } } } } .code_structure{ padding-top: 50px; .c_head{ margin-bottom: 8px; } } .process_tab_shortcode{ position: relative; overflow: hidden; .previous,.next{ position: absolute; top: 50%; transform: translateY(-50%); padding: 0; border-radius: 0; background: #e7f7fb; border: 0; color: $blue; outline: none; box-shadow: none; transition: all 0.4s linear; &:focus{ outline: none; box-shadow: none; } &:hover{ outline: none; box-shadow: none; background: $blue; color: #fff; } } .next{ right: -30px; } .previous{ left: -30px; } &:hover{ .next{ right: 0; } .previous{ left: 0; } } } .question_box{ padding-top: 35px; padding-bottom: 70px; .question_text{ h4{ font-size: 18px; font-weight: 500; margin-bottom: 18px; } p{ a{ color: $blue; } } } .question_text_two{ padding-left: 50px; } .signup_form{ padding-top: 10px; padding-bottom: 20px; .input-group{ border-radius: 4px; background-color: rgb(255, 255, 255); box-shadow: 0 2px 6px 0 rgba(2, 48, 58, 0.14); .form-control{ background: transparent; border: 0; font-size: 16px; color: $h_title; box-shadow: none; padding-left: 20px; height: 50px; @include placeholder{ color: #9c9fa9; } } button{ padding: 0; background: transparent; border: 0; font-size: 16px; font-weight: 500; color: $blue; padding: 0 20px; position: relative; &:before{ content: ""; width: 1px; background: #e8ecee; top: 8px; bottom: 8px; left: 0; position: absolute; } } } } } .feedback_link{ align-items: center; padding-top: 30px; h6{ font-weight: 500; font-size: 16px; color: $p_color; margin-bottom: 0; a{ color: $blue; } i{ padding-right: 8px; } } p{ margin-bottom: 0; text-align: right; } .h_btn{ border-radius: 4px; font-size: 14px; font-weight: 500; color: $p_color; display: inline-block; padding: 1px 14px 0; background-color: rgb(255, 255, 255); box-shadow: 0 3px 8px 0 rgba(2, 48, 58, 0.14); transition: all 0.2s linear; margin-left: 8px; &:hover{ color: $blue; } } } .help_form{ max-width: 730px; display: flex; align-items: center; height: 100vh; margin-top: 0; margin-bottom: 0; .modal-content{ border: 0; } } .contact_form{ .form-group{ margin-bottom: 30px; .form-control,textarea{ border: 1px solid rgb(244, 248, 248); height: 58px; border-radius: 4px; background-color: rgb(255, 255, 255); box-shadow: 0 4px 10px 0 rgba(4, 73, 89, 0.08); color: #878b99; font-weight: 400; padding-left: 30px; @include placeholder{ color: #878b99; } &:focus{ box-shadow: 0 20px 30px 0 rgba(4, 73, 89, 0.1); } } textarea{ width: 100%; height: 160px; padding-top: 20px; display: block; } .action_btn{ border: 0; padding: 15px 40px; box-shadow: none; font-weight: 500; &:hover{ box-shadow: 0 20px 30px 0 rgba(12, 118, 142, 0.24); } } } } /*========== doc_rightsidebar css ============*/ .mCSB_scrollTools{ width: 0; } .open_icon{ width: 40px; height: 40px; background: #e8eeff; line-height: 40px; font-size: 32px; text-align: center; position: absolute; border-top-left-radius: 3px; border-bottom-left-radius: 3px; left: -40px; color: $blue; display: none; i{ display: inline-block; & + i{ display: none; } } &.overlay{ i{ display: none; & + i{ display: inline-block; } } } } .full-width-doc{ .doc_rightsidebar{ padding-right: 15px; .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width: 225px; } } } .doc_rightsidebar{ border-left: 1px solid #e8ecee; margin-left: -20px; padding-left: 30px; padding-top: 50px; height: 100%; .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width: 204px; } @media (max-height: 530px){ padding-bottom: 0; max-height: 300px; } &.scroll{ .mCSB_inside>.mCSB_container{ margin-right: 0; } } h6{ font-size: 15px; font-weight: 500; } .doc_right_link{ li{ margin-bottom: 10px; padding-left: 25px; position: relative; a{ font-size: 14px; font-weight: 500; color: $p_color; i{ padding-right: 12px; position: absolute; left: 0; font-size: 12px; top: 5px; } } } } .doc_switch{ display: flex; align-items: center; padding-bottom: 36px; .tab-btn{ font-size: 16px; color: $blue; line-height: 22px; margin-bottom: 0; padding-top: 2px; cursor: pointer; transition: color 0.2s linear; &:hover{ color: $blue; } } .fa-moon{ top: -1px; position: relative; } input[type=checkbox]{ width: 50px; height: 22px; border: 1px solid #91e1f2; background: #e7f7fb; display: block; border-radius: 25px; margin: 0 12px 0 15px; position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: content-box; &:before{ content: ""; width: 16px; height: 16px; background: $blue; position: absolute; border-radius: 50%; top: 50%; transform: translateY(-50%); transition: all 0.2s linear; left: 3px; } &:checked{ &:before{ left: calc(100% - 19px); } & + .tab-btn{ color: $blue; } } & + .tab-btn{ color: $p_color; } } } } .doc_menu{ .nav-link{ font-size: 14px; font-weight: 400; line-height: 30px; padding: 0; color: $p_color; &.active,&:hover{ color: #1d2746; } &.active { font-weight: 500; } } .nav{ padding-left: 20px; .nav-link{ font-size: 14px; font-weight: 400; line-height: 30px; } } } .mobile_menu{ width: 300px; position: fixed; height: 100vh; max-height: 100vh !important; top: 0; background: #fff; right: -300px; z-index: 1050; transition: all 0.4s linear; .doc_left_sidebarlist{ padding-left: 20px; &:before{ display: none; } } &.open{ right:0; } .close_nav{ padding-top: 20px; padding-left: 30px; font-size: 28px; } } /*=============== doc_documentation_full_area css =========*/ .full-width-doc{ .doc_left_sidebarlist{ margin-right: 0; padding-left: 0; } &.body_fixed{ .doc_left_sidebarlist{ width: 287px; } } .documentation_info{ padding-left: 35px; padding-right: 35px; } .doc_rightsidebar{ margin-left: 0; } } .sticky_menu{ .doc_documentation_area{ &.body_fixed{ .doc_left_sidebarlist,.doc_rightsidebar{ top: 78px; } } } } .resource{ .c_head{ margin-bottom: 5px; } .tag_list{ padding-top: 0; li{ margin-top: 4px; a{ display: inline-block; font-weight: 500; } } } } /*========== typography_content css ========*/ .typography_content{ .code-preview{ border: 1px solid #e5ebef; padding: 20px; box-shadow: 0 3px 6px 0 rgba(4, 73, 89, 0.02); position: relative; #header-name{ margin-bottom: 0; } img{ max-width: 100%; } &.video_img{ display: inline-block; } } .code-toolbar{ .snippets{ margin-bottom: 0; code{ margin-bottom: 20px; } } } .code_item { padding-top: 15px; p{ a{ color: $blue; } } } } .vjs-iframe-blocker{ display: none; } .video-js{ margin: 0 auto; width: 100%; max-width: 640px; height: 360px; .mfp-close{ right: -55px; top: -10px; } } /*============ Sticky Nav doc css ================*/ .sticky-nav-doc { &:not(.onepage-doc) .body_fixed .doc_rightsidebar, &:not(.onepage-doc) .body_fixed .doc_left_sidebarlist { padding-top: 100px; } .body_fixed.body_navbar_fixed .doc_left_sidebarlist, .body_fixed.body_navbar_fixed .doc_rightsidebar { padding-top: 30px; } } /*============ onepage doc css ================*/ .onepage-doc{ .shortcode_info{ padding-left: 0; padding-right: 0; } .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width: 230px; } &.body_fixed{ .doc_left_sidebarlist{ padding-top: 30px; } } .doc_left_sidebarlist{ width: 270px; margin-right: 0; border: 0; padding-top: 0; &:before{ display: none; } } .nav-sidebar{ .nav-item{ padding-right: 0; background: #f8fafb; margin-bottom: 0; margin-top: 3px; position: relative; .docs-progress-bar{ position: absolute; background: #ebf0f1; bottom: 0; left: 0; top: 0; max-height: 48px; } .nav-link{ padding: 13px 20px; } .icon{ top: 0; right: 20px; line-height: 48px; font-size: 18px; position: absolute; color: $blue; transform: rotate(0deg); i{ display: inline-block; & + i{ display: none; } } } &.active{ .icon{ i{ display: none; & + i{ display: inline-block; } } } .dropdown_nav{ display: block; } } .dropdown_nav{ padding-top: 15px; padding-bottom: 15px; background: #fff; position: relative; &:before{ content: ""; width: 2px; bottom: 15px; background:#edf1f3; position: absolute; top: 15px; left: 20px; } .nav-item{ margin-top: 0; background: transparent; position: relative; padding-left: 22px; &:before{ content: "\35"; position: absolute; left: 0; top: 0; font-family: 'ElegantIcons'; color: $blue; } .docs-progress-bar{ display: none; } .nav-link{ padding: 0; color: $p-color; } &.active{ .nav-link{ color: $blue; } } } } } } .doc_rightsidebar{ margin-left: 0; padding-right: 10px; padding-top: 0; } .doc-container{ padding-top: 100px; } } .doc_rightsidebar{ .bootstrap-select .dropdown-toggle .filter-option-inner-inner { font-size: 14px; } .dropdown-toggle{ background: #fafcfd; border: 1px solid #e1e4e5; border-radius: 5px; font-size: 16px; color: $p-color; padding: 9px 20px 0; box-shadow: none; &:after{ content: "\33"; border: 0; font-family: 'ElegantIcons'; top: -2px; position: relative; } i{ padding-right: 8px; } &:focus{ outline: none !important; box-shadow: none !important; } } .bootstrap-select{ margin-bottom: 30px; > .dropdown-menu{ box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); background: #fff; border: 0; .inner{ .dropdown-menu{ border: 0; li{ a{ color: $p-color; position: relative; font-size: 14px; &:before{ content: ""; width: 2px; height: 0; position: absolute; left: 0; top: 0; background: $blue; transition: all 0.2s linear; } i{ padding-right: 8px; } &.active,&:hover{ background: #f6f6f6; color: $blue; &:before{ height: 100%; } } } } } } } } .doc_switch{ padding-top: 20px; margin-left: -40px; margin-top: 10px; padding-left: 40px; } } .fontsize-controllers{ .btn-group{ border: 1px solid #dfe2e4; background-color: rgb(255, 255, 255); box-shadow: 0 1px 0 0 rgba(3, 13, 37, 0.2),inset 0 -8px 14px 0 rgba(3, 13, 37, 0.1); border-radius: 4px; .btn{ font-size: 16px; font-weight: 400; color: $h_title; line-height: 1.2; border: 0; &:focus{ outline: none; box-shadow: none; background: #eff0f1; } &.rvfs-reset{ border-left: 1px solid #dfe2e4; border-right: 1px solid #dfe2e4; } } } } .print{ color: $p-color; font-size: 18px; } .nav_title{ font-size: 16px; text-transform: uppercase; color: #fff; background: #1d2746; border-radius: 4px; line-height: 22px; padding: 13px 30px; margin-bottom: 0; } body:not(.onepage-doc) .body_fixed #font-switcher { width: 204px }