123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- ////////////////////////////////////////////////////////////////////////////////
- // RTL Styles Variables
- ////////////////////////////////////////////////////////////////////////////////
- $default: auto;
- ////////////////////////////////////////////////////////////////////////////////
- // TABLE OF CONTENTS
- ////////////////////////////////////////////////////////////////////////////////
- #toc>ul>li>a>span {
- float: left;
- }
- .toc-wrapper {
- transition: right 0.3s ease-in-out !important;
- left: $default !important;
- #{right}: 0;
- }
- .toc-h2 {
- padding-#{right}: $nav-padding + $nav-indent;
- }
- #nav-button {
- #{right}: 0;
- transition: right 0.3s ease-in-out;
- &.open {
- right: $nav-width
- }
- }
- ////////////////////////////////////////////////////////////////////////////////
- // PAGE LAYOUT AND CODE SAMPLE BACKGROUND
- ////////////////////////////////////////////////////////////////////////////////
- .page-wrapper {
- margin-#{left}: $default !important;
- margin-#{right}: $nav-width;
- .dark-box {
- #{right}: $default;
- #{left}: 0;
- }
- }
- .lang-selector {
- width: $default !important;
- a {
- float: right;
- }
- }
- ////////////////////////////////////////////////////////////////////////////////
- // CODE SAMPLE STYLES
- ////////////////////////////////////////////////////////////////////////////////
- .content {
- &>h1,
- &>h2,
- &>h3,
- &>h4,
- &>h5,
- &>h6,
- &>p,
- &>table,
- &>ul,
- &>ol,
- &>aside,
- &>dl {
- margin-#{left}: $examples-width;
- margin-#{right}: $default !important;
- }
- &>ul,
- &>ol {
- padding-#{right}: $main-padding + 15px;
- }
- table {
- th,
- td {
- text-align: right;
- }
- }
- dd {
- margin-#{right}: 15px;
- }
- aside {
- aside:before {
- padding-#{left}: 0.5em;
- }
- .search-highlight {
- background: linear-gradient(to top right, #F7E633 0%, #F1D32F 100%);
- }
- }
- pre,
- blockquote {
- float: left !important;
- clear: left !important;
- }
- }
- ////////////////////////////////////////////////////////////////////////////////
- // TYPOGRAPHY
- ////////////////////////////////////////////////////////////////////////////////
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- p,
- aside {
- text-align: right;
- direction: rtl;
- }
- .toc-wrapper {
- text-align: right;
- direction: rtl;
- font-weight: 100 !important;
- }
- ////////////////////////////////////////////////////////////////////////////////
- // RESPONSIVE DESIGN
- ////////////////////////////////////////////////////////////////////////////////
- @media (max-width: $tablet-width) {
- .toc-wrapper {
- #{right}: -$nav-width;
- &.open {
- #{right}: 0;
- }
- }
- .page-wrapper {
- margin-#{right}: 0;
- }
- }
- @media (max-width: $phone-width) {
- %left-col {
- margin-#{left}: 0;
- }
- }
|