Remove old styles from rtl.scss. Add new styles to fix some positioning.
This commit is contained in:
Simon Cossar
parent
9b7f98edc5
commit
4b8ad7637c
|
|
@ -295,6 +295,7 @@ GEM
|
||||||
rack (>= 1.1, < 2.0)
|
rack (>= 1.1, < 2.0)
|
||||||
qunit-rails (0.0.7)
|
qunit-rails (0.0.7)
|
||||||
railties
|
railties
|
||||||
|
r2 (0.2.5)
|
||||||
rack (1.5.2)
|
rack (1.5.2)
|
||||||
rack-mini-profiler (0.9.3)
|
rack-mini-profiler (0.9.3)
|
||||||
rack (>= 1.1.3)
|
rack (>= 1.1.3)
|
||||||
|
|
@ -511,6 +512,7 @@ DEPENDENCIES
|
||||||
pry-rails
|
pry-rails
|
||||||
puma
|
puma
|
||||||
qunit-rails
|
qunit-rails
|
||||||
|
r2 (~> 0.2.5)
|
||||||
rack-mini-profiler
|
rack-mini-profiler
|
||||||
rack-protection
|
rack-protection
|
||||||
rails
|
rails
|
||||||
|
|
|
||||||
|
|
@ -1,389 +1,33 @@
|
||||||
.rtl {
|
// Right to left styles.
|
||||||
|
// *** These styles are all going to be flipped by the r2 gem ***
|
||||||
#main {
|
// There may be a 'do not flip' flag that can be used, but I haven't found it.
|
||||||
direction: rtl;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn .fa {
|
|
||||||
margin-left: 7px;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#topic-footer-buttons .btn {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.caret {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0px;
|
|
||||||
height: 0px;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-top: 4px solid #333;
|
|
||||||
border-right: 4px solid transparent;
|
|
||||||
border-left: 4px solid transparent;
|
|
||||||
content: "";
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#topic-title h1 a.edit-topic {
|
|
||||||
font-size: .9em;
|
|
||||||
position: absolute;
|
|
||||||
margin-right: 8px;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.post-controls .create i {
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn.no-text .fa {
|
|
||||||
margin-left: 0px;
|
|
||||||
line-height: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#show-topic-admin {
|
|
||||||
padding: 5px 8px;
|
|
||||||
margin-top: 5px;
|
|
||||||
left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#topic-title .star {
|
|
||||||
font-size: 1.429em;
|
|
||||||
margin-top: 6px;
|
|
||||||
margin-left: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.star {
|
|
||||||
display: inline-block;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-meta-data-inside {
|
|
||||||
margin-top: -22px;
|
|
||||||
float: left;
|
|
||||||
font-size: 0.857em;
|
|
||||||
}
|
|
||||||
.post-info a {
|
|
||||||
color: #B3B3B3;
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.topic-meta-data {
|
|
||||||
float: right;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.span14 {
|
|
||||||
width: 70%;
|
|
||||||
padding-right: 1%;
|
|
||||||
}
|
|
||||||
.topic-body {
|
|
||||||
border-top: 1px solid #E6E6E6;
|
|
||||||
float: right;
|
|
||||||
position: relative;
|
|
||||||
padding: 10px 0px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.reply-new {
|
|
||||||
position: absolute;
|
|
||||||
color: #8C8C8C;
|
|
||||||
margin-top: -2px;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-new i {
|
|
||||||
font-size: 0.857em;
|
|
||||||
margin-left: 5px;
|
|
||||||
background: none repeat scroll 0% 0% #FFF;
|
|
||||||
border: 1px solid #E6E6E6;
|
|
||||||
padding: 2px 4px;
|
|
||||||
border-radius: 20px;
|
|
||||||
transition: all 0.15s linear 0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gutter .post-links {
|
|
||||||
list-style-type: none;
|
|
||||||
padding-right: 19px;
|
|
||||||
position: relative;
|
|
||||||
margin-right: 5px;
|
|
||||||
line-height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.dropdown-menu a > div {
|
|
||||||
margin-right: 26px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu .icon {
|
|
||||||
margin-top: 3px;
|
|
||||||
float: right;
|
|
||||||
font-size: 1.286em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-list th, .topic-list td {
|
|
||||||
padding: 12px 5px;
|
|
||||||
line-height: 1.25;
|
|
||||||
text-align: right;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-admin-menu {
|
|
||||||
background-color: #FFF;
|
|
||||||
width: 205px;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid #E6E6E6;
|
|
||||||
position: fixed;
|
|
||||||
top: 70px;
|
|
||||||
z-index: 1000;
|
|
||||||
left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-admin {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
#share-link .link {
|
|
||||||
margin-right: 2px;
|
|
||||||
float: left;
|
|
||||||
font-size: 1.429em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#share-link .social-link {
|
|
||||||
margin-right: 2px;
|
|
||||||
margin-left: 8px;
|
|
||||||
float: right;
|
|
||||||
font-size: 1.571em;
|
|
||||||
}
|
|
||||||
|
|
||||||
body .radio input[type="radio"], body .checkbox input[type="checkbox"] {
|
|
||||||
float: right;
|
|
||||||
margin-right: -18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body .radio, body .checkbox {
|
|
||||||
min-height: 18px;
|
|
||||||
padding-right: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header .close {
|
|
||||||
float: left;
|
|
||||||
font-size: 1.429em;
|
|
||||||
margin: 10px 10px 0px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #B3B3B3;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#reply-control .wmd-controls .textarea-wrapper {
|
|
||||||
padding-left: 5px;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
#reply-control .wmd-controls .preview-wrapper {
|
|
||||||
padding-right: 5px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#reply-control #wmd-button-bar {
|
|
||||||
top: 0px;
|
|
||||||
position: absolute;
|
|
||||||
border-bottom: 1px solid #E6E6E6;
|
|
||||||
background-color: #FFF;
|
|
||||||
z-index: 100;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#reply-control .toggle-preview {
|
|
||||||
right: auto;
|
|
||||||
left: 5px;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
#reply-control a.cancel {
|
|
||||||
text-decoration: underline;
|
|
||||||
padding-right: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#reply-control .toggler {
|
|
||||||
display: block;
|
|
||||||
width: 13px;
|
|
||||||
height: 13px;
|
|
||||||
left: 13px;
|
|
||||||
position: absolute;
|
|
||||||
font-size: 1.071em;
|
|
||||||
color: #333;
|
|
||||||
text-decoration: none;
|
|
||||||
right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-header .title {
|
|
||||||
display: table;
|
|
||||||
float: right;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-header .panel {
|
|
||||||
float: left;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-header .icons > li {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-header .icons {
|
|
||||||
float: right;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0px 0px 0px 5px;
|
|
||||||
list-style: none outside none;
|
|
||||||
transition: all linear 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-pills > li {
|
|
||||||
float: right;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#navigation-bar .has-icon span:before {
|
|
||||||
margin-left: 4px;
|
|
||||||
font: 1.071em/0.9 "FontAwesome";
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-controls .btn {
|
|
||||||
float: left;
|
|
||||||
margin-right: 8px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 1.143em;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol.category-breadcrumb {
|
|
||||||
display: block;
|
|
||||||
float: right;
|
|
||||||
list-style: none outside none;
|
|
||||||
margin: 0px 0px 0px 10px;
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-controls .nav {
|
|
||||||
float: right;
|
|
||||||
margin-bottom: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-dropdown {
|
|
||||||
display: none;
|
|
||||||
width: 320px;
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0px;
|
|
||||||
z-index: 1100;
|
|
||||||
border: 1px solid #E6E6E6;
|
|
||||||
background-color: #FFF;
|
|
||||||
box-shadow: 0px 2px 2px rgba(51, 51, 51, 0.4);
|
|
||||||
right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.category-dropdown-menu a.badge-category {
|
|
||||||
font-size: 0.929em;
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 4px 0px;
|
|
||||||
float: none;
|
|
||||||
line-height: 19px;
|
|
||||||
text-transform: none;
|
|
||||||
width: 100%;
|
|
||||||
min-width: 102px;
|
|
||||||
text-align: center;
|
|
||||||
margin-left: 20px;
|
|
||||||
margin-bottom: 7px;
|
|
||||||
margin-right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.composer-popup a.close {
|
|
||||||
float: left;
|
|
||||||
color: #333;
|
|
||||||
opacity: 0.5;
|
|
||||||
font-size: 1.071em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#topic-progress {
|
|
||||||
position: relative;
|
|
||||||
right: 345px;
|
|
||||||
border: medium none;
|
|
||||||
background-color: #E6E6E6;
|
|
||||||
color: #8C8C8C;
|
|
||||||
width: 145px;
|
|
||||||
height: 34px;
|
|
||||||
left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-map .map li {
|
|
||||||
float: right;
|
|
||||||
padding: 7px 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-map .buttons {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.post-controls button.like, nav.post-controls button.edit, nav.post-controls button.flag, nav.post-controls button.delete, nav.post-controls button.share, nav.post-controls button.bookmark, nav.post-controls button.create {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.create {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-list .star {
|
|
||||||
width: 20px;
|
|
||||||
padding-left: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-list th:first-of-type, .topic-list td:first-of-type {
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.create {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.extra-info-wrapper {
|
|
||||||
float: right;
|
|
||||||
width: 78%;
|
|
||||||
max-width: 800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body .form-horizontal .controls {
|
|
||||||
margin-right: 160px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body .form-horizontal .control-label {
|
|
||||||
float: right;
|
|
||||||
width: 140px;
|
|
||||||
padding-top: 5px;
|
|
||||||
text-align: right;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cooked {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-small {
|
|
||||||
margin-right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-dropdown .category {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-list .pull-left {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
// Keep the topic admin menu on the page
|
||||||
|
.rtl .topic-admin-menu {
|
||||||
|
right: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// This is used to flip the .fa-caret-right icon
|
||||||
|
@mixin rotate( $degrees ) {
|
||||||
|
-webkit-transform: rotate(#{$degrees}deg);
|
||||||
|
-moz-transform: rotate(#{$degrees}deg);
|
||||||
|
-ms-transform: rotate(#{$degrees}deg);
|
||||||
|
-o-transform: rotate(#{$degrees}deg);
|
||||||
|
transform: rotate(#{$degrees}deg);
|
||||||
|
|
||||||
|
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)});
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})";
|
||||||
|
zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get the right caret to point left
|
||||||
|
.rtl .fa-caret-right {
|
||||||
|
@include rotate(180);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Changes the triangle arrow direction in .nav-stacked .active
|
||||||
|
// The 'left' and 'right' in these selectors is not being flipped by r2.
|
||||||
|
.rtl .nav-stacked .active > a::after {
|
||||||
|
border-left-color: transparent !important;
|
||||||
|
border-right-color: $secondary !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue