Browse files

Update examples and compile CSS

  • Loading branch information...
1 parent 8ff452f commit 3cb66cc7298cc50190e7d2898acb66e0741bd833 @mrmartineau mrmartineau committed Mar 20, 2013
Showing with 1,180 additions and 1,868 deletions.
  1. +139 −31 css/kickoff-old-ie.css
  2. +948 −1,834 css/kickoff.css
  3. +90 −0 examples/components.html
  4. +3 −3 examples/forms.html
View
170 css/kickoff-old-ie.css
@@ -2234,38 +2234,38 @@ pre code {
overflow-y: scroll;
}
-/* line 14, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 15, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
img {
font-style: italic;
color: #c00;
border: 0;
-ms-interpolation-mode: bicubic;
}
-/* line 20, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 21, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
img.left {
margin: 0 20px 0 0;
}
-/* line 23, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 24, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
img.right {
margin: 0 0 0 20px;
}
-/* line 28, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 29, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
svg:not(:root) {
overflow: hidden;
}
-/* line 31, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 32, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
img, object, embed, video {
max-width: 100%;
}
-/* line 35, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 36, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
#map_canvas img, .map_canvas img {
max-width: none!important;
}
-/* line 45, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 46, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.block-grid {
display: block;
list-style-type: none;
@@ -2280,63 +2280,63 @@ img, object, embed, video {
.block-grid:after {
clear: both;
}
-/* line 50, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 51, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.block-grid li {
display: block;
height: auto;
float: left;
}
-/* line 56, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 57, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.block-grid.two-up {
margin-left: -4%;
}
-/* line 59, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 60, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.block-grid.two-up li {
margin-left: 4%;
width: 46%;
margin-bottom: 4%;
}
-/* line 67, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 68, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.block-grid.three-up {
margin-left: -2%;
}
-/* line 70, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 71, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.block-grid.three-up li {
margin-left: 2%;
width: 31.3%;
margin-bottom: 2%;
}
-/* line 78, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 79, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.block-grid.four-up {
margin-left: -2%;
}
-/* line 81, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 82, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.block-grid.four-up li {
margin-left: 2%;
width: 23%;
margin-bottom: 2%;
}
-/* line 89, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 90, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.block-grid.five-up {
margin-left: -1.5%;
}
-/* line 92, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 93, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.block-grid.five-up li {
margin-left: 1.5%;
width: 18.5%;
margin-bottom: 1.5%;
}
-/* line 108, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 109, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
ul.centred, ul.centered {
text-align: center;
}
-/* line 111, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 112, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
ul.centred li, ul.centered li {
display: inline;
}
-/* line 123, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 124, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.floated {
*zoom: 1;
}
@@ -2349,13 +2349,13 @@ ul.centred li, ul.centered li {
.floated:after {
clear: both;
}
-/* line 126, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 127, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.floated li {
float: left;
display: inline-block;
}
-/* line 138, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 139, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.well {
min-height: 20px;
padding: 19px;
@@ -2372,13 +2372,13 @@ ul.centred li, ul.centered li {
-o-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
-/* line 148, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 149, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.well blockquote {
border-color: #ddd;
border-color: rgba(0, 0, 0, 0.15);
}
-/* line 155, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 156, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.well-large {
padding: 24px;
-webkit-border-radius: 6px;
@@ -2387,7 +2387,7 @@ ul.centred li, ul.centered li {
border-radius: 6px;
}
-/* line 159, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 160, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.well-small {
padding: 9px;
-webkit-border-radius: 3px;
@@ -2396,7 +2396,7 @@ ul.centred li, ul.centered li {
border-radius: 3px;
}
-/* line 169, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 170, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.tabs {
*zoom: 1;
margin-bottom: 22px;
@@ -2410,34 +2410,142 @@ ul.centred li, ul.centered li {
.tabs:after {
clear: both;
}
-/* line 175, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 176, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.tabs.is-right li {
float: right;
}
-/* line 181, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 182, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.tabs.is-centred, .tabs.is-centered {
text-align: center;
}
-/* line 184, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 185, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.tabs.is-centred > li, .tabs.is-centered > li {
display: inline;
float: none;
}
-/* line 190, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 191, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.tabs > li {
float: left;
margin: 0 5px;
}
-/* line 198, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 199, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.tabs-content > li {
display: none;
}
-/* line 202, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+/* line 203, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
.tabs-content > li.is-active {
display: block;
}
+/* line 269, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+.alert {
+ padding: 8px 35px 8px 14px;
+ margin-bottom: 22px;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ background-color: #fcf8e3;
+ border: 1px solid #fbeed5;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ -o-border-radius: 4px;
+ border-radius: 4px;
+}
+/* line 278, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+.alert,
+.alert h4 {
+ color: #c09853;
+}
+/* line 282, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+.alert h4 {
+ margin: 0;
+}
+/* line 287, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+.alert .close {
+ position: relative;
+ top: -2px;
+ right: -21px;
+ line-height: 22px;
+}
+
+/* line 299, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+.alert-success {
+ background-color: #dff0d8;
+ border-color: #d6e9c6;
+ color: #468847;
+}
+/* line 304, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+.alert-success h4 {
+ color: #468847;
+}
+
+/* line 308, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+.alert-error {
+ background-color: #f2dede;
+ border-color: #eed3d7;
+ color: #b94a48;
+}
+/* line 313, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+.alert-error h4 {
+ color: #b94a48;
+}
+
+/* line 317, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+.alert-info {
+ background-color: #d9edf7;
+ border-color: #bce8f1;
+ color: #3a87ad;
+}
+/* line 322, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+.alert-info h4 {
+ color: #3a87ad;
+}
+
+/* line 331, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+.alert-block {
+ padding-top: 14px;
+ padding-bottom: 14px;
+}
+/* line 336, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+.alert-block > p,
+.alert-block > ul {
+ margin-bottom: 0;
+}
+/* line 339, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+.alert-block p + p {
+ margin-top: 5px;
+}
+
+/* line 347, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+.close {
+ float: right;
+ font-size: 20px;
+ font-weight: bold;
+ line-height: 22px;
+ color: #000;
+ text-shadow: 0 1px 0 white;
+ zoom: 1;
+ filter: alpha(opacity=20);
+ opacity: 0.2;
+}
+/* line 357, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+.close:hover, .close:focus {
+ color: #000;
+ text-decoration: none;
+ cursor: pointer;
+ zoom: 1;
+ filter: alpha(opacity=40);
+ opacity: 0.4;
+}
+
+/* line 368, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_components.scss */
+button.close {
+ padding: 0;
+ cursor: pointer;
+ background: transparent;
+ border: 0;
+ -webkit-appearance: none;
+}
+
/* line 10, /Users/mrmartineau/Dropbox/dropbox-htdocs/github/tmw/kickoff-develop/scss/_buttons.scss */
.btn {
padding: 4px 12px;
View
2,782 css/kickoff.css
948 additions, 1,834 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
90 examples/components.html
@@ -214,6 +214,96 @@
</div>
<!-- END EXAMPLE -->
+ <hr>
+
+ <h2>4. Alerts</h2>
+ <div class="row">
+ <div class="span5 col">
+ <p>The default Kickoff button set has 7 states.</p>
+ </div>
+ <div class="span7 col">
+ <ul class="tabs is-right">
+ <li><a href="#layout-example-alerts" class="btn btn-pill is-active">Example</a></li>
+ <li><a href="#code-example-alerts" class="btn btn-pill">Code</a></li>
+ </ul>
+ <ul class="tabs-content">
+ <li id="layout-example-alerts" class="is-active well">
+ <h4>Alert types</h4>
+ <h5>Default</h5>
+ <div class="alert">
+ <!-- <button type="button" class="close" data-dismiss="alert">&times;</button> -->
+ <strong>Warning!</strong> Best check yo self, you're not looking too good.
+ </div>
+ <h5>Success</h5>
+ <div class="alert alert-success">
+ <!-- <button type="button" class="close" data-dismiss="alert">&times;</button> -->
+ <strong>Warning!</strong> Best check yo self, you're not looking too good.
+ </div>
+ <h5>Error</h5>
+ <div class="alert alert-error">
+ <!-- <button type="button" class="close" data-dismiss="alert">&times;</button> -->
+ <strong>Warning!</strong> Best check yo self, you're not looking too good.
+ </div>
+ <h5>Alert block</h5>
+ <div class="alert alert-block">
+ <!-- <button type="button" class="close" data-dismiss="alert">&times;</button> -->
+ <h4>Warning!</h4>
+ This version allows for more text inside the message box. Add the class <code>alert-block</code> to use this style.
+ </div>
+ </li>
+
+ <li id="code-example-alerts">
+ <b><code>HTML</code></b>
+<pre class="prettyprint lang-html linenums"><code>&lt;h5>Default&lt;/h5>
+ &lt;div class="alert">
+ &lt;strong>Warning!&lt;/strong> Best check yo self, you're not looking too good.
+ &lt;/div>
+ &lt;h5>Success&lt;/h5>
+ &lt;div class="alert alert-success">
+ &lt;strong>Warning!&lt;/strong> Best check yo self, you're not looking too good.
+ &lt;/div>
+ &lt;h5>Error&lt;/h5>
+ &lt;div class="alert alert-error">
+ &lt;strong>Warning!&lt;/strong> Best check yo self, you're not looking too good.
+ &lt;/div>
+ &lt;h5>Alert block&lt;/h5>
+ &lt;div class="alert alert-block">
+ &lt;h4>Warning!&lt;/h4>
+ This version allows for more text inside the message box. Add the class &lt;code>alert-block&lt;/code> to use this style.
+ &lt;/div></code></pre>
+ <b><code>.SCSS</code></b>
+ <pre class="prettyprint lang-css linenums"><code>// Set the backgrounds
+// -------------------------
+.btn-primary {
+ @include button-background($btn-primary-background, $btn-primary-background-highlight);
+}
+// Warning appears are orange
+.btn-warning {
+ @include button-background($btn-warning-background, $btn-warning-background-highlight);
+}
+// Danger and error appear as red
+.btn-danger {
+ @include button-background($btn-danger-background, $btn-danger-background-highlight);
+}
+// Success appears as green
+.btn-success {
+ @include button-background($btn-success-background, $btn-success-background-highlight);
+}
+// Info appears as a neutral blue
+.btn-info {
+ @include button-background($btn-info-background, $btn-info-background-highlight);
+}
+// Inverse appears as dark gray
+.btn-inverse {
+ @include button-background($btn-inverse-background, $btn-inverse-background-highlight);
+}</code></pre>
+ </li>
+ </ul>
+
+ </div>
+ </div>
+ <!-- END EXAMPLE -->
+
</div>
View
6 examples/forms.html
@@ -679,7 +679,8 @@
// http://jaymorrow.github.com/validatr/api.html
$('#validation-form').validatr({
location : 'none',
- showall : true
+ showall : true,
+ theme : 'kickoff'
});
});
&lt;/script></code></pre>
@@ -701,9 +702,8 @@
$(function() {
// http://jaymorrow.github.com/validatr/api.html
$('#validation-form').validatr({
- dateFormat : 'yy-mm-dd',
location : 'none',
- // theme : 'tmw-alert tmw-message',
+ theme : 'kickoff',
// template : '<div>{{message}}</div>',
showall : true
});

0 comments on commit 3cb66cc

Please sign in to comment.