141 lines
2.9 KiB
SCSS
141 lines
2.9 KiB
SCSS
////////////////////////////////////////////////////////////////////////////////
|
|
// 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;
|
|
}
|
|
}
|