Browse Source

resolving header conflicts

pull/249/head
connors 11 years ago
parent
commit
f53e2a06bf
  1. 1
      _includes/header.html
  2. 75
      dist/ios-theme.css
  3. 1
      dist/ratchet.css
  4. 94
      lib/sass/theme-ios.scss
  5. 1
      lib/sass/toggles.scss

1
_includes/header.html

@ -11,7 +11,6 @@
<link rel="stylesheet" href="{{ page.base_url }}dist/ios-theme.css"> <link rel="stylesheet" href="{{ page.base_url }}dist/ios-theme.css">
<link rel="stylesheet" href="{{ page.base_url }}docs-assets/css/docs.css"> <link rel="stylesheet" href="{{ page.base_url }}docs-assets/css/docs.css">
<link rel="stylesheet" href="{{ page.base_url }}docs-assets/css/pygments.css"> <link rel="stylesheet" href="{{ page.base_url }}docs-assets/css/pygments.css">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ page.base_url }}docs-assets/img/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ page.base_url }}docs-assets/img/apple-touch-icon-114x114.png">

75
dist/ios-theme.css vendored

@ -34,6 +34,12 @@
box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85); box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85);
} }
.tab-item.active .tab-label,
.tab-item.active .icon, .tab-item:active .tab-label,
.tab-item:active .icon {
color: #007aff;
}
.popover .bar-nav { .popover .bar-nav {
border-bottom: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(0, 0, 0, 0.15);
} }
@ -239,20 +245,81 @@ textarea,
} }
.segmented-controller { .segmented-controller {
color: #929292;
background-color: transparent; background-color: transparent;
border: 1px solid #007aff; border: 1px solid #929292;
} }
.segmented-controller li { .segmented-controller li {
border-left: 1px solid #007aff; border-color: #929292;
-webkit-transition: background-color 0.1s linear; -webkit-transition: background-color 0.1s linear;
transition: background-color 0.1s linear; transition: background-color 0.1s linear;
} }
.segmented-controller li > a { .segmented-controller li:active {
color: #007aff; background-color: #ebebeb;
} }
.segmented-controller li.selected { .segmented-controller li.selected {
background-color: #929292;
}
.segmented-controller li.selected > a {
color: #fff;
}
.segmented-controller-primary {
border: 1px solid #007aff;
}
.segmented-controller-primary li {
border-color: inherit;
}
.segmented-controller-primary li > a {
color: #007aff;
}
.segmented-controller-primary li:active {
background-color: #b3d7ff;
}
.segmented-controller-primary li.selected {
background-color: #007aff; background-color: #007aff;
} }
.segmented-controller-primary li.selected > a {
color: #fff;
}
.segmented-controller-positive {
border: 1px solid #4cd964;
}
.segmented-controller-positive li {
border-color: inherit;
}
.segmented-controller-positive li > a {
color: #4cd964;
}
.segmented-controller-positive li:active {
background-color: #dff8e3;
}
.segmented-controller-positive li.selected {
background-color: #4cd964;
}
.segmented-controller-positive li.selected > a {
color: #fff;
}
.segmented-controller-negative {
border: 1px solid #dd524d;
}
.segmented-controller-negative li {
border-color: inherit;
}
.segmented-controller-negative li > a {
color: #dd524d;
}
.segmented-controller-negative li:active {
background-color: #fae4e3;
}
.segmented-controller-negative li.selected {
background-color: #dd524d;
}
.segmented-controller-negative li.selected > a {
color: #fff;
}
.popover { .popover {
border-radius: 12px; border-radius: 12px;

1
dist/ratchet.css vendored

@ -1070,6 +1070,7 @@ input[type="button"] {
top: 3px; top: 3px;
right: 11px; right: 11px;
color: #999; color: #999;
font-size: 14px;
text-transform: uppercase; text-transform: uppercase;
content: "Off"; content: "Off";
} }

94
lib/sass/theme-ios.scss

@ -63,6 +63,16 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
border-top: 0; border-top: 0;
@include box-shadow(0 0 -1px rgba(0,0,0,.85)); @include box-shadow(0 0 -1px rgba(0,0,0,.85));
} }
.tab-item {
// Active states for the tab bar
&.active,
&:active {
.tab-label,
.icon {
color: $primary-color;
}
}
}
// Nav bar in popovers // Nav bar in popovers
@ -336,21 +346,95 @@ textarea,
// -------------------------------------------------- // --------------------------------------------------
.segmented-controller { .segmented-controller {
color: $default-color;
background-color: transparent; background-color: transparent;
border: 1px solid $primary-color; border: 1px solid $default-color;
li { li {
border-left: 1px solid $primary-color; border-color: $default-color;
@include transition(background-color .1s linear); @include transition(background-color .1s linear);
// Link that fills each section &:active {
background-color: lighten($default-color, 35%);
}
&.selected {
background-color: $default-color;
> a {
color: #fff;
}
}
}
}
// Other segmented controller types
// --------------------------------------------------
// Primary
.segmented-controller-primary {
border: 1px solid $primary-color;
li {
border-color: inherit;
> a { > a {
color: $primary-color; color: $primary-color;
} }
&:active {
// Selected segment of controller background-color: lighten($primary-color, 35%);
}
&.selected { &.selected {
background-color: $primary-color; background-color: $primary-color;
> a {
color: #fff;
}
}
}
}
// Positive
.segmented-controller-positive {
border: 1px solid $positive-color;
li {
border-color: inherit;
> a {
color: $positive-color;
}
&:active {
background-color: lighten($positive-color, 35%);
}
&.selected {
background-color: $positive-color;
> a {
color: #fff;
}
}
}
}
// Negative
.segmented-controller-negative {
border: 1px solid $negative-color;
li {
border-color: inherit;
> a {
color: $negative-color;
}
&:active {
background-color: lighten($negative-color, 35%);
}
&.selected {
background-color: $negative-color;
> a {
color: #fff;
}
} }
} }
} }

1
lib/sass/toggles.scss

@ -32,6 +32,7 @@
top: 3px; top: 3px;
right: 11px; right: 11px;
color: #999; color: #999;
font-size: 14px;
text-transform: uppercase; text-transform: uppercase;
content: "Off"; content: "Off";
} }

Loading…
Cancel
Save