diff --git a/assets/css/modules/_tabs.scss b/assets/css/modules/_tabs.scss index 8003a9f..570769d 100644 --- a/assets/css/modules/_tabs.scss +++ b/assets/css/modules/_tabs.scss @@ -75,7 +75,7 @@ display: none; } -/* Accordion responsive breakpoint */ +// Accordion responsive breakpoint. @media only screen and (max-width: 782px) { .ds-tabs-nav { display: none; @@ -83,6 +83,26 @@ .ds-tabs-accordion-title { display: block; + + a { + &:before { + display: inline-block; + vertical-align: middle; + margin: 0 0.35em 0 0; + font-family: dashicons; + font-size: 1.5rem; + content: '\f140'; + line-height: 1em; + } + } + + &.ds-tabs-state-active { + a { + &:before { + transform: rotate(-90deg); + } + } + } } } @@ -99,7 +119,7 @@ /* Accordion anchor */ .ds-tabs-accordion-title .ds-tabs-anchor { display: block; - padding: 10px; + padding: 1em 0; font-weight: bold; font-weight: 600; text-decoration: none; @@ -125,3 +145,28 @@ display: block; } } + +// RTL styles. +.rtl { + + // Accordion responsive breakpoint. + @media only screen and (max-width: 782px) { + + .ds-tabs-accordion-title { + a { + &:before { + margin: 0 0 0 0.35em; + } + } + + &.ds-tabs-state-active { + a { + &:before { + transform: rotate(90deg); + margin: 0 0 0.35em 0; + } + } + } + } + } +} diff --git a/assets/css/widgets.css b/assets/css/widgets.css index 98e58ec..68244f8 100644 --- a/assets/css/widgets.css +++ b/assets/css/widgets.css @@ -73,7 +73,6 @@ display: none; } -/* Accordion responsive breakpoint */ @media only screen and (max-width: 782px) { .ds-tabs-nav { display: none; @@ -81,6 +80,19 @@ .ds-tabs-accordion-title { display: block; } + .ds-tabs-accordion-title a:before { + display: inline-block; + vertical-align: middle; + margin: 0 0.35em 0 0; + font-family: dashicons; + font-size: 1.5rem; + content: '\f140'; + line-height: 1em; + } + .ds-tabs-accordion-title.ds-tabs-state-active a:before { + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + } } /* Tabs container */ @@ -96,7 +108,7 @@ /* Accordion anchor */ .ds-tabs-accordion-title .ds-tabs-anchor { display: block; - padding: 10px; + padding: 1em 0; font-weight: bold; font-weight: 600; text-decoration: none; @@ -118,6 +130,17 @@ display: block; } +@media only screen and (max-width: 782px) { + .rtl .ds-tabs-accordion-title a:before { + margin: 0 0 0 0.35em; + } + .rtl .ds-tabs-accordion-title.ds-tabs-state-active a:before { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + margin: 0 0 0.35em 0; + } +} + #dashboard-widgets #ds-widget h3, #dashboard-widgets #ds-widget h4, #dashboard-widgets #ds-widget p, diff --git a/assets/css/widgets.min.css b/assets/css/widgets.min.css index ea299ee..6c02a5e 100644 --- a/assets/css/widgets.min.css +++ b/assets/css/widgets.min.css @@ -1 +1 @@ -.ds-tabs-nav{width:100%;margin:0;padding:0 0.25em;list-style:none;border-bottom:solid 1px #ccd0d4}.ds-tabs-nav li{display:inline-block;top:1px;margin:0;border:solid 1px #ccd0d4;border-bottom:none}.ds-tabs-nav li a{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0.425em 0.65em;font-weight:bold;font-weight:600;text-decoration:none}.ds-tabs-nav li a:focus{-webkit-box-shadow:none;box-shadow:none}.ds-tabs-nav li.ds-tabs-state-active{border-bottom:solid 1px #f1f1f1}.ds-tabs-nav li.ds-tabs-state-active a{background-color:unset;color:unset}.ds-tabs-nav li.ds-tabs-state-disabled{opacity:0.5}.ds-tabs-panel{display:none;padding:0.5em 0}.ds-tabs-panel.ds-tabs-state-active{display:block}.ds-tabs-panel a{text-decoration:none}.ds-tabs-accordion-title{display:none}@media only screen and (max-width: 782px){.ds-tabs-nav{display:none}.ds-tabs-accordion-title{display:block}}.ds-tabs{position:relative}.ds-tabs-nav .ds-tabs-tab{position:relative}.ds-tabs-accordion-title .ds-tabs-anchor{display:block;padding:10px;font-weight:bold;font-weight:600;text-decoration:none;font-size:14px;border-top-right-radius:4px;border-top-left-radius:4px}.ds-tabs-accordion-title.ds-tabs-state-disabled{opacity:0.5}.no-js .ds-tabs-nav{display:none}.no-js .ds-tabs-panel{display:block}#dashboard-widgets #ds-widget h3,#dashboard-widgets #ds-widget h4,#dashboard-widgets #ds-widget p,#dashboard-widgets #ds-widget ul,#dashboard-widgets #ds-widget ol{margin:0.75em 0 0}#dashboard-widgets #ds-widget .button{vertical-align:middle}#dashboard-widgets #ds-widget p.description{font-style:italic;line-height:1.3}#dashboard-widgets #ds-widget li{margin:0;margin-top:0.325em}#dashboard-widgets #ds-widget .ds-widget-search-fields{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}#dashboard-widgets #ds-widget .ds-widget-search-fields input[type="search"]{width:100%;max-width:240px;margin-right:0.35em}#dashboard-widgets #ds-widget .ds-widget-section{max-width:420px}#dashboard-widgets #ds-widget .ds-widget-section h3,#dashboard-widgets #ds-widget .ds-widget-section h4{font-size:1em;font-weight:bold;font-weight:600}#dashboard-widgets #ds-widget .ds-widget-section ul.ds-content-list{display:-ms-grid;display:grid;-ms-grid-columns:(minmax(10px, 1fr))[2];grid-template-columns:repeat(2, minmax(10px, 1fr));grid-gap:8px}#dashboard-widgets #ds-widget .ds-widget-section ul.ds-content-list li{margin:0}#dashboard-widgets #ds-widget .ds-widget-section div.ds-widget-divided-section:not(:first-of-type){margin-top:1em;padding-top:0.5em;border-top:solid 1px #ccd0d4}#dashboard-widgets #ds-widget .ds-widget-update-count{display:inline-block;vertical-align:top;-webkit-box-sizing:border-box;box-sizing:border-box;margin:1px 0 -1px 2px;padding:0 5px;min-width:18px;height:18px;border-radius:9px;background-color:#f56e28;color:#fff;font-size:11px;line-height:1.6;text-align:center}#dashboard-widgets #ds-widget .ds-widget-details-list ul{list-style:disc;margin-left:1em}#dashboard-widgets #ds-widget .ds-user-greeting{padding-top:1em;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#dashboard-widgets #ds-widget .ds-user-greeting figure{margin:0 1em 0 0}#dashboard-widgets #ds-widget .ds-user-greeting figure img{display:block;width:100%;height:auto;max-width:48px;border-radius:50%}#dashboard-widgets #ds-widget .ds-user-greeting h4,#dashboard-widgets #ds-widget .ds-user-greeting p{margin:0}#dashboard-widgets #ds-widget .ds-cpt-icons{display:inline-block;width:20px;height:20px;vertical-align:middle}#dashboard-widgets #ds-widget .ds-search-engines{color:#f56e28;font-weight:bold;font-weight:600;text-decoration:underline}#dashboard-widgets #ds-widget .ds-search-engines:hover{text-decoration:none}#dashboard-widgets #ds-widget .ds-widget-link-button{margin-top:1.5em}.ds-modal h4,.ds-modal h5{margin:0.75em 0 0;font-size:1em}.ds-modal h4 ~ div,.ds-modal h5 ~ div{margin-top:1em}.ds-modal .description{margin:0.75em 0 0;font-style:italic;line-height:1.3}.ds-modal .dev-reference-list{list-style:unset;margin-left:1em}.ds-modal-bio-heading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0}.ds-modal-bio-heading figure{margin:0;margin-right:0.5em}.ds-modal-bio-heading figure img{display:block;max-width:36px;height:auto;border-radius:50%}.ds-modal-bio-heading p{margin:0;font-size:1rem;line-height:1}.rtl #dashboard-widgets #ds-widget .ds-widget-details-list ul{margin-left:auto;margin-right:1em}.rtl #dashboard-widgets #ds-widget .ds-user-greeting figure{margin:0 0 0 1em}.rtl #dashboard-widgets #ds-widget .ds-widget-search-fields input[type="search"]{margin-right:auto;margin-left:0.35em}.rtl .ds-modal .dev-reference-list{margin-left:auto;margin-right:1em}.rtl .ds-modal-bio-heading figure{margin:0;margin-left:0.5em}@media screen and (max-width: 782px){#dashboard-widgets #ds-widget .button{margin-bottom:0}} +.ds-tabs-nav{width:100%;margin:0;padding:0 0.25em;list-style:none;border-bottom:solid 1px #ccd0d4}.ds-tabs-nav li{display:inline-block;top:1px;margin:0;border:solid 1px #ccd0d4;border-bottom:none}.ds-tabs-nav li a{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0.425em 0.65em;font-weight:bold;font-weight:600;text-decoration:none}.ds-tabs-nav li a:focus{-webkit-box-shadow:none;box-shadow:none}.ds-tabs-nav li.ds-tabs-state-active{border-bottom:solid 1px #f1f1f1}.ds-tabs-nav li.ds-tabs-state-active a{background-color:unset;color:unset}.ds-tabs-nav li.ds-tabs-state-disabled{opacity:0.5}.ds-tabs-panel{display:none;padding:0.5em 0}.ds-tabs-panel.ds-tabs-state-active{display:block}.ds-tabs-panel a{text-decoration:none}.ds-tabs-accordion-title{display:none}@media only screen and (max-width: 782px){.ds-tabs-nav{display:none}.ds-tabs-accordion-title{display:block}.ds-tabs-accordion-title a:before{display:inline-block;vertical-align:middle;margin:0 0.35em 0 0;font-family:dashicons;font-size:1.5rem;content:'\f140';line-height:1em}.ds-tabs-accordion-title.ds-tabs-state-active a:before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}.ds-tabs{position:relative}.ds-tabs-nav .ds-tabs-tab{position:relative}.ds-tabs-accordion-title .ds-tabs-anchor{display:block;padding:1em 0;font-weight:bold;font-weight:600;text-decoration:none;font-size:14px;border-top-right-radius:4px;border-top-left-radius:4px}.ds-tabs-accordion-title.ds-tabs-state-disabled{opacity:0.5}.no-js .ds-tabs-nav{display:none}.no-js .ds-tabs-panel{display:block}@media only screen and (max-width: 782px){.rtl .ds-tabs-accordion-title a:before{margin:0 0 0 0.35em}.rtl .ds-tabs-accordion-title.ds-tabs-state-active a:before{-webkit-transform:rotate(90deg);transform:rotate(90deg);margin:0 0 0.35em 0}}#dashboard-widgets #ds-widget h3,#dashboard-widgets #ds-widget h4,#dashboard-widgets #ds-widget p,#dashboard-widgets #ds-widget ul,#dashboard-widgets #ds-widget ol{margin:0.75em 0 0}#dashboard-widgets #ds-widget .button{vertical-align:middle}#dashboard-widgets #ds-widget p.description{font-style:italic;line-height:1.3}#dashboard-widgets #ds-widget li{margin:0;margin-top:0.325em}#dashboard-widgets #ds-widget .ds-widget-search-fields{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}#dashboard-widgets #ds-widget .ds-widget-search-fields input[type="search"]{width:100%;max-width:240px;margin-right:0.35em}#dashboard-widgets #ds-widget .ds-widget-section{max-width:420px}#dashboard-widgets #ds-widget .ds-widget-section h3,#dashboard-widgets #ds-widget .ds-widget-section h4{font-size:1em;font-weight:bold;font-weight:600}#dashboard-widgets #ds-widget .ds-widget-section ul.ds-content-list{display:-ms-grid;display:grid;-ms-grid-columns:(minmax(10px, 1fr))[2];grid-template-columns:repeat(2, minmax(10px, 1fr));grid-gap:8px}#dashboard-widgets #ds-widget .ds-widget-section ul.ds-content-list li{margin:0}#dashboard-widgets #ds-widget .ds-widget-section div.ds-widget-divided-section:not(:first-of-type){margin-top:1em;padding-top:0.5em;border-top:solid 1px #ccd0d4}#dashboard-widgets #ds-widget .ds-widget-update-count{display:inline-block;vertical-align:top;-webkit-box-sizing:border-box;box-sizing:border-box;margin:1px 0 -1px 2px;padding:0 5px;min-width:18px;height:18px;border-radius:9px;background-color:#f56e28;color:#fff;font-size:11px;line-height:1.6;text-align:center}#dashboard-widgets #ds-widget .ds-widget-details-list ul{list-style:disc;margin-left:1em}#dashboard-widgets #ds-widget .ds-user-greeting{padding-top:1em;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#dashboard-widgets #ds-widget .ds-user-greeting figure{margin:0 1em 0 0}#dashboard-widgets #ds-widget .ds-user-greeting figure img{display:block;width:100%;height:auto;max-width:48px;border-radius:50%}#dashboard-widgets #ds-widget .ds-user-greeting h4,#dashboard-widgets #ds-widget .ds-user-greeting p{margin:0}#dashboard-widgets #ds-widget .ds-cpt-icons{display:inline-block;width:20px;height:20px;vertical-align:middle}#dashboard-widgets #ds-widget .ds-search-engines{color:#f56e28;font-weight:bold;font-weight:600;text-decoration:underline}#dashboard-widgets #ds-widget .ds-search-engines:hover{text-decoration:none}#dashboard-widgets #ds-widget .ds-widget-link-button{margin-top:1.5em}.ds-modal h4,.ds-modal h5{margin:0.75em 0 0;font-size:1em}.ds-modal h4 ~ div,.ds-modal h5 ~ div{margin-top:1em}.ds-modal .description{margin:0.75em 0 0;font-style:italic;line-height:1.3}.ds-modal .dev-reference-list{list-style:unset;margin-left:1em}.ds-modal-bio-heading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0}.ds-modal-bio-heading figure{margin:0;margin-right:0.5em}.ds-modal-bio-heading figure img{display:block;max-width:36px;height:auto;border-radius:50%}.ds-modal-bio-heading p{margin:0;font-size:1rem;line-height:1}.rtl #dashboard-widgets #ds-widget .ds-widget-details-list ul{margin-left:auto;margin-right:1em}.rtl #dashboard-widgets #ds-widget .ds-user-greeting figure{margin:0 0 0 1em}.rtl #dashboard-widgets #ds-widget .ds-widget-search-fields input[type="search"]{margin-right:auto;margin-left:0.35em}.rtl .ds-modal .dev-reference-list{margin-left:auto;margin-right:1em}.rtl .ds-modal-bio-heading figure{margin:0;margin-left:0.5em}@media screen and (max-width: 782px){#dashboard-widgets #ds-widget .button{margin-bottom:0}}