From 36a3dcd3b77a479653034cbfd76448ab5a10b21f Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Thu, 17 Aug 2017 11:40:57 -0400 Subject: [PATCH] rtl tweaks --- less/bootstrap-rtl/bootstrap-rtl.less | 34 -- less/bootstrap-rtl/button-groups-rtl.less | 71 ---- less/bootstrap-rtl/carousel-rtl.less | 9 - less/bootstrap-rtl/grid-rtl.less | 385 ----------------- less/bootstrap-rtl/list-group-rtl.less | 15 - less/bootstrap-rtl/merged-rtl.less | 480 ---------------------- less/bootstrap-rtl/pager-rtl.less | 22 - less/bootstrap-rtl/pagination-rtl.less | 32 -- less/bootstrap-rtl/theme.less | 0 less/bootstrap-rtl/type-rtl.less | 32 -- less/header.less | 1 + less/persona.less | 1 - less/rtl.less | 12 +- 13 files changed, 12 insertions(+), 1082 deletions(-) delete mode 100644 less/bootstrap-rtl/bootstrap-rtl.less delete mode 100644 less/bootstrap-rtl/button-groups-rtl.less delete mode 100644 less/bootstrap-rtl/carousel-rtl.less delete mode 100644 less/bootstrap-rtl/grid-rtl.less delete mode 100644 less/bootstrap-rtl/list-group-rtl.less delete mode 100644 less/bootstrap-rtl/merged-rtl.less delete mode 100644 less/bootstrap-rtl/pager-rtl.less delete mode 100644 less/bootstrap-rtl/pagination-rtl.less delete mode 100644 less/bootstrap-rtl/theme.less delete mode 100644 less/bootstrap-rtl/type-rtl.less diff --git a/less/bootstrap-rtl/bootstrap-rtl.less b/less/bootstrap-rtl/bootstrap-rtl.less deleted file mode 100644 index 46aaf30..0000000 --- a/less/bootstrap-rtl/bootstrap-rtl.less +++ /dev/null @@ -1,34 +0,0 @@ - -// -// Right-to-Left for Bootstrap 3.0.0 -// Morteza Ansarinia -// -------------------------------------------------- - -// Original LESS files from the latest bootstrap -@import "../bootstrap/variables.less"; -@import "../bootstrap/mixins.less"; - -// Core RTL CSS -@import "type-rtl.less"; - -// Right-to-left the original bootstrap - to be removed -@import "merged-rtl.less"; - -// Button groups -@import "button-groups-rtl.less"; - -// Right-to-left the grid system -@import "grid-rtl.less"; - -// List groups and badges inside them -@import "list-group-rtl.less"; - -// Components -@import "pagination-rtl.less"; -@import "pager-rtl.less"; - -// Components w/ JavaScript -@import "carousel-rtl.less"; - -// Theme for visual enhancement -@import "theme.less"; diff --git a/less/bootstrap-rtl/button-groups-rtl.less b/less/bootstrap-rtl/button-groups-rtl.less deleted file mode 100644 index aa3a026..0000000 --- a/less/bootstrap-rtl/button-groups-rtl.less +++ /dev/null @@ -1,71 +0,0 @@ -// -// Button groups -// -------------------------------------------------- - -// Make the div behave like a button -.btn-group, -.btn-group-vertical { - > .btn { - float: right; - } -} - -// Prevent double borders when buttons are next to each other -.btn-group { - .btn + .btn, - .btn + .btn-group, - .btn-group + .btn, - .btn-group + .btn-group { - margin-right: -1px; - } -} - -// Optional: Group multiple button groups together for a toolbar -.btn-toolbar { - margin-right: -5px; // Offset the first child's margin - - .btn-group, - .input-group { - float: right; - } - > .btn, - > .btn-group, - > .input-group { - margin-right: 5px; - } -} - -// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match -.btn-group > .btn:first-child { - margin-right: 0; - &:not(:last-child):not(.dropdown-toggle) { - .border-left-radius(0); - .border-right-radius(@border-radius-base); - } -} -// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it -.btn-group > .btn:last-child:not(:first-child), -.btn-group > .dropdown-toggle:not(:first-child) { - .border-right-radius(0); - .border-left-radius(@border-radius-base); -} - -// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) -.btn-group > .btn-group { - float: right; -} -.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { - /*border-radius: 0;*/ -} -.btn-group > .btn-group:first-child { - > .btn:last-child, - > .dropdown-toggle { - .border-left-radius(0); - .border-right-radius(@border-radius-base); - } -} -.btn-group > .btn-group:last-child > .btn:first-child { - .border-right-radius(0); - .border-left-radius(@border-radius-base); - -} diff --git a/less/bootstrap-rtl/carousel-rtl.less b/less/bootstrap-rtl/carousel-rtl.less deleted file mode 100644 index 639251b..0000000 --- a/less/bootstrap-rtl/carousel-rtl.less +++ /dev/null @@ -1,9 +0,0 @@ -// -// TODO: Carousel -// -------------------------------------------------- - -.carousel-inner { - > .item { - .transition(.6s ease-in-out left); - } -} diff --git a/less/bootstrap-rtl/grid-rtl.less b/less/bootstrap-rtl/grid-rtl.less deleted file mode 100644 index c9d0991..0000000 --- a/less/bootstrap-rtl/grid-rtl.less +++ /dev/null @@ -1,385 +0,0 @@ -// -// Grid system -// -------------------------------------------------- - - -// Set the container width, and override it for fixed navbars in media queries -.container { - .container-fixed(); -} - -// Mobile-first defaults -.row { - .make-row(); -} - -// Common styles for small and large grid columns -.col-xs-1, -.col-xs-2, -.col-xs-3, -.col-xs-4, -.col-xs-5, -.col-xs-6, -.col-xs-7, -.col-xs-8, -.col-xs-9, -.col-xs-10, -.col-xs-11, -.col-xs-12, -.col-sm-1, -.col-sm-2, -.col-sm-3, -.col-sm-4, -.col-sm-5, -.col-sm-6, -.col-sm-7, -.col-sm-8, -.col-sm-9, -.col-sm-10, -.col-sm-11, -.col-sm-12, -.col-md-1, -.col-md-2, -.col-md-3, -.col-md-4, -.col-md-5, -.col-md-6, -.col-md-7, -.col-md-8, -.col-md-9, -.col-md-10, -.col-md-11, -.col-md-12, -.col-lg-1, -.col-lg-2, -.col-lg-3, -.col-lg-4, -.col-lg-5, -.col-lg-6, -.col-lg-7, -.col-lg-8, -.col-lg-9, -.col-lg-10, -.col-lg-11, -.col-lg-12 { - position: relative; - // Prevent columns from collapsing when empty - min-height: 1px; - // Inner gutter via padding - padding-left: (@grid-gutter-width / 2); - padding-right: (@grid-gutter-width / 2); - margin-left:0; -} - - -// Extra small grid -// -// Grid classes for extra small devices like smartphones. No offset, push, or -// pull classes are present here due to the size of the target. -// -// Note that `.col-xs-12` doesn't get floated on purpose—there's no need since -// it's full-width. - -.col-xs-1, -.col-xs-2, -.col-xs-3, -.col-xs-4, -.col-xs-5, -.col-xs-6, -.col-xs-7, -.col-xs-8, -.col-xs-9, -.col-xs-10, -.col-xs-11 { - float: right; -} -.col-xs-1 { width: percentage((1 / @grid-columns)); } -.col-xs-2 { width: percentage((2 / @grid-columns)); } -.col-xs-3 { width: percentage((3 / @grid-columns)); } -.col-xs-4 { width: percentage((4 / @grid-columns)); } -.col-xs-5 { width: percentage((5 / @grid-columns)); } -.col-xs-6 { width: percentage((6 / @grid-columns)); } -.col-xs-7 { width: percentage((7 / @grid-columns)); } -.col-xs-8 { width: percentage((8 / @grid-columns)); } -.col-xs-9 { width: percentage((9 / @grid-columns)); } -.col-xs-10 { width: percentage((10/ @grid-columns)); } -.col-xs-11 { width: percentage((11/ @grid-columns)); } -.col-xs-12 { width: 100%; } - - -// Small grid -// -// Columns, offsets, pushes, and pulls for the small device range, from phones -// to tablets. -// -// Note that `.col-sm-12` doesn't get floated on purpose—there's no need since -// it's full-width. - -@media (min-width: @screen-tablet) { - .container { - max-width: @container-tablet; - } - - .col-sm-1, - .col-sm-2, - .col-sm-3, - .col-sm-4, - .col-sm-5, - .col-sm-6, - .col-sm-7, - .col-sm-8, - .col-sm-9, - .col-sm-10, - .col-sm-11 { - float: right; - } - .col-sm-1 { width: percentage((1 / @grid-columns)); } - .col-sm-2 { width: percentage((2 / @grid-columns)); } - .col-sm-3 { width: percentage((3 / @grid-columns)); } - .col-sm-4 { width: percentage((4 / @grid-columns)); } - .col-sm-5 { width: percentage((5 / @grid-columns)); } - .col-sm-6 { width: percentage((6 / @grid-columns)); } - .col-sm-7 { width: percentage((7 / @grid-columns)); } - .col-sm-8 { width: percentage((8 / @grid-columns)); } - .col-sm-9 { width: percentage((9 / @grid-columns)); } - .col-sm-10 { width: percentage((10/ @grid-columns)); } - .col-sm-11 { width: percentage((11/ @grid-columns)); } - .col-sm-12 { width: 100%; } - - // Push and pull columns for source order changes - .col-sm-push-1 { right: percentage((1 / @grid-columns)); } - .col-sm-push-2 { right: percentage((2 / @grid-columns)); } - .col-sm-push-3 { right: percentage((3 / @grid-columns)); } - .col-sm-push-4 { right: percentage((4 / @grid-columns)); } - .col-sm-push-5 { right: percentage((5 / @grid-columns)); } - .col-sm-push-6 { right: percentage((6 / @grid-columns)); } - .col-sm-push-7 { right: percentage((7 / @grid-columns)); } - .col-sm-push-8 { right: percentage((8 / @grid-columns)); } - .col-sm-push-9 { right: percentage((9 / @grid-columns)); } - .col-sm-push-10 { right: percentage((10/ @grid-columns)); } - .col-sm-push-11 { right: percentage((11/ @grid-columns)); } - - .col-sm-pull-1 { left: percentage((1 / @grid-columns)); } - .col-sm-pull-2 { left: percentage((2 / @grid-columns)); } - .col-sm-pull-3 { left: percentage((3 / @grid-columns)); } - .col-sm-pull-4 { left: percentage((4 / @grid-columns)); } - .col-sm-pull-5 { left: percentage((5 / @grid-columns)); } - .col-sm-pull-6 { left: percentage((6 / @grid-columns)); } - .col-sm-pull-7 { left: percentage((7 / @grid-columns)); } - .col-sm-pull-8 { left: percentage((8 / @grid-columns)); } - .col-sm-pull-9 { left: percentage((9 / @grid-columns)); } - .col-sm-pull-10 { left: percentage((10/ @grid-columns)); } - .col-sm-pull-11 { left: percentage((11/ @grid-columns)); } - - // Offsets - .col-sm-offset-1 { margin-right: percentage((1 / @grid-columns)); } - .col-sm-offset-2 { margin-right: percentage((2 / @grid-columns)); } - .col-sm-offset-3 { margin-right: percentage((3 / @grid-columns)); } - .col-sm-offset-4 { margin-right: percentage((4 / @grid-columns)); } - .col-sm-offset-5 { margin-right: percentage((5 / @grid-columns)); } - .col-sm-offset-6 { margin-right: percentage((6 / @grid-columns)); } - .col-sm-offset-7 { margin-right: percentage((7 / @grid-columns)); } - .col-sm-offset-8 { margin-right: percentage((8 / @grid-columns)); } - .col-sm-offset-9 { margin-right: percentage((9 / @grid-columns)); } - .col-sm-offset-10 { margin-right: percentage((10/ @grid-columns)); } - .col-sm-offset-11 { margin-right: percentage((11/ @grid-columns)); } - - .col-sm-offset-1, - .col-sm-offset-2, - .col-sm-offset-3, - .col-sm-offset-4, - .col-sm-offset-5, - .col-sm-offset-6, - .col-sm-offset-7, - .col-sm-offset-8, - .col-sm-offset-9, - .col-sm-offset-10, - .col-sm-offset-11 { - margin-left: 0; - } -} - - -// Medium grid -// -// Columns, offsets, pushes, and pulls for the desktop device range. -// -// Note that `.col-md-12` doesn't get floated on purpose—there's no need since -// it's full-width. - -@media (min-width: @screen-desktop) { - .container { - max-width: @container-desktop; - } - .col-md-1, - .col-md-2, - .col-md-3, - .col-md-4, - .col-md-5, - .col-md-6, - .col-md-7, - .col-md-8, - .col-md-9, - .col-md-10, - .col-md-11 { - float: right; - } - .col-md-1 { width: percentage((1 / @grid-columns)); } - .col-md-2 { width: percentage((2 / @grid-columns)); } - .col-md-3 { width: percentage((3 / @grid-columns)); } - .col-md-4 { width: percentage((4 / @grid-columns)); } - .col-md-5 { width: percentage((5 / @grid-columns)); } - .col-md-6 { width: percentage((6 / @grid-columns)); } - .col-md-7 { width: percentage((7 / @grid-columns)); } - .col-md-8 { width: percentage((8 / @grid-columns)); } - .col-md-9 { width: percentage((9 / @grid-columns)); } - .col-md-10 { width: percentage((10/ @grid-columns)); } - .col-md-11 { width: percentage((11/ @grid-columns)); } - .col-md-12 { width: 100%; } - - // Push and pull columns for source order changes - .col-md-push-1 { right: percentage((1 / @grid-columns)); } - .col-md-push-2 { right: percentage((2 / @grid-columns)); } - .col-md-push-3 { right: percentage((3 / @grid-columns)); } - .col-md-push-4 { right: percentage((4 / @grid-columns)); } - .col-md-push-5 { right: percentage((5 / @grid-columns)); } - .col-md-push-6 { right: percentage((6 / @grid-columns)); } - .col-md-push-7 { right: percentage((7 / @grid-columns)); } - .col-md-push-8 { right: percentage((8 / @grid-columns)); } - .col-md-push-9 { right: percentage((9 / @grid-columns)); } - .col-md-push-10 { right: percentage((10/ @grid-columns)); } - .col-md-push-11 { right: percentage((11/ @grid-columns)); } - - .col-md-pull-1 { left: percentage((1 / @grid-columns)); } - .col-md-pull-2 { left: percentage((2 / @grid-columns)); } - .col-md-pull-3 { left: percentage((3 / @grid-columns)); } - .col-md-pull-4 { left: percentage((4 / @grid-columns)); } - .col-md-pull-5 { left: percentage((5 / @grid-columns)); } - .col-md-pull-6 { left: percentage((6 / @grid-columns)); } - .col-md-pull-7 { left: percentage((7 / @grid-columns)); } - .col-md-pull-8 { left: percentage((8 / @grid-columns)); } - .col-md-pull-9 { left: percentage((9 / @grid-columns)); } - .col-md-pull-10 { left: percentage((10/ @grid-columns)); } - .col-md-pull-11 { left: percentage((11/ @grid-columns)); } - - // Offsets - .col-md-offset-1 { margin-right: percentage((1 / @grid-columns)); } - .col-md-offset-2 { margin-right: percentage((2 / @grid-columns)); } - .col-md-offset-3 { margin-right: percentage((3 / @grid-columns)); } - .col-md-offset-4 { margin-right: percentage((4 / @grid-columns)); } - .col-md-offset-5 { margin-right: percentage((5 / @grid-columns)); } - .col-md-offset-6 { margin-right: percentage((6 / @grid-columns)); } - .col-md-offset-7 { margin-right: percentage((7 / @grid-columns)); } - .col-md-offset-8 { margin-right: percentage((8 / @grid-columns)); } - .col-md-offset-9 { margin-right: percentage((9 / @grid-columns)); } - .col-md-offset-10 { margin-right: percentage((10/ @grid-columns)); } - .col-md-offset-11 { margin-right: percentage((11/ @grid-columns)); } - - .col-md-offset-1, - .col-md-offset-2, - .col-md-offset-3, - .col-md-offset-4, - .col-md-offset-5, - .col-md-offset-6, - .col-md-offset-7, - .col-md-offset-8, - .col-md-offset-9, - .col-md-offset-10, - .col-md-offset-11 { - margin-left: 0; - } - -} - - -// Large grid -// -// Columns, offsets, pushes, and pulls for the large desktop device range. -// -// Note that `.col-lg-12` doesn't get floated on purpose—there's no need since -// it's full-width. - -@media (min-width: @screen-lg-desktop) { - .container { - max-width: @container-large-desktop; - } - - .col-lg-1, - .col-lg-2, - .col-lg-3, - .col-lg-4, - .col-lg-5, - .col-lg-6, - .col-lg-7, - .col-lg-8, - .col-lg-9, - .col-lg-10, - .col-lg-11 { - float: right; - } - .col-lg-1 { width: percentage((1 / @grid-columns)); } - .col-lg-2 { width: percentage((2 / @grid-columns)); } - .col-lg-3 { width: percentage((3 / @grid-columns)); } - .col-lg-4 { width: percentage((4 / @grid-columns)); } - .col-lg-5 { width: percentage((5 / @grid-columns)); } - .col-lg-6 { width: percentage((6 / @grid-columns)); } - .col-lg-7 { width: percentage((7 / @grid-columns)); } - .col-lg-8 { width: percentage((8 / @grid-columns)); } - .col-lg-9 { width: percentage((9 / @grid-columns)); } - .col-lg-10 { width: percentage((10/ @grid-columns)); } - .col-lg-11 { width: percentage((11/ @grid-columns)); } - .col-lg-12 { width: 100%; } - - // Push and pull columns for source order changes - .col-lg-push-1 { right: percentage((1 / @grid-columns)); } - .col-lg-push-2 { right: percentage((2 / @grid-columns)); } - .col-lg-push-3 { right: percentage((3 / @grid-columns)); } - .col-lg-push-4 { right: percentage((4 / @grid-columns)); } - .col-lg-push-5 { right: percentage((5 / @grid-columns)); } - .col-lg-push-6 { right: percentage((6 / @grid-columns)); } - .col-lg-push-7 { right: percentage((7 / @grid-columns)); } - .col-lg-push-8 { right: percentage((8 / @grid-columns)); } - .col-lg-push-9 { right: percentage((9 / @grid-columns)); } - .col-lg-push-10 { right: percentage((10/ @grid-columns)); } - .col-lg-push-11 { right: percentage((11/ @grid-columns)); } - - .col-lg-pull-1 { left: percentage((1 / @grid-columns)); } - .col-lg-pull-2 { left: percentage((2 / @grid-columns)); } - .col-lg-pull-3 { left: percentage((3 / @grid-columns)); } - .col-lg-pull-4 { left: percentage((4 / @grid-columns)); } - .col-lg-pull-5 { left: percentage((5 / @grid-columns)); } - .col-lg-pull-6 { left: percentage((6 / @grid-columns)); } - .col-lg-pull-7 { left: percentage((7 / @grid-columns)); } - .col-lg-pull-8 { left: percentage((8 / @grid-columns)); } - .col-lg-pull-9 { left: percentage((9 / @grid-columns)); } - .col-lg-pull-10 { left: percentage((10/ @grid-columns)); } - .col-lg-pull-11 { left: percentage((11/ @grid-columns)); } - - // Offsets - .col-lg-offset-1 { margin-right: percentage((1 / @grid-columns)); } - .col-lg-offset-2 { margin-right: percentage((2 / @grid-columns)); } - .col-lg-offset-3 { margin-right: percentage((3 / @grid-columns)); } - .col-lg-offset-4 { margin-right: percentage((4 / @grid-columns)); } - .col-lg-offset-5 { margin-right: percentage((5 / @grid-columns)); } - .col-lg-offset-6 { margin-right: percentage((6 / @grid-columns)); } - .col-lg-offset-7 { margin-right: percentage((7 / @grid-columns)); } - .col-lg-offset-8 { margin-right: percentage((8 / @grid-columns)); } - .col-lg-offset-9 { margin-right: percentage((9 / @grid-columns)); } - .col-lg-offset-10 { margin-right: percentage((10/ @grid-columns)); } - .col-lg-offset-11 { margin-right: percentage((11/ @grid-columns)); } - - .col-lg-offset-1, - .col-lg-offset-2, - .col-lg-offset-3, - .col-lg-offset-4, - .col-lg-offset-5, - .col-lg-offset-6, - .col-lg-offset-7, - .col-lg-offset-8, - .col-lg-offset-9, - .col-lg-offset-10, - .col-lg-offset-11 { - margin-left: 0; - } - -} diff --git a/less/bootstrap-rtl/list-group-rtl.less b/less/bootstrap-rtl/list-group-rtl.less deleted file mode 100644 index 0a454b1..0000000 --- a/less/bootstrap-rtl/list-group-rtl.less +++ /dev/null @@ -1,15 +0,0 @@ -// Individual list items -// -// Use on `li`s or `div`s within the `.list-group` parent. - -.list-group-item { - - // Align badges within list items - > .badge { - float: left; - } - > .badge + .badge { - margin-left: 5px; - margin-right: 0px; - } -} \ No newline at end of file diff --git a/less/bootstrap-rtl/merged-rtl.less b/less/bootstrap-rtl/merged-rtl.less deleted file mode 100644 index dab0a34..0000000 --- a/less/bootstrap-rtl/merged-rtl.less +++ /dev/null @@ -1,480 +0,0 @@ -// Typography -// ------------------------- -@rtl-font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; -@rtl-font-family-serif: Georgia, "Times New Roman", Times, serif; -@rtl-font-family-base: @rtl-font-family-sans-serif; - -@rtl-headings-font-family: @rtl-font-family-base; - - -body { - direction: rtl; - font-family: @rtl-font-family-base; -} - -// Headings -// ------------------------- - -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6 { - font-family: @rtl-headings-font-family; -} - -// Brand/project name - -.navbar-brand { - float: right; - - @media (min-width: @grid-float-breakpoint) { - .navbar > .container & { - margin-right: -@navbar-padding-horizontal; - margin-left: 0; - } - } -} - -// Navbar heading -// -// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy -// styling of responsive aspects. - -.navbar-header { - - @media (min-width: @grid-float-breakpoint) { - float: right; - } -} - -// Navbar toggle -// -// Custom button for toggling the `.navbar-collapse`, powered by the collapse -// JavaScript plugin. - -.navbar-toggle { - float: left; - margin-left: @navbar-padding-horizontal; -} - -.navbar-collapse { - @media (min-width: @grid-float-breakpoint) { - width: auto; - border-top: 0; - box-shadow: none; - - .navbar-nav.navbar-right:last-child { - margin-right: 0; - } - - } -} - - -// Navbar form -// -// Extension of the `.form-inline` with some extra flavor for optimum display in -// our navbars. - -.navbar-form { - margin-left: -@navbar-padding-horizontal; - margin-right: -@navbar-padding-horizontal; -} - -// Text in navbars -// -// Add a class to make any element properly align itself vertically within the navbars. - -.navbar-text { - float: right; - - @media (min-width: @grid-float-breakpoint) { - margin-left: @navbar-padding-horizontal; - margin-right: @navbar-padding-horizontal; - } -} - -// Navbar nav links -// -// Builds on top of the `.nav` components with it's own modifier class to make -// the nav the full height of the horizontal nav (above 768px). - -.navbar-nav { - - @media (max-width: @screen-xs-max) { - // Dropdowns get custom display when collapsed - .open .dropdown-menu { - > li > a, - .dropdown-header { - padding: 5px 25px 5px 15px; - } - } - } - - // Uncollapse the nav - @media (min-width: @grid-float-breakpoint) { - float: right; - - > li { - float: right; - } - } - -} - -.nav-justified { - width: 100%; - - > li { - float: none; - > a { - text-align: center; - margin-bottom: 5px; - } - } - - @media (min-width: @screen-sm-min) { - > li { - display: table-cell; - width: 1%; - > a { - margin-bottom: 0; - } - } - } -} - -// Tabs -// ------------------------- - -// Tabs -// ------------------------- - -// Give the tabs something to sit on -.nav-tabs { - border-bottom: 1px solid @nav-tabs-border-color; - > li { - float: right; - // Make the list-items overlay the bottom border - margin-bottom: -1px; - - // Actual tabs (as links) - > a { - margin-right: -2px; - border-radius: @border-radius-base @border-radius-base 0 0; - } - } - // pulling this in mainly for less shorthand - &.nav-justified { - .nav-justified(); - .nav-tabs-justified(); - } -} - -.nav-tabs-justified { - - > li > a { - // Override margin from .nav-tabs - margin-left: 0; - } - - @media (min-width: @screen-sm-min) { - > li > a { - border-radius: @border-radius-base @border-radius-base 0 0; - color:blue; - } - } -} - - -// progress-bar -// Bar of progress -.progress-bar { - float: right; -} - -// Alerts - -// Dismissable alerts -// -// Expand the right padding and account for the close button's positioning. - -.alert-dismissable { - //padding-left: (@alert-padding + 20); - - // Adjust close link position - .close { - font-family: @font-family-base; - top: -2px; - left: 21px; - right: 0px; - } -} - -// -// Close icons -// -------------------------------------------------- - -.close { - font-family: @font-family-base; - float: left; -} - - -// -// Dropdown menus -// -------------------------------------------------- - - -// Dropdown arrow/caret -.caret { - margin-right: 2px; -} - -// The dropdown menu (ul) -.dropdown-menu { - right: 0; - float: left; - left: auto; - - // Aligns the dropdown menu to left - &.pull-left { - left: 0; - float: right; - right: auto; - } -} - -// Left aligned dropdowns -.pull-left > .dropdown-menu { - left: 0; - float: right; - right: auto; -} - -// Right aligned menus need alt position -.navbar-nav.pull-left > li > .dropdown-menu, -.navbar-nav > li > .dropdown-menu.pull-left { - right: auto; - left: 0; -} - -// Justified navbar - -.nav-tabs-justified { - - > li > a { - margin-left: 0; - } - - @media (min-width: @screen-sm-min) { - > li > a { - } - } -} - -// Give the tabs something to sit on -.nav-tabs { - > li { - float: right; - - // Actual tabs (as links) - > a { - margin-left: 2px; - } - } -} - - -// Pills -// ------------------------- -.nav-pills { - > li { - float: right; - - // Links rendered as pills - > a { - border-radius: @nav-pills-border-radius; - } - + li { - margin-right: 2px; - margin-left: 0px; - } - } -} - - -// Stacked pills -.nav-stacked { - > li { - float: none; - + li { - margin-right: 0; // no need for this gap between nav items - } - } -} - -// Base nav class - -.nav { - padding-right: 0; // Override default ul/ol -} - - -// Justified nav links -// ------------------------- - -.nav-tabs.nav-justified, -.nav-pills.nav-justified { - width: 100%; - > li { - float: none!important; - > a { - text-align: center; - margin-bottom: 5px; - } - } - - > .dropdown .dropdown-menu { - top: auto; - left: auto; - } - - @media (min-width: @screen-sm-min) { - > li { - display: table-cell; - width: 1%; - > a { - margin-bottom: 0; - } - } - } -} - -.nav-tabs.nav-justified > li > a { - color:@link-color; -} - - -// Reverse input group round corners in RTL - -// Reset rounded corners -.input-group .form-control:first-child, -.input-group-addon:first-child, -.input-group-btn:first-child > .btn, -.input-group-btn:first-child > .dropdown-toggle, -.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { - .border-right-radius(@border-radius-base); - .border-left-radius(0); -} -.input-group-addon:first-child { - border-right: 1px solid @input-group-addon-border-color; - border-left: 0px; -} - -.input-group .form-control:last-child, -.input-group-addon:last-child, -.input-group-btn:last-child > .btn, -.input-group-btn:last-child > .dropdown-toggle, -.input-group-btn:first-child > .btn:not(:first-child) { - .border-left-radius(@border-radius-base); - .border-right-radius(0); -} - -.input-group-addon:last-child { - border-left: 1px solid @input-group-addon-border-color; - border-right: 0px; -} - -// Button input groups -// ------------------------- -.input-group-btn { - // Negative margin to only have a 1px border between the two - &:first-child > .btn { - margin-left: -1px; - } - &:last-child > .btn { - margin-right: -1px; - } -} - -.input-group-btn > .btn { - position: relative; - // Jankily prevent input button groups from wrapping - + .btn { - margin-right: -4px; - } - // Bring the "active" button to the front - &:hover, - &:active { - z-index: 2; - } -} - -.radio, -.checkbox { - padding-right: 20px; -} - -.radio input[type="radio"], -.radio-inline input[type="radio"], -.checkbox input[type="checkbox"], -.checkbox-inline input[type="checkbox"] { - float: right; - margin-right: -20px; -} - -.radio-inline + .radio-inline, -.checkbox-inline + .checkbox-inline { - margin-right: 10px; // space out consecutive inline controls -} - -.form-inline { - - // Remove default margin on radios/checkboxes that were used for stacking, and - // then undo the floating of radios and checkboxes to match (which also avoids - // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969). - .radio, - .checkbox { - padding-right: 0; - } - .radio input[type="radio"], - .checkbox input[type="checkbox"] { - margin-right: 0; - } -} - -// Horizontal forms -// -.form-horizontal { - // Only right align form labels here when the columns stop stacking - @media (min-width: @screen-sm-min) { - .control-label { - text-align: left; - } - } -} - -// Popovers -// ------------------------- -.popover.top, -.popover.bottom { - direction:ltr -} - -.popover.top .popover-title, -.popover.top .popover-content, -.popover.bottom .popover-title, -.popover.bottom .popover-content { - direction:rtl; - text-align:right; -} - -// Tables -// ----------------- -th { - text-align: right; -} - -.list-group -{ - padding-right: 0; -} diff --git a/less/bootstrap-rtl/pager-rtl.less b/less/bootstrap-rtl/pager-rtl.less deleted file mode 100644 index fb33cf2..0000000 --- a/less/bootstrap-rtl/pager-rtl.less +++ /dev/null @@ -1,22 +0,0 @@ -// -// RTL Pager pagination -// -------------------------------------------------- - - -.pager { - padding-right: 0; - - .next { - > a, - > span { - float: left; - } - } - - .previous { - > a, - > span { - float: right; - } - } -} diff --git a/less/bootstrap-rtl/pagination-rtl.less b/less/bootstrap-rtl/pagination-rtl.less deleted file mode 100644 index 04355eb..0000000 --- a/less/bootstrap-rtl/pagination-rtl.less +++ /dev/null @@ -1,32 +0,0 @@ -// -// RTL Pagination (multiple pages) -// -------------------------------------------------- -.pagination { - padding-right: 0; - - > li { - > a, - > span { - float: right; // Collapse white-space - margin-right: -1px; - margin-left: 0px; - } - &:first-child { - > a, - > span { - margin-left: 0; - .border-right-radius(@border-radius-base); - .border-left-radius(0); - } - } - &:last-child { - > a, - > span { - margin-right: -1px; - .border-left-radius(@border-radius-base); - .border-right-radius(0); - } - } - } - -} diff --git a/less/bootstrap-rtl/theme.less b/less/bootstrap-rtl/theme.less deleted file mode 100644 index e69de29..0000000 diff --git a/less/bootstrap-rtl/type-rtl.less b/less/bootstrap-rtl/type-rtl.less deleted file mode 100644 index daf06cf..0000000 --- a/less/bootstrap-rtl/type-rtl.less +++ /dev/null @@ -1,32 +0,0 @@ -// Blockquotes - -blockquote { - border-right: 5px solid @blockquote-border-color; - border-left: 0; - - // Float left with text-align: left - &.pull-left { - p, - small, - .small { - text-align: left; - } - } -} - -// Horizontal description lists - -@media (min-width: @grid-float-breakpoint) { - .dl-horizontal { - dt { - float: right; - width: (@component-offset-horizontal - 20); - clear: right; - text-align: left; - } - dd { - margin-left: 0; - margin-right: @component-offset-horizontal; - } - } -} \ No newline at end of file diff --git a/less/header.less b/less/header.less index 5a04431..d920c81 100644 --- a/less/header.less +++ b/less/header.less @@ -166,6 +166,7 @@ .pagination-block { margin-right: 10px !important; + margin-left: 10px !important; transition: opacity 250ms ease-in; opacity: 0; pointer-events: none; diff --git a/less/persona.less b/less/persona.less index b03543c..cf2b2ab 100644 --- a/less/persona.less +++ b/less/persona.less @@ -33,7 +33,6 @@ @import "modules/morph"; @import "modules/composer-default"; @import "modules/cookie-consent"; - @import "modules/bottom-sheet"; diff --git a/less/rtl.less b/less/rtl.less index bd41711..04fa126 100644 --- a/less/rtl.less +++ b/less/rtl.less @@ -1,5 +1,5 @@ html[data-dir="rtl"] { - @import "./bootstrap-rtl/bootstrap-rtl"; + @import (less) "./bootstrap-flipped.css"; .home { h4 { @@ -21,4 +21,14 @@ html[data-dir="rtl"] { left: 0; right: auto; } + + .categories > li .card, .category > ul > li .card { + border-left: none; + border-right: 4px solid #ccc; + } + + .categories > li .content .icon, .category > ul > li .content .avatar { + margin-left: 15px; + margin-right: 0px; + } } \ No newline at end of file