organizing css
This commit is contained in:
connors
Родитель
95ca0ccfb0
Коммит
3a62c46b22
|
|
@ -994,7 +994,7 @@ document
|
|||
|
||||
<div class="component-example component-example-fullbleed">
|
||||
<div class="slider" id="mySlider">
|
||||
<div class="slides">
|
||||
<div class="slide-group">
|
||||
<div class="slide">
|
||||
<img src="{{ page.base_url }}docs-assets/img/slide-1.jpg">
|
||||
<span class="slide-text">← Slide me</span>
|
||||
|
|
@ -1011,7 +1011,7 @@ document
|
|||
|
||||
{% highlight html %}
|
||||
<div class="slider" id="mySlider">
|
||||
<div class="slides">
|
||||
<div class="slide-group">
|
||||
<div class="slide">
|
||||
<img src="{{ page.base_url }}docs-assets/img/slide-1.jpg">
|
||||
<span class="slide-text">← Slide me</span>
|
||||
|
|
|
|||
|
|
@ -424,6 +424,75 @@ p {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
.bar-nav .btn {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding: 6px 12px;
|
||||
margin-top: 8px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.bar-nav .btn.pull-right {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.bar-nav .btn.pull-left {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.bar-nav .btn-link {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
font-size: 16px;
|
||||
color: #428bca;
|
||||
line-height: 44px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
.bar-nav .btn-link:active, .bar-nav .btn-link.active {
|
||||
color: #3071a9;
|
||||
}
|
||||
.bar-nav .btn-link.pull-left {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.bar-nav .btn-link.pull-left .icon {
|
||||
margin-right: -3px;
|
||||
margin-left: -8px;
|
||||
}
|
||||
.bar-nav .btn-link.pull-right {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.bar-nav .btn-link.pull-right .icon {
|
||||
margin-right: -8px;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.bar .btn-block {
|
||||
padding: 7px 0 6px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.bar input[type="search"] {
|
||||
height: 29px;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.bar .segmented-control {
|
||||
top: 8px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.bar .icon {
|
||||
font-size: 24px;
|
||||
margin-top: 11px;
|
||||
}
|
||||
.bar .icon.pull-left {
|
||||
margin-left: -3px;
|
||||
}
|
||||
.bar .icon.pull-right {
|
||||
margin-right: -3px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
|
|
@ -438,6 +507,10 @@ p {
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
.card .table-view li:last-child {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.table-view {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -499,20 +572,36 @@ p {
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.card .table-view li:last-child {
|
||||
border: 0;
|
||||
.table-view .btn {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.popover .table-view {
|
||||
width: auto;
|
||||
max-height: 300px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
.table-view .badge {
|
||||
margin-top: 2px;
|
||||
}
|
||||
.table-view .badge.pull-left {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.table-view .badge.pull-right {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.table-view .toggle {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.table-view .icon {
|
||||
margin-top: 3px;
|
||||
font-size: inherit;
|
||||
}
|
||||
.table-view .icon.icon-left, .table-view .icon.icon-right {
|
||||
color: #bbb;
|
||||
}
|
||||
.table-view .icon.pull-left {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.table-view .icon.pull-right {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
input,
|
||||
|
|
@ -625,11 +714,6 @@ select {
|
|||
border: 0;
|
||||
}
|
||||
|
||||
.bar input[type="search"] {
|
||||
height: 29px;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
|
@ -724,63 +808,33 @@ input[type="button"] {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.bar-nav .btn {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding: 6px 12px;
|
||||
margin-top: 8px;
|
||||
font-weight: 400;
|
||||
.btn .badge {
|
||||
font-size: 12px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
margin: -2px -4px -2px 4px;
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.bar-nav .btn.pull-right {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.bar-nav .btn.pull-left {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.bar-nav .btn.btn-link {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
font-size: 16px;
|
||||
color: #428bca;
|
||||
line-height: 44px;
|
||||
border: none;
|
||||
|
||||
.btn .badge-inverted,
|
||||
.btn:active .badge-inverted {
|
||||
background-color: transparent;
|
||||
}
|
||||
.bar-nav .btn.btn-link:active, .bar-nav .btn.btn-link.active {
|
||||
color: #3071a9;
|
||||
|
||||
.btn-primary:active .badge-inverted,
|
||||
.btn-positive:active .badge-inverted,
|
||||
.btn-negative:active .badge-inverted {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bar .btn-block {
|
||||
padding: 7px 0 6px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
font-size: 16px;
|
||||
.btn-block .badge {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.popover .btn-block {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.popover .btn-block:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.bar-nav .btn-link.pull-left {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.bar-nav .btn-link.pull-left .icon {
|
||||
margin-right: -3px;
|
||||
margin-left: -8px;
|
||||
}
|
||||
.bar-nav .btn-link.pull-right {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.bar-nav .btn-link.pull-right .icon {
|
||||
margin-right: -8px;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.table-view .btn {
|
||||
margin-top: -1px;
|
||||
.btn .icon {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.badge {
|
||||
|
|
@ -821,41 +875,6 @@ input[type="button"] {
|
|||
color: #d9534f;
|
||||
}
|
||||
|
||||
.btn .badge {
|
||||
font-size: 12px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
margin: -2px -4px -2px 4px;
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.btn .badge-inverted,
|
||||
.btn:active .badge-inverted {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-primary:active .badge-inverted,
|
||||
.btn-positive:active .badge-inverted,
|
||||
.btn-negative:active .badge-inverted {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-block .badge {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.table-view .badge {
|
||||
margin-top: 2px;
|
||||
}
|
||||
.table-view .badge.pull-left {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.table-view .badge.pull-right {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.segmented-control {
|
||||
position: relative;
|
||||
display: table;
|
||||
|
|
@ -959,11 +978,6 @@ input[type="button"] {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.bar .segmented-control {
|
||||
top: 8px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.popover {
|
||||
position: fixed;
|
||||
top: 55px;
|
||||
|
|
@ -1010,6 +1024,25 @@ input[type="button"] {
|
|||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.popover .btn-block {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.popover .btn-block:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.popover .table-view {
|
||||
width: auto;
|
||||
max-height: 300px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -1042,7 +1075,7 @@ input[type="button"] {
|
|||
overflow: hidden;
|
||||
background-color: #000;
|
||||
}
|
||||
.slider .slides {
|
||||
.slider .slide-group {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
|
|
@ -1050,13 +1083,13 @@ input[type="button"] {
|
|||
-webkit-transition: all 0 linear;
|
||||
transition: all 0 linear;
|
||||
}
|
||||
.slider .slides .slide {
|
||||
.slider .slide-group .slide {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.slider .slides .slide > * {
|
||||
.slider .slide-group .slide > * {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -1116,10 +1149,6 @@ input[type="button"] {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.table-view .toggle {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.content.fade {
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
|
|
@ -1238,32 +1267,3 @@ input[type="button"] {
|
|||
.icon-up:before {
|
||||
content: '\e802';
|
||||
}
|
||||
|
||||
.btn .icon {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.bar .icon {
|
||||
font-size: 24px;
|
||||
margin-top: 11px;
|
||||
}
|
||||
.bar .icon.pull-left {
|
||||
margin-left: -3px;
|
||||
}
|
||||
.bar .icon.pull-right {
|
||||
margin-right: -3px;
|
||||
}
|
||||
|
||||
.table-view .icon {
|
||||
margin-top: 3px;
|
||||
font-size: inherit;
|
||||
}
|
||||
.table-view .icon.icon-left, .table-view .icon.icon-right {
|
||||
color: #bbb;
|
||||
}
|
||||
.table-view .icon.pull-left {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.table-view .icon.pull-right {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -600,7 +600,7 @@
|
|||
var scrollableArea;
|
||||
|
||||
var getSlider = function (target) {
|
||||
var i, sliders = document.querySelectorAll('.slider > .slides');
|
||||
var i, sliders = document.querySelectorAll('.slider > .slide-group');
|
||||
for (; target && target !== document; target = target.parentNode) {
|
||||
for (i = sliders.length; i--;) { if (sliders[i] === target) return target; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -600,7 +600,7 @@ hr {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.slider .slides .slide-text {
|
||||
.slider .slide-group .slide-text {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
var scrollableArea;
|
||||
|
||||
var getSlider = function (target) {
|
||||
var i, sliders = document.querySelectorAll('.slider > .slides');
|
||||
var i, sliders = document.querySelectorAll('.slider > .slide-group');
|
||||
for (; target && target !== document; target = target.parentNode) {
|
||||
for (i = sliders.length; i--;) { if (sliders[i] === target) return target; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,48 +50,3 @@
|
|||
color: $negative-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Badges in buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
// Generic styles for all badges within default buttons
|
||||
.btn .badge {
|
||||
font-size: 12px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
margin: -2px -4px -2px 4px;
|
||||
background-color: rgba(0,0,0,.15);
|
||||
}
|
||||
|
||||
// Styles for filled badges within default buttons
|
||||
.btn .badge-inverted,
|
||||
.btn:active .badge-inverted {
|
||||
background-color: transparent;
|
||||
}
|
||||
.btn-primary:active .badge-inverted,
|
||||
.btn-positive:active .badge-inverted,
|
||||
.btn-negative:active .badge-inverted {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Position badges within block level buttons
|
||||
// Note: These are absolutely positioned so that text of button isn't "pushed" by badge and always
|
||||
// stays at the center of button
|
||||
.btn-block .badge {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
// Badges in table-views
|
||||
.table-view .badge {
|
||||
margin-top: 2px;
|
||||
|
||||
&.pull-left {
|
||||
margin-right: 5px;
|
||||
}
|
||||
&.pull-right {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -132,3 +132,103 @@
|
|||
border-radius: 12px 12px 0 0;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
|
||||
// Nav bars with buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-nav .btn {
|
||||
position: relative;
|
||||
z-index: 10; // Position the buttons on top of .title
|
||||
padding: 6px 12px;
|
||||
margin-top: 8px;
|
||||
font-weight: $font-weight-light;
|
||||
|
||||
&.pull-right {
|
||||
margin-left: $bar-side-spacing;
|
||||
}
|
||||
&.pull-left {
|
||||
margin-right: $bar-side-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
// Nav bars with link buttons (Line the text up with content)
|
||||
.bar-nav .btn-link {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
font-size: 16px;
|
||||
color: $primary-color;
|
||||
line-height: $bar-base-height;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
color: darken($primary-color, 10%);
|
||||
}
|
||||
|
||||
&.pull-left {
|
||||
margin-left: 5px;
|
||||
|
||||
.icon {
|
||||
margin-right: -3px;
|
||||
margin-left: -8px;
|
||||
}
|
||||
}
|
||||
&.pull-right {
|
||||
margin-right: 5px;
|
||||
|
||||
.icon {
|
||||
margin-right: -8px;
|
||||
margin-left: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Bars with block buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
// Add proper padding
|
||||
.bar .btn-block {
|
||||
padding: 7px 0 6px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
font-size: 16px; // Scale down font size to fit in bar.
|
||||
}
|
||||
|
||||
|
||||
// Search forms in standard bar
|
||||
// --------------------------------------------------
|
||||
|
||||
// Position/size search bar within the bar
|
||||
.bar input[type="search"] {
|
||||
height: 29px;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
|
||||
// Segmented controller in all bars
|
||||
// --------------------------------------------------
|
||||
|
||||
// Remove standard segmented bottom margin
|
||||
.bar .segmented-control {
|
||||
top: 8px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
// Nav bars with Ratchicons
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar .icon {
|
||||
font-size: 24px;
|
||||
margin-top: 11px;
|
||||
|
||||
&.pull-left {
|
||||
margin-left: -3px;
|
||||
}
|
||||
&.pull-right {
|
||||
margin-right: -3px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -118,93 +118,53 @@
|
|||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
||||
// Button overrides
|
||||
// --------------------------------------------------
|
||||
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Buttons in nav bars
|
||||
|
||||
// Buttons with badges
|
||||
// --------------------------------------------------
|
||||
|
||||
.bar-nav .btn {
|
||||
position: relative;
|
||||
z-index: 10; // Position the buttons on top of .title
|
||||
padding: 6px 12px;
|
||||
margin-top: 8px;
|
||||
font-weight: $font-weight-light;
|
||||
// Generic styles for all badges within default buttons
|
||||
.btn .badge {
|
||||
font-size: 12px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
margin: -2px -4px -2px 4px;
|
||||
background-color: rgba(0,0,0,.15);
|
||||
}
|
||||
|
||||
&.pull-right {
|
||||
margin-left: $bar-side-spacing;
|
||||
}
|
||||
&.pull-left {
|
||||
margin-right: $bar-side-spacing;
|
||||
}
|
||||
// Buttons with inverted badges
|
||||
.btn .badge-inverted,
|
||||
.btn:active .badge-inverted {
|
||||
background-color: transparent;
|
||||
}
|
||||
.btn-primary:active .badge-inverted,
|
||||
.btn-positive:active .badge-inverted,
|
||||
.btn-negative:active .badge-inverted {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Link button (Buttons that look like links)
|
||||
&.btn-link {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
font-size: 16px;
|
||||
color: $primary-color;
|
||||
line-height: $bar-base-height;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
color: darken($primary-color, 10%);
|
||||
}
|
||||
}
|
||||
// Position badges within block level buttons
|
||||
// Note: These are absolutely positioned so that text of button isn't "pushed" by badge and always
|
||||
// stays at the center of button
|
||||
.btn-block .badge {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
// Block buttons in all bars
|
||||
// Buttons with Ratchicons
|
||||
// --------------------------------------------------
|
||||
|
||||
// Add proper padding
|
||||
.bar .btn-block {
|
||||
padding: 7px 0 6px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
font-size: 16px; // Scale down font size to fit in bar.
|
||||
}
|
||||
|
||||
|
||||
// Block level buttons in popovers
|
||||
// --------------------------------------------------
|
||||
|
||||
.popover .btn-block {
|
||||
margin-bottom: 5px;
|
||||
// Remove extra margin on bottom of last button
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
// Line the button text up with content's text
|
||||
.bar-nav .btn-link {
|
||||
&.pull-left {
|
||||
margin-left: 5px;
|
||||
|
||||
.icon {
|
||||
margin-right: -3px;
|
||||
margin-left: -8px;
|
||||
}
|
||||
}
|
||||
&.pull-right {
|
||||
margin-right: 5px;
|
||||
|
||||
.icon {
|
||||
margin-right: -8px;
|
||||
margin-left: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons in table-views
|
||||
// --------------------------------------------------
|
||||
.table-view .btn {
|
||||
margin-top: -1px; // Center the btn inside the cell
|
||||
.btn .icon {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,3 +16,11 @@
|
|||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Cards with table-views
|
||||
// --------------------------------------------------
|
||||
|
||||
.card .table-view li:last-child {
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -638,7 +638,7 @@ hr {
|
|||
height: 570px; // Fullscreen fun times
|
||||
display: block;
|
||||
}
|
||||
.slider .slides .slide-text {
|
||||
.slider .slide-group .slide-text {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -127,13 +127,3 @@ select {
|
|||
margin-bottom: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
// Search forms in standard bar
|
||||
// --------------------------------------------------
|
||||
|
||||
// Position/size search bar within the bar
|
||||
.bar input[type="search"] {
|
||||
height: 29px;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,3 +55,31 @@
|
|||
z-index: 10;
|
||||
background-color: rgba(0,0,0,.15);
|
||||
}
|
||||
|
||||
// Block level buttons in popovers
|
||||
// --------------------------------------------------
|
||||
|
||||
.popover .btn-block {
|
||||
margin-bottom: 5px;
|
||||
|
||||
// Remove extra margin on bottom of last button
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Table views in popovers
|
||||
// --------------------------------------------------
|
||||
|
||||
.popover .table-view {
|
||||
width: auto;
|
||||
max-height: 300px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
border-radius: $border-radius;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,42 +40,3 @@
|
|||
.icon-sound4:before { content: '\f004'; }
|
||||
.icon-sound:before { content: '\f001'; }
|
||||
.icon-up:before { content: '\e802'; }
|
||||
|
||||
// Ratchicons in buttons
|
||||
.btn {
|
||||
.icon {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Ratchicons in nav bars
|
||||
.bar .icon {
|
||||
font-size: 24px;
|
||||
margin-top: 11px;
|
||||
|
||||
&.pull-left {
|
||||
margin-left: -3px;
|
||||
}
|
||||
&.pull-right {
|
||||
margin-right: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
// Ratchicons in table-views
|
||||
.table-view {
|
||||
.icon {
|
||||
margin-top: 3px;
|
||||
font-size: inherit;
|
||||
|
||||
&.icon-left,
|
||||
&.icon-right {
|
||||
color: #bbb;
|
||||
}
|
||||
&.pull-left {
|
||||
margin-right: 5px;
|
||||
}
|
||||
&.pull-right {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -128,13 +128,3 @@
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Segmented controller in all bars
|
||||
// --------------------------------------------------
|
||||
|
||||
// Remove standard segmented bottom margin
|
||||
.bar .segmented-control {
|
||||
top: 8px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
background-color: #000;
|
||||
|
||||
// Inner wrapper for slider (width of all slides together)
|
||||
.slides {
|
||||
.slide-group {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
font-size: 0; // Remove spaces from inline-block children
|
||||
|
|
|
|||
|
|
@ -84,25 +84,50 @@
|
|||
}
|
||||
|
||||
|
||||
// Table views in cards
|
||||
// Table-views with buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
.card .table-view li:last-child {
|
||||
border: 0;
|
||||
.table-view .btn {
|
||||
margin-top: -1px; // Center the btn inside the cell
|
||||
}
|
||||
|
||||
|
||||
// Table views in popovers
|
||||
// Table-views with badges
|
||||
// --------------------------------------------------
|
||||
.table-view .badge {
|
||||
margin-top: 2px;
|
||||
|
||||
&.pull-left {
|
||||
margin-right: 5px;
|
||||
}
|
||||
&.pull-right {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Table-views with toggles
|
||||
// --------------------------------------------------
|
||||
|
||||
.popover .table-view {
|
||||
width: auto;
|
||||
max-height: 300px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
border-radius: $border-radius;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
.table-view .toggle {
|
||||
margin-top: -4px; // Center the toggle inside the cell
|
||||
}
|
||||
|
||||
|
||||
// Table-views with Ratchicons
|
||||
// --------------------------------------------------
|
||||
.table-view .icon {
|
||||
margin-top: 3px;
|
||||
font-size: inherit;
|
||||
|
||||
&.icon-left,
|
||||
&.icon-right {
|
||||
color: #bbb;
|
||||
}
|
||||
&.pull-left {
|
||||
margin-right: 5px;
|
||||
}
|
||||
&.pull-right {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,10 +58,3 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Toggles in table-views
|
||||
// --------------------------------------------------
|
||||
.table-view .toggle {
|
||||
margin-top: -4px; // Center the toggle inside the cell
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче