API tools faq
paste
Udoro

Val - CSS

Udoro
Sep 16th, 2024 (edited)
276
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 31.71 KB | None | 0 0
raw download clone embed print report
  1. :root {
  2.     /* WIDTH AND SPACINGS */
  3.     --sidebar-width: min(90vw, 320px);
  4.     --pad-m: 1.25rem;
  5.     --pad-s: 0.6rem;
  6.     --pad-xs: 0.4rem;
  7.     --dropdown-links-indent: 0px; /*LEVEL ONE*/
  8.   --dropdown-level-two-indent: 36px; /*NEW*/
  9.   --dropdown-level-three-indent: 0px; /*NEW*/
  10.  
  11.     /* vertical & horizontal header padding */
  12.     --header-pad-y: clamp(0.2rem, 0.716rem + 1.211vw, 0.7rem);
  13.   /*--header-pad-y: clamp(1rem, 0.716rem + 1.211vw, 1.75rem); */
  14.     --header-pad-x: var(--pad-m);
  15.  
  16.     /* links vertical & horizontal padding */
  17.     --link-pad-y: 0.8rem;
  18.     --link-pad-x: 0rem;
  19.     --link-pad-x2: 0.5rem;
  20.  
  21.     /* panel top & bottom padding */
  22.     --panel-block-pad: clamp(0.5rem, -1.375rem + 5vh, 2rem);
  23.  
  24.     /* GAPS */
  25.     --link-gap: 1rem;
  26.     --list-gap: 0;
  27.  
  28.     /* BACKGROUND COLORS */
  29.     --header-bg: #252525; /*menu top*/
  30.     --nav-bg: #3b3b3b; /*menu body*/
  31.     --social-bg: transparent;
  32.     --link-bg: transparent;    
  33.     --dropdown-links-bg: transparent;
  34.     --skip-link-background: white;
  35.   --dropdown-content-bg: #303030;
  36.   --expanded-dropdown-parent-level-two-bg: #3f0202;  /*NEW*/
  37.   --expanded-dropdown-parent-level-three-bg: #3f0202;  /*NEW*/
  38.    --dropwdown-level-two-bg: #252525; /*NEW*/
  39.    --dropwdown-level-three-bg: initial; /*NEW*/
  40.  
  41.     /* HOVER BACKGROUND */
  42.     --social-hover-bg: rgb(0 0 0 / 70%);
  43.     --link-hover-bg: rgb(0 0 0 / 70%);
  44.     --dropdown-links-hover-bg: rgb(0 0 0 / 70%);
  45.  
  46.     /* COLORS */
  47.     --panel-title-color: #ffe594;
  48.     --panel-icon-color: white;
  49.     --chevron-color: white;
  50.     --social-color: dimgray;
  51.     --social-icon-color: var(--social-color);
  52.     --panel-link-color: white;
  53.     --mobile-menu-trigger-color: white;
  54.     --label-color: orangered;
  55.     --dropdown-links-color: dimgray;
  56.     --skip-link-color: white;
  57.     --note-link-color: #ffd946;
  58.   --expanded-dropdown-parent-color: var(--panel-link-color); /*NEW*/
  59.  
  60.     /* HOVER COLORS */
  61.     --link-hover-color: #ffd9cd;
  62.     --link-icon-hover-color: #F2E3D5;
  63.     --social-hover-color: #efe3d6;
  64.     --social-icon-hover-color: var(--social-hover-color);
  65.     --dropdown-links-hover-color: #ffd9cd;
  66.  
  67.     /* FONT SIZES */
  68.     --panel-title-size: 1.3rem;
  69.     --panel-back-size: 0.6rem;
  70.     --link-txt-size: 0.95rem;
  71.     --note-txt-size: 0.70rem;
  72.     /* icons */
  73.     --nav-icon-size: 1.2rem;
  74.     --social-icon-size: var(--nav-icon-size);
  75.     --chevron-size:1rem;
  76.  
  77.     /* CSS TRANSITIONS */
  78.     --sidebar-transition: 3ms;
  79. /*  --sidebar-ttf: cubic-bezier(0.85, 0, 0.25, 0.85); */
  80.     --sidebar-ttf: cubic-bezier(0, 0, 1, 1);
  81.     --opacity-transition: 300ms 10ms;
  82.  
  83.     /* BORDER */
  84.     --link-border-radius: 0;
  85.     --horizontal-line: 1px solid rgb(0 0 0 / 40%);
  86.     --link-underline: var(--horizontal-line);
  87.     --dropdown-links-underline: none;
  88.     --sidebar-shadow: 0px 0px 3px rgba(0, 0, 0, 0.75), 0px 17px 24px rgba(0, 0, 0, 0.3);
  89.  
  90.     /* OVERLAY */
  91.     --overlay-bg: white;
  92.     --overlay-opacity: 0.5;
  93.  
  94.     /* FOCUS STYLES */
  95.     --focus-outline-color: black;
  96.     --focus-outline-offset: 4px;
  97.     --focus-outline-width: 2px;
  98.  
  99.     /*  EXTRAS ffe594 */
  100.     --current-link-bg: #e6b73730;
  101.     --current-link-font-colour: #AB1D40;
  102.     --current-link-underline: solid 6px #e6b737;
  103. }
  104.  
  105.  
  106.  
  107. /*DROPDWON LEVELS*/
  108.  
  109. .breakdance .dwc-sidebar__dropdown-toggle.level-2:has([aria-expanded='true']){
  110.     background-color: var(--expanded-dropdown-parent-level-two-bg)
  111. }
  112.  
  113. .breakdance .dwc-sidebar__dropdown-toggle.level-3:has([aria-expanded='true']){
  114.     background-color: var(--expanded-dropdown-parent-level-three-bg)
  115. }
  116.  
  117.  
  118. .breakdance .dwc-sidebar__dropdown-toggle.level-2:has([aria-expanded='true']) .dwc-nav__link__text,
  119. .breakdance .dwc-sidebar__dropdown-toggle.level-3:has([aria-expanded='true']) .dwc-nav__link__text{
  120.    color: var(--expanded-dropdown-parent-color)
  121. }
  122.  
  123.  
  124. .breakdance  .dwc-sidebar__dropdown-content.level-2 > ul{
  125.     background-color: var(--dropwdown-level-two-bg);
  126.       padding-inline-start: var(--dropdown-level-two-indent)
  127. }
  128.  
  129. .breakdance  .dwc-sidebar__dropdown-content.level-3 > ul{
  130.     background-color: var(--dropwdown-level-three-bg);
  131.     padding-inline-start: var(--dropdown-level-two-indent)
  132. }
  133.  
  134.   /* TRANSPARENT SIDEBAR */
  135. .dwc-overlay-sidebar:not(.dwc-mobile){
  136.    --header-bg: transparent;
  137.    --nav-bg: transparent;
  138. }
  139.  
  140. .dwc-overlay-topbar{
  141.    --header-bg: transparent;  
  142. }
  143.  
  144. .dwc-overlay-topbar #dwc_header.dwc-sidebar {  
  145.     background: var(--header-bg);
  146.  /* position: absolute;   */
  147.   margin-bottom: calc(var(--dwc-header-height) * -1);
  148. }
  149.  
  150. .dwc-overlay-topbar #dwc_header.dwc-sidebar + .bde-section .section-container{
  151.   padding-top: calc(var(--bde-section-vertical-padding) * 2);  
  152. }
  153.  
  154. .dwc-overlay-sidebar > .bde-section .section-container:not(.dwc-mobile *, #dwc_header *, .dwc-rtl *),
  155. .dwc-overlay-sidebar > .dwc-site-wrapper > .bde-section .section-container:not(.dwc-mobile *, #dwc_header *, .dwc-rtl *){
  156. padding-left: calc(var(--sidebar-width) + 20px);
  157. }
  158.  
  159. #dwc_header.builder-element {
  160.     width: 100%;
  161. }
  162.  
  163. /* offcanvas */
  164.  
  165. .dwc-push-content.dwc-slide-nav-open.dwc-nav-trigger-is-fixed  .dwc-nav-trigger{
  166.     transform: translateX(calc(var(--sidebar-width) * -1));
  167. }
  168.  
  169. .dwc-rtl.dwc-push-content.dwc-slide-nav-open.dwc-nav-trigger-is-fixed  .dwc-nav-trigger{
  170.     transform: translateX(calc(var(--sidebar-width) * 1));
  171. }
  172.  
  173. .dwc-nav-trigger{
  174.     transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
  175. }
  176.  
  177. .dwc-offcanvas.breakdance .dwc-sidebar__nav{
  178.     transform: translateX(-100%);  
  179.   transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
  180. }
  181.  
  182. .dwc-offcanvas.breakdance .dwc-sidebar__nav,
  183. .dwc-topbar-enabled.breakdance .dwc-sidebar__nav{
  184.     background: var(--nav-bg);
  185.     width: var(--sidebar-width);
  186.     position: fixed !important;
  187.     bottom: 0;
  188.     left: 0;
  189.     top: 0;    
  190.     height: 100vh;
  191.     overflow: hidden;
  192.    
  193. }
  194.  
  195. .dwc-offcanvas.dwc-slide-nav-open .dwc-mobile-menu-overlay {
  196.     pointer-events: auto;
  197.     opacity: var(--overlay-opacity);
  198. }
  199.  
  200. .dwc-offcanvas .dwc-mobile-menu-overlay {
  201.     background: var(--overlay-bg);
  202.     position: fixed !important;
  203.     top: 0;
  204.     bottom: 0;
  205.     left: 0;
  206.     right: 0;
  207.     pointer-events: none;
  208.     opacity: 0;
  209.     transition: 0.4s 0.2s;
  210.     z-index: -1;
  211.   height: 100vh;
  212. }
  213.  
  214. .dwc-slide-nav-open.breakdance .dwc-sidebar__nav:not(.dwc-push-content *) {
  215.     transform: translateX(0) !important;
  216. }
  217.  
  218.  
  219. .breakdance.dwc-push-content .dwc-sidebar__nav__panel {
  220.     padding-block: var(--panel-block-pad) !important;
  221. }
  222.  
  223.  
  224.  
  225. .breakdance.dwc-offcanvas .dwc-sidebar__nav:not(.dwc-mobile *),
  226. .breakdance.dwc-topbar-enabled .dwc-sidebar__nav:not(.dwc-mobile *){
  227.   z-index:1000;
  228. }
  229.  
  230.  
  231. .breakdance.dwc-topbar-enabled .dwc-sidebar__nav__panel:not(.dwc-mobile *){
  232. padding-top: calc(20px + var(--dwc-header-height));
  233. }
  234.  
  235. /* body */
  236.  
  237. body.dwc-no-scroll {
  238.     overflow: hidden;
  239.     height: 100vh;
  240. }
  241.  
  242.  
  243. body.dwc-offcanvas {
  244.     --sidebar-transition: 700ms;
  245.     transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
  246. }
  247.  
  248.  
  249. /* push content */
  250.  
  251. .dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper > header,
  252. .dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper > section{
  253.     transform: translateX(var(--sidebar-width));
  254. }
  255.  
  256.  
  257. .dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper {
  258.     overflow: hidden;
  259.     height: 100vh;
  260.  }
  261.  
  262. .breakdance .bde-section{
  263.         --sidebar-transition: 700ms;
  264.     transition: transform var(--sidebar-transition) var(--sidebar-ttf),opacity var(--opacity-transition);
  265. }
  266.  
  267.  
  268. /* MEDIA QUERY - DESKTOP  
  269. @media (min-width: 1025px) { */
  270.  
  271.     body.dwc-no-scroll:not(.dwc-mobile) {
  272.         padding-right: 17px;
  273.     }
  274.  
  275.   .breakdance #dwc_header:not(
  276.   .dwc-offcanvas #dwc_header,
  277.  .dwc-topbar-enabled #dwc_header,
  278.   .builder-element,
  279.   .dwc-push-content #dwc_header,
  280.   .dwc-mobile *) {
  281.         width: var(--sidebar-width);
  282.     }
  283.  
  284.     .dwc-offcanvas .dwc-sidebar .section-container:not(.dwc-mobile *),
  285.     .dwc-topbar-enabled .dwc-sidebar .section-container:not(.dwc-mobile *){
  286.         width: 100%;
  287.         max-width: 100%;
  288.         background: var(--header-bg);
  289.     }
  290.  
  291.     .dwc-offcanvas.breakdance .bde-div.dwc-header-inner-wrap:not(.dwc-mobile *, .dwc-topbar-enabled *){
  292.         width: var(--bde-section-width);
  293.         margin-inline: auto;
  294.     }
  295.  
  296.   .dwc-topbar-enabled.breakdance .bde-div.dwc-header-inner-wrap{
  297.        z-index: 9999;
  298.     }
  299.  
  300.    
  301.  
  302.     .dwc-offcanvas.breakdance .dwc-sidebar__nav:not(.dwc-mobile *),
  303.     .dwc-topbar-enabled.breakdance .dwc-sidebar__nav:not(.dwc-mobile *){
  304.         z-index: 5;
  305.     }
  306.  
  307.  
  308.     .breakdance header.dwc-sidebar>.section-container:not(
  309.     .dwc-offcanvas.breakdance .section-container,
  310.     .dwc-topbar-enabled.breakdance .section-container,
  311.     .dwc-mobile *) {
  312.         height: 100vh;
  313.     }
  314.  
  315.  
  316.     .breakdance header.builder-element.dwc-sidebar>.section-container:not(.dwc-mobile *) {
  317.         height: auto;
  318.     }
  319.  
  320.     .breakdance header.dwc-sidebar:not(
  321.   .builder-element.dwc-sidebar,
  322.   .dwc-offcanvas .dwc-sidebar,
  323.   .dwc-mobile *) {
  324.         position: fixed;
  325.     }
  326.  
  327.  
  328.     .dwc-nav-trigger:not(.dwc-offcanvas *):not(.builder-element):not(.dwc-mobile *),
  329.     .dwc-mobile-menu-overlay:not(.dwc-offcanvas *):not(.dwc-mobile *),
  330.     .mobile.dwc-nav__panel__header:not(.dwc-offcanvas *):not(.dwc-mobile *) {
  331.         display: none !important;
  332.     }
  333.  
  334. .breakdance footer.bde-section:not(.dwc-offcanvas .bde-section,
  335. .dwc-mobile *, .dwc-overlay-sidebar *, .builder-element, [data-breakdance-foreign-document] ~ section, [data-breakdance-foreign-document] footer),
  336. .breakdance > .bde-section:not(header, .dwc-offcanvas .bde-section, .dwc-mobile *, .dwc-overlay-sidebar *, .builder-element, [data-breakdance-foreign-document] ~ section),
  337. .breakdance>.bde-globalblock:not(header,.dwc-offcanvas *,.dwc-mobile *,.dwc-overlay-sidebar *,.builder-element,[data-breakdance-foreign-document]~.bde-globalblock),
  338. .breakdance > .bde-themeless-template-content-area:not(header, .dwc-offcanvas section, .dwc-mobile *, .dwc-overlay-sidebar *, .builder-element, [data-breakdance-foreign-document] ~ section),
  339. .breakdance .dwc-site-wrapper > .bde-section:not(header, .dwc-offcanvas .bde-section, .dwc-mobile *, .dwc-overlay-sidebar *, .builder-element, [data-breakdance-foreign-document] ~ section),
  340. .breakdance > main:not(.dwc-mobile *) {
  341.     width: calc(100% - var(--sidebar-width)) !important;
  342.     margin-left: auto;
  343.     margin-bottom: auto;
  344. }
  345.  
  346.  
  347.  
  348.  
  349. /*RTL*/
  350. .dwc-rtl.breakdance footer.bde-section:not(.dwc-offcanvas .bde-section,.dwc-mobile *,.dwc-overlay-sidebar *),
  351. .dwc-rtl.breakdance>.bde-section:not(header,.dwc-offcanvas .bde-section,.dwc-mobile *,.dwc-overlay-sidebar *),
  352. .dwc-rtl.breakdance .dwc-site-wrapper>.bde-section:not(header,.dwc-offcanvas .bde-section,.dwc-mobile *,.dwc-overlay-sidebar *),
  353. .dwc-rtl.breakdance>main:not(.dwc-mobile *) {
  354.    margin-left: unset;
  355.     margin-right: auto;
  356. }
  357.  
  358. .dwc-rtl.breakdance header.dwc-sidebar:not(.builder-element.dwc-sidebar,.dwc-offcanvas .dwc-sidebar,.dwc-mobile *) {
  359.    
  360.     right: 0;
  361. }
  362.  
  363. .dwc-rtl.dwc-mobile.breakdance .dwc-sidebar__nav:not(.builder-element.dwc-sidebar__nav),
  364. .dwc-rtl.dwc-offcanvas.breakdance .dwc-sidebar__nav,
  365. .dwc-rtl.dwc-topbar-enabled.breakdance .dwc-sidebar__nav {  
  366.     left: auto;
  367.     right: 0;
  368.    
  369. }
  370. .dwc-rtl.dwc-mobile.breakdance .dwc-sidebar__nav:not(.builder-element.dwc-sidebar__nav),
  371. .dwc-rtl.dwc-offcanvas.breakdance .dwc-sidebar__nav
  372. {
  373.    transform: translateX(100%);      
  374. }
  375.  
  376. .dwc-rtl.dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper>header,
  377. .dwc-rtl.dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper>section {
  378.     --rtl-translate: calc(var(--sidebar-width) * -1);
  379.     transform: translateX(var(--rtl-translate));
  380. }
  381.  
  382. /* RTL + OVERLAY SIDEBAR */
  383. .dwc-rtl.dwc-overlay-sidebar>.bde-section .section-container:not(.dwc-mobile *,#dwc_header *),
  384. .dwc-rtl.dwc-overlay-sidebar>.dwc-site-wrapper>.bde-section .section-container:not(.dwc-mobile *,#dwc_header *) {
  385.     padding-right: calc(var(--sidebar-width) + 20px);
  386. }
  387.  
  388.  
  389.  
  390.  
  391.  
  392. /*}*/
  393.  
  394. /* MEDIA QUERY - DESKTOP ENDS */
  395.  
  396. footer {
  397.     width: 100%;
  398. }
  399.  
  400.  
  401. /* skip links */
  402. .breakdance .dwc-skip-link {
  403.     display: flex;
  404.     flex-direction: column;
  405.     justify-content: center;
  406.     align-items: center;
  407.     background-color: var(--skip-link-background);
  408.     padding: var(--pad-xs) var(--pad-m);
  409.     position: absolute;
  410.     z-index: 1000;
  411.     border-radius: var(--link-border-radius);
  412.     text-transform: uppercase;
  413.     letter-spacing: 1px;
  414.     top: -150px;
  415.     left: 8px;
  416.     transition: 0.4s;
  417. }
  418.  
  419. .breakdance .dwc-skip-link .dwc-nav__link__text {
  420.     color: var(--skip-link-color);
  421. }
  422.  
  423. #dwc_header.dwc-sidebar {
  424.     top: 0;
  425.     z-index: 999;
  426.     background: var(--nav-bg);
  427.     transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
  428.     box-shadow: var(--sidebar-shadow);
  429. }
  430.  
  431.  
  432.  
  433. .breakdance .dwc-sidebar__logo-wrapper {
  434.     align-items: flex-start;
  435. }
  436.  
  437.  
  438. .breakdance .dwc-sidebar__nav {
  439.     height: 100%;
  440.     z-index: 1;
  441.     width: var(--sidebar-width);
  442.     position: relative;
  443. }
  444.  
  445. .breakdance .dwc-sidebar__nav:not(.builder-element.dwc-sidebar__nav) {
  446.     overflow: hidden;
  447. }
  448.  
  449. .breakdance .dwc-sidebar__nav__panel {
  450.     background: var(--nav-bg);
  451.     width: 100%;
  452.    height: calc(100% - 20px);
  453.     display: flex;
  454.     flex-direction: column;
  455.     transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
  456.     transform: translateX(0);
  457.     z-index: 1000;
  458.     padding-block: var(--panel-block-pad);
  459.     padding-top: 0;
  460. }
  461.  
  462. .dwc-mobile.breakdance .dwc-sidebar__nav__panel {
  463.       padding-bottom: 4rem;  
  464. }
  465.  
  466.  
  467. .dwc-sidebar__nav__panel:not(.builder-element.dwc-sidebar__nav__panel) {
  468.     overflow: hidden;
  469.     position: absolute !important;
  470. }
  471.  
  472.  
  473. .breakdance .dwc-sidebar__nav__panel:not(.builder-element.dwc-sidebar__nav__panel, .dwc-mobile *)::after {
  474.      content: '';
  475.     position: absolute;
  476.     bottom: -25px;
  477.     width: 138%;
  478.     height: 100px;
  479.     background: var(--nav-bg);
  480.     filter: blur(18px);
  481.     left: -50px;
  482.     right: 0;
  483.     pointer-events: none;
  484. }
  485.  
  486.  
  487. .dwc-sidebar__nav__panel:focus {
  488.     outline: none;
  489. }
  490.  
  491.  
  492. .dwc-nav__panel__inner {
  493.     width: 100%;
  494.     flex-grow: 1;
  495.     overflow-x: hidden;
  496.     overflow-y: auto;
  497.     overscroll-behavior: contain;
  498.     padding-inline: var(--pad-m)
  499. }
  500.  
  501. .breakdance .dwc-nav__panel__header {
  502.     width: 100%;
  503.     padding: 0.32rem var(--pad-m);
  504.     gap: var(--list-gap);
  505.     display: flex;
  506.     flex-direction: row;
  507.     justify-content: space-between;
  508.     align-items: center;
  509.     z-index: 2;
  510. }
  511.  
  512. .dwc-header-inner-wrap {
  513.     width: 100%;
  514.     z-index: 2;
  515.     background: var(--header-bg);
  516. }
  517.  
  518. .breakdance .dwc-nav__panel__title-wrap {
  519.     padding: var(--pad-s) var(--pad-xs);
  520.     width: 100%;
  521.     box-shadow: 0 -6px 10px 15px var(--nav-bg);
  522.     position: -webkit-sticky;
  523.     position: sticky;
  524.     top: -3px;
  525.     background-color: var(--panel-title-bg);
  526.     z-index: 1;
  527. }
  528.  
  529. .breakdance .bde-heading.dwc-nav__panel__title {
  530.     color: var(--panel-title-color);
  531.     font-size: var(--panel-title-size);
  532.     font-weight: 500;
  533.     letter-spacing: 1px;
  534. }
  535.  
  536. .breakdance .dwc-sidebar__nav__ul {
  537.     display: flex;
  538.     flex-direction: column;
  539.     width: 100%;
  540.     margin-top: 0;
  541.     padding-left: 0;
  542.     padding-block: var(--pad-m);
  543.     gap: var(--list-gap);
  544.     flex-grow: 1;
  545. }
  546.  
  547.  
  548. .breakdance .dwc-sidebar__nav__li {
  549.     list-style: none;
  550.     width: 100%;
  551.     position: relative;
  552.     border-radius: var(--link-border-radius)
  553. }
  554.  
  555. .dwc-current-menu-item {
  556.     background-color: var(--current-link-bg);
  557.     border-bottom: var(--current-link-underline);
  558. }
  559.  
  560.  
  561. .breakdance .dwc-sidebar__nav__panel-footer {
  562.     width: 100%;
  563.     padding-block: var(--pad-m);
  564.     gap: var(--link-gap);
  565.     z-index: 5;
  566.     padding-inline: var(--pad-m);
  567.  
  568.     border-top: var(--horizontal-line);
  569. }
  570.  
  571. .breakdance .dwc-sidebar__nav__panel-footer:not(.builder-element.dwc-sidebar__nav__panel-footer) {
  572.     box-shadow: 0 6px 24px 32px var(--nav-bg);
  573. }
  574.  
  575.  
  576. /* buttons and links */
  577.  
  578. .breakdance [role="button"].dwc-sidebar__nav__btn,
  579. .breakdance .dwc-sidebar__nav__link {
  580.     width: 100%;
  581.     display: flex !important;
  582.     flex-direction: row !important;
  583.     justify-content: flex-start;
  584.     flex-wrap: nowrap;
  585.     align-items: center !important;
  586.     padding: var(--link-pad-y) var(--link-pad-x);
  587.     gap: var(--link-gap);
  588.     text-align: left;
  589.     line-height: 1.3;
  590.     transition: outline 0s;
  591.     border-radius: var(--link-border-radius);
  592. }
  593.  
  594. .breakdance .dwc-nav__back-btn {
  595.     text-transform: uppercase;
  596.     font-weight: bold;
  597.     letter-spacing: 2px;
  598.     font-size: var(--panel-back-size);
  599. }
  600.  
  601. .breakdance .dwc-nav__home-btn {
  602.     width: auto;
  603.     padding: var(--pad-s);
  604.     margin: auto;
  605.     background: transparent;
  606.     border: none;
  607.     cursor: pointer;
  608.     border-radius: var(--link-border-radius);
  609.     position: relative;
  610. }
  611.  
  612. .breakdance .nav__home-btn__txt {
  613.     position: absolute;
  614.     clip: rect(0, 0, 0, 0);
  615.     font-size: 12px;
  616. }
  617.  
  618. .breakdance .dwc-sidebar__nav__btn,
  619. .breakdance .dwc-sidebar__dropdown-toggle [role="button"] {
  620.     outline: none;
  621.     cursor: pointer;
  622.     background: var(--link-bg);
  623.     border: none;
  624. }
  625.  
  626.  
  627.  
  628. .dwc-sidebar__dropdown-toggle .dwc-nav__link__icon {
  629.     transform: rotate(90deg);
  630.     transition: 0.4s
  631. }
  632.  
  633. .dwc-sidebar__dropdown-toggle [aria-expanded="true"] .dwc-nav__link__icon {
  634.     transform: rotate(270deg)
  635. }
  636.  
  637. .breakdance .dwc-sidebar__dropdown-content {
  638.     overflow: hidden;
  639.     transition: var(--sidebar-transition) cubic-bezier(0.22, 0.61, 0.36, 1);
  640.     padding-inline: var(--link-pad-x);
  641.     padding-block: 0;
  642.     background-color: var(--dropdown-content-bg);
  643.     width: 100%
  644. }
  645.  
  646. .dwc-sidebar__dropdown-content .dwc-sidebar__nav__ul {
  647.     padding-block: calc(var(--link-pad-y) * 0.8);
  648. }
  649.  
  650. .breakdance .dwc-sidebar__dropdown-content .dwc-sidebar__nav__li {
  651.     border: var(--dropdown-links-underline);
  652. }
  653.  
  654.  
  655. .breakdance .dwc-sidebar__dropdown-toggle {
  656.     width: 100%;
  657.     display: flex !important;
  658.     flex-direction: row !important;
  659.     justify-content: flex-start;
  660.     flex-wrap: nowrap;
  661.     align-items: center !important;
  662.     gap: var(--link-gap);
  663.     text-align: left;
  664.     line-height: 1.3;
  665.     padding-left: var(--link-pad-x);
  666.     position: relative;
  667. }
  668.  
  669.  
  670. .breakdance .dwc-sidebar__dropdown ul .dwc-nav__link__text,
  671. .breakdance .dwc-sidebar__dropdown [role="button"] {
  672.     transition: var(--sidebar-link-transition), outline 0s;
  673.     border-radius: var(--link-border-radius);
  674.     width: 100%;
  675. }
  676.  
  677. .breakdance .dwc-sidebar__dropdown [role="button"],
  678. .breakdance .dwc-sidebar__dropdown-toggle .dwc-nav__link__text {
  679.     padding: var(--link-pad-y) 0;
  680. }
  681.  
  682.  
  683. .breakdance .dwc-sidebar__dropdown-content ul {
  684.     padding-left: var(--dropdown-links-indent);
  685. }
  686.  
  687. .breakdance .dwc-sidebar__dropdown-toggle [role="button"] {
  688.     margin-left: auto;
  689.     flex-grow: 1;
  690.     padding-right: var(--link-pad-x);
  691.     position: absolute;
  692.     top: 0;
  693.     bottom: 0;
  694.     left: 0;
  695.     right: 0;
  696. }
  697.  
  698. .breakdance .dwc-sidebar__nav__li {
  699.     border-bottom: var(--link-underline);
  700. }
  701.  
  702. .breakdance .dwc-nav__back__text {
  703.     color: var(--panel-link-color)
  704. }
  705.  
  706.  
  707. .dwc-sidebar__nav__link:hover,
  708. .dwc-nav__home-btn:hover,
  709. [role="button"].dwc-sidebar__nav__btn:hover,
  710. .dwc-sidebar__dropdown-toggle:hover {
  711.     background: var(--link-hover-bg);
  712. }
  713.  
  714. .breakdance .dwc-sidebar__dropdown-content a {
  715.     background: var(--dropdown-links-bg);
  716.     color: var(--dropdown-links-color)
  717. }
  718.  
  719. .breakdance .dwc-sidebar__dropdown-content a:hover {
  720.     background: var(--dropdown-links-hover-bg);
  721.     color: var(--dropdown-links-hover-color)
  722. }
  723.  
  724. .breakdance [role="button"]:hover .dwc-nav__link__text,
  725. .breakdance .dwc-sidebar__dropdown-toggle:hover .dwc-nav__link__text,
  726. .breakdance [role="button"]:hover .dwc-nav__back__text,
  727. .breakdance .dwc-sidebar__nav__li:not(.dwc-sidebar__dropdown):hover .dwc-nav__link__text {
  728.     color: var(--link-hover-color);
  729. }
  730.  
  731. .breakdance .dwc-nav__link__text {
  732.     color: var(--panel-link-color);
  733.     font-size: var(--link-txt-size);
  734. }
  735.  
  736. .dwc-sidebar__nav__link::before {
  737.     content: '';
  738.     inset: 0;
  739.     position: absolute;
  740. }
  741.  
  742. .breakdance .bde-icon.dwc-nav__link__icon svg {
  743.     width: var(--nav-icon-size);
  744.     height: var(--nav-icon-size);
  745.     fill: var(--panel-icon-color)
  746. }
  747.  
  748. .dwc-nav__link__icon--chevron-right {
  749.     margin-left: auto;
  750. }
  751.  
  752.  
  753. .breakdance .bde-icon.dwc-nav__link__icon--chevron-right svg,
  754. .breakdance .bde-icon.dwc-nav__link__icon--chevron-left svg {
  755.     width: var(--chevron-size);
  756.     height: var(--chevron-size);
  757.     fill: var(--chevron-color);
  758. }
  759.  
  760. .breakdance [role="button"]:hover .bde-icon.dwc-nav__link__icon svg,
  761. .breakdance li:hover .bde-icon.dwc-nav__link__icon svg {
  762.     fill: var(--link-icon-hover-color) !important;
  763. }
  764.  
  765. .breakdance .dwc-sidebar__nav__list-img {
  766.     width: 100%;
  767.     aspect-ratio: 16/9;
  768.     object-fit: cover;
  769.     object-position: top center;
  770.     border-radius: var(--link-border-radius);
  771. }
  772.  
  773.  
  774. /* social links */
  775.  
  776. .breakdance .dwc-social-wrapper {
  777.     width: 100%;
  778.     gap: var(--list-gap);
  779. }
  780.  
  781. .breakdance .breakdance-link.dwc-social {
  782.     background: var(--social-bg);
  783.     padding-block: var(--link-pad-y);
  784.     padding-inline: var(--link-pad-x);
  785.     width: 100%;
  786.     border-radius: var(--link-border-radius);
  787.     display: flex;
  788.     flex-direction: row;
  789.     justify-content: flex-start;
  790.     align-items: center;
  791.     gap: 1.125rem;
  792.  
  793.  
  794. }
  795.  
  796. .dwc-social:hover {
  797.     background: var(--social-hover-bg);
  798. }
  799.  
  800. .breakdance .dwc-social__text {
  801.     line-height: 1;
  802.     font-size: var(--link-txt-size);
  803.     color: var(--social-color);
  804. }
  805.  
  806. .breakdance .dwc-social:hover .dwc-social__text {
  807.     color: var(--social-hover-color);
  808. }
  809.  
  810. .breakdance .bde-icon.dwc-social__icon svg {
  811.     fill: var(--social-icon-color);
  812.     width: var(--social-icon-size);
  813.     height: var(--social-icon-size);
  814. }
  815.  
  816. .breakdance .dwc-social:hover .bde-icon.dwc-social__icon svg {
  817.     fill: var(--social-icon-hover-color)
  818. }
  819.  
  820.  
  821. /*  FOCUS STYLES  */
  822.  
  823.  
  824. .dwc-skip-link:focus-visible {
  825.     position: absolute;
  826.     top: 8px;
  827.     left: 8px;
  828.     outline-color: var(--focus-outline-color);
  829.     outline-offset: var(--focus-outline-offset)
  830. }
  831.  
  832. .dwc-sidebar *:not(.dwc-sidebar .dwc-sidebar__nav__panel):focus-visible,
  833. .dwc-sidebar__nav-close-btn:focus-visible{
  834.     outline: solid var(--focus-outline-width) var(--focus-outline-color) !important;
  835.     outline-offset: var(--focus-outline-offset);
  836.     transition: 0s;
  837. }
  838.  
  839. .dwc-skip-link:focus:not(:focus-visible),
  840. .dwc-sidebar *:focus:not(:focus-visible),
  841. #dwc_header .dwc-sidebar__nav__btn:not(.dwc-nav__back-btn):focus-visible,
  842. header:focus-visible,
  843. header:focus {
  844.     outline: none !important;
  845. }
  846.  
  847. .dwc-sidebar li:not(.dwc-sidebar__dropdown):focus-within {
  848.     outline: solid var(--focus-outline-width) var(--focus-outline-color) !important;
  849. }
  850.  
  851. .dwc-sidebar li:focus-within:has(:focus:not(:focus-visible)),
  852. #dwc_header.dwc-sidebar li a:not(.dwc-sidebar__dropdown-toggle *):focus-visible {
  853.     outline: none !important;
  854. }
  855.  
  856. /* FOCUS STYLE END */
  857.  
  858.  
  859. .breakdance .dwc-slide-left {
  860.     transform: translateX(-100%);
  861.     z-index: 0;
  862. }
  863.  
  864. .breakdance .dwc-slide-right {
  865.     transform: translateX(75%);
  866.     z-index: 0;
  867.     opacity: 0;
  868. }
  869.  
  870.  
  871. /* mobile nav toggle */
  872. .dwc-nav-trigger {
  873.     border: none;
  874.     background: none;
  875.     padding: var(--pad-m)
  876. }
  877.  
  878.  
  879.  
  880. /* mobile menu toggle button*/
  881. .dwc-nav-trigger {
  882.     cursor: pointer;
  883.     position: relative;
  884.     min-width: 26px !important;
  885.     min-height: 0 !important;
  886. }
  887.  
  888. .dwc-nav-trigger::before {
  889.     left: 0;
  890.     right: 0;
  891.     transform: translateY(-5px);
  892. }
  893.  
  894. .dwc-nav-trigger::after {
  895.     left: 10px;
  896.     right: 0;
  897.     transform: translateY(5px);
  898. }
  899.  
  900. .dwc-nav-trigger::before,
  901. .dwc-nav-trigger:after {
  902.     content: '';
  903.     position: absolute;
  904.     transition: 0.4s 0.3s;
  905.     height: 3px;
  906.     background: var(--mobile-menu-trigger-color);
  907.     top: 50%;
  908.     border-radius: 50vw
  909. }
  910.  
  911.  
  912. .dwc-slide-nav-open .dwc-nav-trigger::before {
  913.     transform: translateY(0) rotate(45deg);
  914. }
  915.  
  916. .dwc-slide-nav-open .dwc-nav-trigger::after {
  917.     transform: translateY(0) rotate(-45deg);
  918.     left: 0;
  919. }
  920.  
  921. .builder-element.dwc-nav-trigger {
  922.  
  923.     width: 26px !important;
  924.     height: 26px !important;
  925. }
  926.  
  927. /*MEDIA QUERY - MOBILE*/
  928.  
  929. /*@media (max-width:1024px) {*/
  930.  
  931.  
  932.     /*header and menu on mobile*/
  933.  
  934.  
  935.     .dwc-mobile.breakdance .dwc-sidebar__nav:not(.builder-element.dwc-sidebar__nav) {
  936.         background: var(--nav-bg);
  937.         width: var(--sidebar-width);
  938.         position: fixed !important;
  939.         bottom: 0;
  940.         left: 0;
  941.         top: 0;      
  942.         overflow: hidden;
  943.         transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
  944.         min-height: 100vh;
  945.         min-height: 100dvb;
  946.     }
  947.  
  948.    .dwc-mobile.breakdance .dwc-sidebar__nav:not(.builder-element.dwc-sidebar__nav, .dwc-mobile.dwc-rtl *) {
  949.         transform: translateX(-100%);  
  950.     }
  951.  
  952.  
  953.    .dwc-mobile.breakdance .dwc-sidebar__nav__panel {
  954.    height: 100%;
  955.      padding-top: 100px;
  956.   }
  957.  
  958.  
  959.      .dwc-mobile.breakdance .dwc-sidebar__nav__panel:not(.builder-element.dwc-sidebar__nav__panel):not(.dwc-push-content *)::not(.dwc-offcanvas *) {
  960.         padding-top: 100px;
  961.         background: transparent;
  962.     }
  963.  
  964.      .dwc-mobile.breakdance .dwc-sidebar__nav__panel>div {
  965.         background: var(--nav-bg);
  966.     }
  967.  
  968.  
  969.      .dwc-mobile.breakdance .dwc-nav__link__text {
  970.         font-weight: 500;
  971.     }
  972.  
  973.      .dwc-mobile .dwc-sidebar__logo-wrapper {
  974.         width: auto;
  975.     }
  976.  
  977.  
  978.      .dwc-mobile .dwc-mobile-menu-overlay {
  979.         background: var(--overlay-bg);
  980.         position: fixed !important;
  981.         top: 0;
  982.         bottom: 0;
  983.         left: 0;
  984.         right: 0;
  985.         pointer-events: none;
  986.         opacity: 0;
  987.         transition: 0.4s 0.2s;
  988.     }
  989.  
  990.      .dwc-mobile.dwc-slide-nav-open .dwc-mobile-menu-overlay {
  991.         pointer-events: auto;
  992.         opacity: var(--overlay-opacity);
  993.     }
  994.  
  995.  
  996.     /* inside Breakdance start*/
  997. @media (max-width:1024px) {
  998.    
  999.     .builder-element.dwc-sidebar__nav {
  1000.         top: 120px;
  1001.         transform: translateX(0);
  1002.         border-top: dashed 1px gray;
  1003.         position: static;
  1004.         overflow: visible;
  1005.     }
  1006.  
  1007.     .builder-element.dwc-sidebar {
  1008.         background: transparent;
  1009.     }
  1010.  
  1011.  
  1012.     /*   inside Breakdance end  */
  1013.  
  1014. }
  1015.  
  1016.  
  1017. @media (max-height: 667px){
  1018.  
  1019.  
  1020.  
  1021. .dwc-sidebar__nav__panel:not(.ng-scope .dwc-sidebar__nav__panel) {
  1022.     overflow-y:scroll;
  1023.     min-height: 100vh;
  1024. }
  1025.  
  1026. .dwc-nav__panel__inner {
  1027.    overflow: hidden;
  1028. flex-shrink: 0;
  1029. }
  1030.  
  1031.  
  1032.  
  1033. }
  1034.  
  1035.  
  1036. /* MEDIA QUERY - MOBILE ENDS */
  1037.  
  1038. /*SCROLLBARS*/
  1039. .dwc-nav__panel__inner::-webkit-scrollbar-track {
  1040.     border-radius: 5px;
  1041.     background-color: transparent;
  1042. }
  1043.  
  1044. .dwc-nav__panel__inner::-webkit-scrollbar {
  1045.     width: 5px;
  1046.     background-color: transparent;
  1047. }
  1048.  
  1049. .dwc-nav__panel__inner::-webkit-scrollbar-thumb {
  1050.     border-radius: 5px;
  1051.     background-color: #3c3c3c;
  1052. }
  1053.  
  1054. /* SCROLLBARS END */
  1055.  
  1056. /* FADE IN OFFCANVS */
  1057.  
  1058. .dwc-offcanvas-header {
  1059.     animation: dwc-header-fade-in 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.4s both;
  1060. }
  1061.  
  1062. .dwc-offcanvas-header~section, .dwc-offcanvas-header~main {
  1063.     animation: dwc-header-fade-in 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.4s both;
  1064. }
  1065.  
  1066. @keyframes dwc-header-fade-in {
  1067.     0% {
  1068.         opacity: 0;
  1069.     }
  1070.  
  1071.     100% {
  1072.  
  1073.         opacity: 1;
  1074.     }
  1075. }
  1076.  
  1077.  
  1078.  
  1079. /* INSIDE Breakdance */
  1080.  
  1081. [data-breakdance-foreign-document] header {
  1082.     display: none;
  1083. }
  1084.  
  1085. .breakdance [data-breakdance-foreign-document] footer.bde-section,
  1086. .breakdance [data-breakdance-foreign-document]~.bde-section,
  1087. #breakdance_canvas .bde-section:not(.bde-section.dwc-sidebar) {
  1088.     width: 100%;
  1089. }
  1090.  
  1091. #dwc_header.builder-element {
  1092.     box-shadow: none;
  1093.     outline: none;
  1094.     background: transparent;
  1095. }
  1096.  
  1097. .builder-element.dwc-nav-trigger .breakdance-empty-container {
  1098.     display: none;
  1099. }
  1100.  
  1101. .builder-element.dwc-sidebar__nav__panel,
  1102. .builder-element.dwc-sidebar {
  1103.     position: static;
  1104.     outline: gray dashed 3px;
  1105.     padding-bottom: 20px;
  1106.     min-height: min(100vh, 600px)
  1107. }
  1108.  
  1109. .builder-element.dwc-sidebar__nav__panel:hover {
  1110.     outline: yellow solid 3px;
  1111.     z-index: 100000
  1112. }
  1113.  
  1114. .builder-element.dwc-slide-right {
  1115.     opacity: 1;
  1116.     transform: translateX(0);
  1117. }
  1118.  
  1119. [role="button"].builder-element.dwc-sidebar__nav__btn,
  1120. .builder-element.dwc-sidebar__nav__link,
  1121. .builder-element.dwc-sidebar__nav__panel {
  1122.     position: relative;
  1123. }
  1124.  
  1125. .builder-element.dwc-sidebar .dwc-sidebar__nav__btn:after {
  1126.     content: 'TO ' '<' attr(data-title) '>' ' PANEL';
  1127.     position: absolute;
  1128.     top: 80%;
  1129.     left: 48px;
  1130.     font-size: 8px;
  1131.     font-weight: bold;
  1132.     color: var(--label-color);
  1133.     letter-spacing: 1px;
  1134. }
  1135.  
  1136. .builder-element.dwc-sidebar [role="button"].dwc-nav__back-btn::after {
  1137.     content: 'To previous panel';
  1138. }
  1139.  
  1140. .builder-element.dwc-sidebar [role="button"].dwc-nav__home-btn::after {
  1141.     content: 'HOME';
  1142.     position: absolute;
  1143.     top: 80%;
  1144.     left: 50%;
  1145.     right: auto;
  1146.     transform: translateX(-50%);
  1147.     white-space: nowrap;
  1148.     font-size: 8px;
  1149.     font-weight: bold;
  1150.     color: var(--label-color);
  1151.     letter-spacing: 1px;
  1152. }
  1153.  
  1154. .builder-element.dwc-sidebar__nav__panel::after {
  1155.     content: attr(data-title) ' panel';
  1156.     position: absolute;
  1157.     top: 0;
  1158.     left: 100%;
  1159.     font-size: 18px;
  1160.     font-weight: bold;
  1161.     background: white;
  1162.     padding-inline: 2rem;
  1163.     letter-spacing: 1px;
  1164.     white-space: nowrap;
  1165.     writing-mode: vertical-lr;
  1166.     color: black;
  1167. }
  1168.  
  1169. /* CUSTOM CSS*/
  1170. /* HAMBURGER MENU 3 LINES */
  1171.  
  1172. .dwc-slide-nav-open .dwc-nav-trigger {
  1173.     height: 0;
  1174.   transition: 0.4s ease;
  1175. }
  1176.  
  1177. .dwc-nav-trigger {  
  1178.     padding: 0;
  1179.     transition: 0.4s ease 0.4s;
  1180.     background-color: white;
  1181.     height: 3px;
  1182. }
  1183.  
  1184. .dwc-nav-trigger::after {
  1185.     left: 0;  
  1186.     transform: translateY(6px);
  1187. }
  1188.  
  1189. .dwc-nav-trigger::before {  
  1190.     transform: translateY(-10px);
  1191. }
  1192.  
  1193.  
  1194. /* STICKY MOBILE MENU */
  1195.  
  1196. @media (max-width: 1024px){
  1197. #dwc_header.dwc-sidebar {  
  1198.     position: sticky;
  1199.     top: 0;
  1200. }
  1201.  
  1202.   /* SET TOP PADDING FOR FIXED HEADER ON MOBILE*/
  1203.    .breakdance .dwc-site-wrapper>.bde-section:first-child:not(header,.dwc-offcanvas .bde-section),
  1204.     .breakdance>.bde-section:first-child:not(header,.dwc-offcanvas .bde-section),
  1205.     .breakdance>.bde-globalblock>.bde-section:first-child:not(header,.dwc-offcanvas .bde-section),
  1206.     .breakdance>.bde-themeless-template-content-area>.bde-section:first-child:not(header,.dwc-offcanvas .bde-section,.bde-globalblock ~ .bde-themeless-template-content-area section){
  1207.         padding-top: 60px;
  1208.       padding-top: var(--dwc-header-height);
  1209.        
  1210.       }
  1211.  
  1212.  
  1213. }
  1214.  
  1215. /* MENU BOTTOM SPACING */
  1216. .breakdance .dwc-sidebar__nav__panel {
  1217.       padding-bottom: 4rem;  
  1218. }
  1219.  
  1220.  
  1221. .dwc-sidebar__nav-close-btn::before,
  1222. .dwc-sidebar__nav-close-btn::after{
  1223.         content: '';
  1224.     position: absolute;
  1225.     transition: 0.4s 0.3s;
  1226.     height: 3px;
  1227.     background: var(--dwc-closebtn-color);  
  1228.     border-radius: 50vw;
  1229.     z-index: 999999;  
  1230.     left:0;
  1231.     right: 0;
  1232.     }
  1233.  
  1234.  
  1235. .dwc-sidebar__nav-close-btn::before {  
  1236.     transform: rotate(45deg);
  1237. }
  1238.  
  1239. .dwc-sidebar__nav-close-btn::after {    
  1240.     transform: rotate(-45deg);  
  1241. }
  1242.  
  1243. .breakdance .dwc-sidebar__nav-close-btn {  
  1244. position: absolute;
  1245.     top:8px;
  1246.     right: 8px;
  1247.     width: 30px;
  1248.   aspect-ratio: 1;
  1249.   cursor: pointer;
  1250.   z-index: 9999;
  1251.   justify-content: center;
  1252. }
  1253.  
  1254. .breakdance .dwc-sidebar__nav-close-btn:not(.dwc-offcanvas *, .dwc-push-content *){
  1255.  display: none;
  1256. }
  1257.  
  1258. /* ACTIVE ELEMENT INSIDE BUILDER*/
  1259. .dwc-sidebar .breakdance--active-element {
  1260.     outline: orangered 2px dotted !important;
  1261. }
  1262.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!