playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

organizing css

pull/253/head
connors 11 years ago
parent
95ca0ccfb0
commit
3a62c46b22
17 changed files with 355 additions and 345 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      components.html
  2. 284
      dist/ratchet.css
  3. 2
      dist/ratchet.js
  4. 2
      docs-assets/css/docs.css
  5. 2
      lib/js/sliders.js
  6. 45
      lib/sass/badges.scss
  7. 100
      lib/sass/bars.scss
  8. 102
      lib/sass/buttons.scss
  9. 8
      lib/sass/cards.scss
  10. 2
      lib/sass/docs.scss
  11. 10
      lib/sass/forms.scss
  12. 28
      lib/sass/popovers.scss
  13. 39
      lib/sass/ratchicons.scss
  14. 10
      lib/sass/segmented-controls.scss
  15. 2
      lib/sass/sliders.scss
  16. 53
      lib/sass/table-views.scss
  17. 7
      lib/sass/toggles.scss

4
components.html
Unescape View File

@ -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">&larr; 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">&larr; Slide me</span>

284
dist/ratchet.css vendored
Unescape View File

@ -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;
}
.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;
background-color: transparent;
}
.bar-nav .btn.btn-link:active, .bar-nav .btn.btn-link.active {
color: #3071a9;
.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 .btn-block {
padding: 7px 0 6px;
margin-top: 5px;
margin-bottom: 0;
font-size: 16px;
.btn .badge-inverted,
.btn:active .badge-inverted {
background-color: transparent;
}
.popover .btn-block {
margin-bottom: 5px;
}
.popover .btn-block:last-child {
margin-bottom: 0;
.btn-primary:active .badge-inverted,
.btn-positive:active .badge-inverted,
.btn-negative:active .badge-inverted {
color: #fff;
}
.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;
.btn-block .badge {
position: absolute;
right: 0;
margin-right: 10px;
}
.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;
}

2
dist/ratchet.js vendored
Unescape View File

@ -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; }
}

2
docs-assets/css/docs.css
Unescape View File

@ -600,7 +600,7 @@ hr {
display: block;
}
.slider .slides .slide-text {
.slider .slide-group .slide-text {
position: absolute;
top: 45%;
left: 0;

2
lib/js/sliders.js
Unescape View File

@ -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; }
}

45
lib/sass/badges.scss
Unescape View File

@ -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;
}
}

100
lib/sass/bars.scss
Unescape View File

@ -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;
}
}

102
lib/sass/buttons.scss
Unescape View File

@ -118,93 +118,53 @@
font-size: 18px;
}
// Button overrides
// --------------------------------------------------
input[type="submit"],
input[type="reset"],
input[type="button"] {
width: 100%;
}
// Buttons in nav bars
// --------------------------------------------------
.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;
}
// 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%);
}
}
}
// Block buttons in all bars
// Buttons with badges
// --------------------------------------------------
// 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.
// 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);
}
// Block level buttons in popovers
// --------------------------------------------------
.popover .btn-block {
margin-bottom: 5px;
// Remove extra margin on bottom of last button
&:last-child {
margin-bottom: 0;
}
// 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;
}
// 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;
}
}
// 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;
}
// Buttons in table-views
// Buttons with Ratchicons
// --------------------------------------------------
.table-view .btn {
margin-top: -1px; // Center the btn inside the cell
.btn .icon {
font-size: inherit;
}

8
lib/sass/cards.scss
Unescape View File

@ -16,3 +16,11 @@
color: inherit;
}
}
// Cards with table-views
// --------------------------------------------------
.card .table-view li:last-child {
border: 0;
}

2
lib/sass/docs.scss
Unescape View File

@ -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;

10
lib/sass/forms.scss
Unescape View File

@ -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;
}

28
lib/sass/popovers.scss
Unescape View File

@ -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;
}

39
lib/sass/ratchicons.scss
Unescape View File

@ -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;
}
}
}

10
lib/sass/segmented-controls.scss
Unescape View File

@ -128,13 +128,3 @@
display: block;
}
}
// Segmented controller in all bars
// --------------------------------------------------
// Remove standard segmented bottom margin
.bar .segmented-control {
top: 8px;
margin: 0 auto;
}

2
lib/sass/sliders.scss
Unescape View File

@ -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

53
lib/sass/table-views.scss
Unescape View File

@ -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;
.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;
&.pull-left {
margin-right: 5px;
}
&.pull-right {
margin-left: 5px;
}
}
// Table-views with toggles
// --------------------------------------------------
.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;
}
}

7
lib/sass/toggles.scss
Unescape View File

@ -58,10 +58,3 @@
display: none;
}
}
// Toggles in table-views
// --------------------------------------------------
.table-view .toggle {
margin-top: -4px; // Center the toggle inside the cell
}

Write Preview
Loading…
Cancel
Save