Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Toolbar now a reusable component

  • Loading branch information...
commit f5eebb89e830152a79abbdb930c4a8f89461b87a 1 parent 2d80e8a
@jakearchibald authored
View
43 www/assets/7/script/Toolbar.js
@@ -20,7 +20,12 @@ spriteCow.Toolbar = (function() {
event.isActive = $button.hasClass('active');
if ( !toolbar.trigger(event).isDefaultPrevented() ) {
- $button.toggleClass('active');
+ if (event.isActive) {
+ toolbar.deactivate(toolName);
+ }
+ else {
+ toolbar.activate(toolName);
+ }
}
event.preventDefault();
@@ -30,9 +35,7 @@ spriteCow.Toolbar = (function() {
toolbar._$feedback = $container.find('span.feedback');
}
- var SpriteCowToolbarProto = SpriteCowToolbar.prototype = new spriteCow.MicroEvent();
-
- SpriteCowToolbarProto.addItem = function(toolName, text, opts) {
+ SpriteCowToolbar.createButton = function(toolName, text, opts) {
opts = opts || {};
var $button = $('<div role="button"/>').addClass(toolName).text(text).data('toolName', toolName);
@@ -44,7 +47,18 @@ spriteCow.Toolbar = (function() {
$button.addClass('active');
}
- this._$feedback.before( $button );
+ return $button;
+ };
+
+ var SpriteCowToolbarProto = SpriteCowToolbar.prototype = new spriteCow.MicroEvent();
+
+ SpriteCowToolbarProto.addItem = function(toolName, text, opts) {
+ if (toolName instanceof spriteCow.ToolbarGroup) {
+ this._$feedback.before( toolName.$container );
+ }
+ else {
+ SpriteCowToolbar.createButton(toolName, text, opts).insertBefore( this._$feedback );
+ }
return this;
};
@@ -88,7 +102,9 @@ spriteCow.Toolbar = (function() {
};
SpriteCowToolbarProto.activate = function(toolName) {
- this.$container.find('.' + toolName + '[role=button]').addClass('active');
+ var $button = this.$container.find('.' + toolName + '[role=button]');
+ $button.closest('.toolbar-group').children().removeClass('active');
+ $button.addClass('active');
return this;
};
@@ -104,4 +120,17 @@ spriteCow.Toolbar = (function() {
return SpriteCowToolbar;
})();
-
+(function() {
+ function ToolbarGroup() {
+ this.$container = $('<div class="toolbar-group"/>');
+ }
+
+ var ToolbarGroupProto = ToolbarGroup.prototype;
+
+ ToolbarGroupProto.addItem = function(toolName, text, opts) {
+ spriteCow.Toolbar.createButton(toolName, text, opts).appendTo( this.$container );
+ return this;
+ };
+
+ spriteCow.ToolbarGroup = ToolbarGroup;
+})();
View
20 www/assets/7/script/base.js
@@ -25,18 +25,22 @@
cssOutput = new spriteCow.CssOutput( $codeContainer ),
toolbarTop = new spriteCow.Toolbar( $toolbarContainer );
- toolbarTop.addItem('open-img', 'Open').
- addItem('reload-img', 'Reload Current Image', {noLabel: true}).
- addItem('select-sprite', 'Select Sprite', {active: true}).
- addItem('select-bg', 'Pick Background').
- addItem('invert-bg', 'Toggle Dark Background', {noLabel: true});
+ toolbarTop.
+ addItem('open-img', 'Open').
+ addItem('reload-img', 'Reload Current Image', {noLabel: true}).
+ addItem(
+ new spriteCow.ToolbarGroup().
+ addItem('select-sprite', 'Select Sprite', {active: true}).
+ addItem('select-bg', 'Pick Background')
+ ).
+ addItem('invert-bg', 'Toggle Dark Background', {noLabel: true});
spriteCow.pageLayout.init();
// listeners
imgInput.bind('load', function(img) {
spriteCanvas.setImg(img);
- spriteCanvasView.setTool('selectSprite');
+ spriteCanvasView.setTool('select-sprite');
cssOutput.backgroundFileName = imgInput.fileName;
spriteCow.pageLayout.toAppView();
});
@@ -59,7 +63,7 @@
spriteCanvasView.bind('bgColorSelect', function(color) {
var toolName = 'select-sprite';
spriteCanvasView.setTool(toolName);
- toolbarTop.deactivate('select-bg').activate(toolName);
+ toolbarTop.activate(toolName);
toolbarTop.feedback( 'Background set to ' + colourBytesToCss(color) );
});
@@ -69,12 +73,10 @@
toolbarTop.bind('select-bg', function() {
spriteCanvasView.setTool('select-bg');
- toolbarTop.deactivate('select-sprite');
});
toolbarTop.bind('select-sprite', function() {
spriteCanvasView.setTool('select-sprite');
- toolbarTop.deactivate('select-bg');
});
toolbarTop.bind('reload-img', function(event) {
View
25 www/assets/7/style/_components.scss
@@ -256,19 +256,9 @@
padding: 4px 0;
text-indent: -5000px;
}
- &.select-sprite {
- border-width: 1px;
- border-radius: 4px 0 0 4px;
- margin-right: 0;
- }
&.select-sprite::before {
background-position: -4px -2px;
}
- &.select-bg {
- border-radius: 0 4px 4px 0;
- margin-right: 5px;
- border-left-width: 0;
- }
&.select-bg::before {
background-position: -50px -3px;
}
@@ -289,6 +279,21 @@
opacity: 0;
}
}
+
+ .toolbar-group [role=button] {
+ margin-right: 0;
+ border-radius: 0;
+ border-left-width: 0;
+
+ &:first-child {
+ border-left-width: 1px;
+ border-radius: 4px 0 0 4px;
+ }
+ &:last-child {
+ margin-right: 5px;
+ border-radius: 0 4px 4px 0;
+ }
+ }
// Footer
.main-footer {
overflow: hidden;
View
70 www/assets/7/style/all.css
@@ -469,51 +469,55 @@ body {
padding: 4px 0;
text-indent: -5000px; }
/* line 259, _components.scss */
- .toolbar [role=button].select-sprite {
- border-width: 1px;
- border-radius: 4px 0 0 4px;
- margin-right: 0; }
- /* line 264, _components.scss */
.toolbar [role=button].select-sprite::before {
background-position: -4px -2px; }
- /* line 267, _components.scss */
- .toolbar [role=button].select-bg {
- border-radius: 0 4px 4px 0;
- margin-right: 5px;
- border-left-width: 0; }
- /* line 272, _components.scss */
+ /* line 262, _components.scss */
.toolbar [role=button].select-bg::before {
background-position: -50px -3px; }
- /* line 275, _components.scss */
+ /* line 265, _components.scss */
.toolbar [role=button].open-img::before {
background-position: -26px -2px; }
- /* line 278, _components.scss */
+ /* line 268, _components.scss */
.toolbar [role=button].invert-bg::before {
background-position: -99px -2px; }
- /* line 281, _components.scss */
+ /* line 271, _components.scss */
.toolbar [role=button].reload-img::before {
background-position: -75px -2px; }
- /* line 285, _components.scss */
+ /* line 275, _components.scss */
.toolbar .feedback {
float: left;
padding: 5px;
color: #555;
opacity: 0; }
-/* line 293, _components.scss */
+/* line 283, _components.scss */
+.toolbar-group [role=button] {
+ margin-right: 0;
+ border-radius: 0;
+ border-left-width: 0; }
+ /* line 288, _components.scss */
+ .toolbar-group [role=button]:first-child {
+ border-left-width: 1px;
+ border-radius: 4px 0 0 4px; }
+ /* line 292, _components.scss */
+ .toolbar-group [role=button]:last-child {
+ margin-right: 5px;
+ border-radius: 0 4px 4px 0; }
+
+/* line 298, _components.scss */
.main-footer {
overflow: hidden;
background: rgba(0, 0, 0, 0.23); }
- /* line 297, _components.scss */
+ /* line 302, _components.scss */
.main-footer p {
float: right;
padding: 15px 29px 0;
margin: 0;
white-space: nowrap; }
- /* line 303, _components.scss */
+ /* line 308, _components.scss */
.intro .main-footer p {
padding: 12px 16px 0; }
- /* line 307, _components.scss */
+ /* line 312, _components.scss */
.main-footer .the-team-logo {
background: url("imgs/sprites1.png") no-repeat -4px -29px;
width: 88px;
@@ -522,17 +526,17 @@ body {
text-indent: -5000px;
vertical-align: top;
margin: -1px 0 0 4px; }
- /* line 316, _components.scss */
+ /* line 321, _components.scss */
.main-footer ul {
float: left;
padding: 16px 30px; }
- /* line 320, _components.scss */
+ /* line 325, _components.scss */
.intro .main-footer ul {
padding: 13px 16px; }
- /* line 324, _components.scss */
+ /* line 329, _components.scss */
.main-footer li {
display: inline; }
- /* line 328, _components.scss */
+ /* line 333, _components.scss */
.main-footer li a:link, .main-footer li a:visited {
font-weight: normal;
color: #fff;
@@ -540,53 +544,53 @@ body {
padding: 0 10px 0 0;
margin: 0 10px 0 0;
border-right: 1px solid #fff; }
- /* line 337, _components.scss */
+ /* line 342, _components.scss */
.main-footer li:last-child a:link, .main-footer li:last-child a:visited {
padding: 0;
margin: 0;
border: none; }
-/* line 345, _components.scss */
+/* line 350, _components.scss */
.feature-test {
display: none;
width: 800px;
margin: 0 auto;
text-align: center; }
- /* line 351, _components.scss */
+ /* line 356, _components.scss */
.not-supported .feature-test {
display: block; }
- /* line 354, _components.scss */
+ /* line 359, _components.scss */
.feature-test h1 {
font: normal 2.5em sans-serif;
margin: 0;
padding: 40px 0; }
- /* line 359, _components.scss */
+ /* line 364, _components.scss */
.feature-test ul {
display: inline-block;
*display: inline;
zoom: 1; }
- /* line 364, _components.scss */
+ /* line 369, _components.scss */
.feature-test li {
margin: 10px auto;
font-size: 1.1em;
overflow: hidden;
text-align: left; }
- /* line 370, _components.scss */
+ /* line 375, _components.scss */
.feature-test p {
width: 600px;
margin: 0 auto 20px;
font-size: 1.1em;
text-align: left; }
- /* line 377, _components.scss */
+ /* line 382, _components.scss */
.feature-test .pass, .feature-test .fail {
float: left;
width: 50px;
font-weight: bold;
color: #5f5; }
- /* line 383, _components.scss */
+ /* line 388, _components.scss */
.feature-test .fail {
color: #f55; }
-/* line 388, _components.scss */
+/* line 393, _components.scss */
.intro-copy {
display: none; }
View
623 www/assets/7/style/base.css
@@ -1,623 +0,0 @@
-@font-face {
- font-family: 'prowin';
- src: url('fonts/pro.ttf') format('truetype');
-}
-
-html {
- background: #004a86;
- background: -webkit-radial-gradient(center center, circle cover, #0091d5 0%, #0091d5 15%, #004a86 100%);
- background: -moz-radial-gradient(center center, circle cover, #0091d5 0%, #0091d5 15%, #004a86 100%);
- background: -ms-radial-gradient(center center, circle cover, #0091d5 0%, #0091d5 15%, #004a86 100%);
- background: -o-radial-gradient(center center, circle cover, #0091d5 0%, #0091d5 15%, #004a86 100%);
- background: radial-gradient(center center, circle cover, #0091d5 0%, #0091d5 15%, #004a86 100%);
- height: 100%;
-}
-
-html, body {
- margin: 0;
- padding: 0;
-}
-
-body {
- height: 100%;
- min-height: 100%;
- margin: 0;
- padding: 0 20px;
- background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA0CAYAAAA62j4JAAAAe0lEQVR42u3QMQ5AQABFQbWIaGiI6CjU7n+z9TdxCjvFO8CbrpSypTutaWqtCnClJ51pb60KsHzzc+pbqwKM6UhD6loLAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPC/XvoS9OcMtc3PAAAAAElFTkSuQmCC');
-}
-
-/* Reset */
- ul, ol, li, form, dl, dt, dd {
- padding: 0;
- margin: 0;
- display: block;
- }
- ul, ol {
- list-style: none;
- }
- article, aside, details, figcaption, figure,
- footer, header, hgroup, menu, nav, section {
- display: block;
- }
-/* Text/Fonts */
- select, input, textarea {
- color: #333;
- }
- body {
- font:13px/1.231 sans-serif;
- *font-size:small;
- color: #fff;
- }
- pre, code, kbd, samp { font-family: monospace, sans-serif; }
- /*
- sub, sup { font-size: 75%; line-height: 0; position: relative; }
- sup { top: -0.5em; }
- sub { bottom: -0.25em; }
- */
- p {
- line-height: 1.4;
- }
-/* Links */
- a img {
- border: 0;
- }
-
- a:link, a:visited {
- text-decoration: none;
- color: #ffb135;
- font-weight: bold;
- }
-
- a:hover, a:active {
- text-decoration: underline;
- }
-/* Forms */
- /* Webkit browsers add a 2px margin outside the chrome of form elements */
- select, input, textarea, button { font:99% sans-serif; margin: 0; }
-
- input, select {
- vertical-align: middle;
- _vertical-align: text-bottom;
- }
-
- input[type="radio"] { vertical-align: text-bottom; }
- input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
-
- textarea, input {
- font-family: arial, sans-serif;
- font-size: 1em;
- }
-
- button.custom {
- padding: 0;
- margin: 0;
- border: 0;
- background: none;
- cursor: pointer;
- overflow: visible;
- vertical-align: middle;
- font-size: 1em;
- width: auto;
- }
- button.custom::-moz-focus-inner {
- border: 0;
- padding: 0;
- }
- legend { *margin-left: -7px; }
-
- label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
-
-/*******************************************
- ********* Section specific styles *********
- *******************************************/
-
-/* Main container */
- .container {
- width: 100%;
- height: 100%;
- margin: 0 auto;
- position: relative;
- display: table;
- table-layout:fixed;
- }
- .container.intro {
- width: 835px;
- }
-/* Header */
- .container > header {
- display: table-cell;
- vertical-align: middle;
- height: 0;
- }
- .container.intro > header {
- height: 169px;
- }
- .container > header h1 {
- text-align: center;
- color: #fff;
- font: normal 5.3em/1 prowin, monospace;
- margin: 0;
- height: 20px;
- position: relative;
- white-space: nowrap;
- /* I don't really want a 1px blur, but it works around http://code.google.com/p/chromium/issues/detail?id=86702 */
- text-shadow: #004a86 0 6px 1px;
- -webkit-transform: scale(0.3);
- -moz-transform: scale(0.3);
- -ms-transform: scale(0.3);
- -o-transform: scale(0.3);
- transform: scale(0.3);
- opacity: 0;
- }
- .container > header h1 span {
- display: inline-block;
- vertical-align: middle;
- }
- .container > header h1::before, .container > header h1::after {
- background: url('imgs/sprites1.png') no-repeat -10px -6px;
- width: 133px;
- height: 89px;
- display: inline-block;
- vertical-align: middle;
- content: '';
- margin: 0 30px 0 0;
- }
- .container > header h1::after {
- margin: 0 0 0 18px;
- -webkit-transform: scaleX(-1);
- -moz-transform: scaleX(-1);
- -ms-transform: scaleX(-1);
- -o-transform: scaleX(-1);
- transform: scaleX(-1);
- }
- .container.intro > header h1 {
- -webkit-transform: scale(1);
- -moz-transform: scale(1);
- -ms-transform: scale(1);
- -o-transform: scale(1);
- transform: scale(1);
- opacity: 1;
- top: -46px;
- }
-/* Canvas */
- .canvas-view {
- text-align: center;
- display: table-row;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- -o-user-select: none;
- user-select: none;
- }
- .canvas-cell {
- display: table-cell;
- height: 100%;
- position: relative;
- }
- .canvas-inner {
- overflow: auto;
- background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX///8AAABVwtN+AAAAAnRSTlMzMz0oyR4AAAARSURBVAgdY/jPwIAVYRf9DwB+vw/xbMOy9QAAAABJRU5ErkJggg==');
- box-shadow: 0 4px 18px rgba(0,0,0,0.35);
- position: relative;
- height: 100%;
- }
- .opera .canvas-inner {
- /*
- Opera treats the 100% height as the height of the body element, not the
- table cell. This absolute layout works around that. However, it works
- because Opera recognises the position:relative on the table cell, which
- it shouldn't really. Using this fix on all browsers breaks layout in
- Firefox.
- */
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- height: auto;
- }
- .container.intro .canvas-cell {
- height: 170px;
- cursor: auto;
- }
- .container.intro .canvas-inner {
- overflow: hidden;
- }
- .sprite-canvas-container {
- position: absolute;
- min-width: 100%;
- min-height: 100%;
- }
- .container.intro .sprite-canvas-container {
- opacity: 0;
- }
- .sprite-canvas-container canvas {
- display: block;
- }
- /* Highlight */
- .sprite-canvas-container .highlight {
- background: rgba(0, 90, 255, 0.25);
- position: absolute;
- top: 0;
- left: 0;
- width: 5px;
- height: 5px;
- pointer-events: none;
- border: 1px solid rgba(0, 114, 255, 0.5);
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- display: none;
-
- -webkit-transition: 0.5s ease-in-out;
- -moz-transition: 0.5s ease-in-out;
- -ms-transition: 0.5s ease-in-out;
- -o-transition: 0.5s ease-in-out;
- transition: 0.5s ease-in-out;
-
- -webkit-transition-property: border, background;
- -moz-transition-property: border, background;
- -ms-transition-property: border, background;
- -o-transition-property: border, background;
- transition-property: border, background;
- }
-
- .sprite-canvas-container .highlight.high-vis {
- background-color: rgba(0, 255, 48, 0.25);
- border-color: rgba(0, 255, 51, 0.5);
- }
- /* Upload button */
- .upload-input {
- position: absolute;
- top: -5000px;
- left: -5000px;
- cursor: pointer;
- z-index: 10;
- }
- .select-btn, .demo-btn {
- width: 192px;
- border-radius: 100px;
- color: #fff;
- font: normal 2.4em/1 prowin, monospace;
- padding: 13px 28px;
- box-shadow: inset 0 0 6px rgba(255, 108, 0, 1), 0 3px 6px rgba(0, 0, 0, 0.7);
- background: -webkit-linear-gradient(top, rgba(255,185,90,1) 0%, rgba(255,108,0,1) 50%, rgba(199,58,0,1) 100%);
- background: -moz-linear-gradient(top, rgba(255,185,90,1) 0%, rgba(255,108,0,1) 50%, rgba(199,58,0,1) 100%);
- background: -ms-linear-gradient(top, rgba(255,185,90,1) 0%, rgba(255,108,0,1) 50%, rgba(199,58,0,1) 100%);
- background: -o-linear-gradient(top, rgba(255,185,90,1) 0%, rgba(255,108,0,1) 50%, rgba(199,58,0,1) 100%);
- background: linear-gradient(top, rgba(255,185,90,1) 0%, rgba(255,108,0,1) 50%, rgba(199,58,0,1) 100%);
- cursor: pointer;
- text-shadow: rgba(0,0,0,0.5) 0 2px 0;
- display: none;
- }
- .select-btn {
- margin: 0 48px 0 0;
- }
- .container.intro .select-btn, .container.intro .demo-btn {
- display: inline-block;
- }
- .start-buttons {
- position: absolute;
- top: 53px;
- left: 0;
- width: 100%;
- text-align: center;
- }
- /* Drop indicator */
- .drop-indicator {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(37, 207, 28, 0.2);
- box-shadow: inset 0 0 18px #175a00;
- display: none;
- pointer-events: none;
- }
- .drag-over .drop-indicator {
- display: block;
- opacity: 1;
- }
-/* Further detail */
- .further-detail {
- display: table-cell;
- overflow: hidden;
- }
- .container.intro .further-detail {
- height: 100%;
- }
- /* Intro copy */
- .intro-copy {
- display: none;
- }
- .container.intro .intro-copy {
- display: table-row;
- }
- .intro-copy > section {
- display: table-cell;
- padding: 30px;
- width: 50%;
- }
- .intro-copy h1 {
- font: normal 3.1em/1 prowin, monospace;
- margin: 0;
- text-shadow: #004a86 0 4px;
- }
- .intro-copy p {
- font: normal 1.1em/1.5 sans-serif;
- }
- /* Code ouput */
- .css-output {
- display: block;
- white-space: pre;
- background: rgba(0, 0, 0, 0.1);
- padding: 20px 30px;
- overflow: auto;
- position: relative;
- }
- .css-output code {
- font: normal 1.2em/1 prowin, monospace;
- }
- .container.intro .css-output {
- height: 0;
- padding-top: 0;
- padding-bottom: 0;
- overflow: hidden;
- }
- .css-output .file-path {
- position: relative;
- display: inline-block;
- }
- .css-output .file {
- cursor: pointer;
- }
- .css-output .file:hover .file-path::before {
- outline: 1px dotted #fff;
- position: absolute;
- top: -3px;
- left: 0;
- bottom: -4px;
- right: 0;
- content: "";
- }
- .css-output input[type='text'] {
- position: absolute;
- border: 1px solid #ccc;
- background: #fff;
- color: #333;
- font: normal 1.2em/1 prowin, monospace;
- padding: 3px;
- outline: none;
- }
-/* Toolbar */
- .toolbar-container {
- display: table-row;
- position: relative;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- -o-user-select: none;
- user-select: none;
- }
- .toolbar {
- overflow: hidden;
- padding: 5px 6px 0;
- position: relative;
- z-index: 1;
- border-style: solid;
- border-width: 1px 0;
- border-color: #e2e2e2 #000 #888;
- color: #333;
- border-radius: 5px 5px 0 0;
- background-image: -webkit-linear-gradient(top, #d0d0d0, #a7a7a7);
- background-image: -moz-linear-gradient(top, #d0d0d0, #a7a7a7);
- background-image: -ms-linear-gradient(top, #d0d0d0, #a7a7a7);
- background-image: -o-linear-gradient(top, #d0d0d0, #a7a7a7);
- background-image: linear-gradient(top, #d0d0d0, #a7a7a7);
- }
- .container.intro .toolbar {
- height: 0;
- padding-top: 0;
- padding-bottom: 0;
- border-top-width: 0;
- border-bottom-width: 0;
- }
- .toolbar-container [role='button'] {
- float: left;
- margin: 0 5px 5px 0;
- border: 1px solid #888;
- border-radius: 4px;
-
- background: -webkit-linear-gradient(top, #fefefe, #b8b8b8);
- background: -moz-linear-gradient(top, #fefefe, #b8b8b8);
- background: -ms-linear-gradient(top, #fefefe, #b8b8b8);
- background: -o-linear-gradient(top, #fefefe, #b8b8b8);
- background: linear-gradient(top, #fefefe, #b8b8b8);
- cursor: pointer;
- }
- .toolbar-container [role='button'] div {
- padding: 4px 10px 4px 26px;
- background: url('imgs/sprites1.png') no-repeat;
- }
- .toolbar-container [role='button'].active {
- background: #707070;
- box-shadow: inset 0 3px 7px rgba(0,0,0,0.6);
- color: #fff;
- }
- .toolbar-container [role='button'].no-label div {
- width: 26px;
- padding: 4px 0;
- text-indent: -5000px;
- }
- .toolbar-container .feedback {
- float: left;
- padding: 5px;
- color: #555;
- opacity: 0;
- }
- .toolbar-container .select-sprite {
- border-width: 1px;
- border-radius: 4px 0 0 4px;
- margin-right: 0;
- }
- .toolbar .select-sprite div {
- background-position: -863px 3px;
- }
- .toolbar .pick-bg {
- border-radius: 0 4px 4px 0;
- margin-right: 5px;
- border-left-width: 0;
- }
- .toolbar .pick-bg div {
- background-position: -864px -79px;
- }
- .toolbar .open-img div {
- background-position: -864px -37px;
- }
- .toolbar .invert-bg div {
- background-position: -867px -121px;
- }
- .toolbar .reload-img div {
- background-position: -867px -164px;
- }
-
-/* Footer */
- footer.main {
- display: table-row;
- overflow: hidden;
- background: rgba(0, 0, 0, .23);
- }
- footer.main p {
- float: right;
- padding: 14px 30px 0;
- margin: 0;
- }
- footer.main .the-team-logo {
- background: url('imgs/sprites1.png') no-repeat -154px -8px;
- width: 88px;
- height: 22px;
- display: inline-block;
- text-indent: -5000px;
- vertical-align: middle;
- margin: 0 0 0 4px;
- }
- footer.main ul {
- float: left;
- padding: 16px 30px;
- }
- footer.main li {
- display: inline;
- }
- footer.main li a:link, footer.main li a:visited {
- font-weight: normal;
- color: #fff;
- float: left;
- padding: 0 10px 0 0;
- margin: 0 10px 0 0;
- border-right: 1px solid #fff;
- }
- footer.main li:last-child a:link, footer.main li:last-child a:visited {
- padding: 0;
- margin: 0;
- border: none;
- }
-/* Feature tests */
- .feature-test {
- display: none;
- width: 800px;
- margin: 0 auto;
- text-align: center;
- }
- .not-supported .feature-test {
- display: block;
- }
- .not-supported .container {
- display: none;
- }
- .feature-test h1 {
- font: normal 2.5em sans-serif;
- margin: 0;
- padding: 40px 0;
- }
- .feature-test ul {
- display: inline-block;
- *display: inline;
- zoom: 1;
- }
- .feature-test li {
- margin: 10px auto;
- font-size: 1.1em;
- overflow: hidden;
- text-align: left;
- }
- .feature-test p {
- width: 600px;
- margin: 0 auto 20px;
- font-size: 1.1em;
- text-align: left;
- }
- .feature-test .pass, .feature-test .fail {
- float: left;
- width: 50px;
- font-weight: bold;
- color: #5f5;
- }
- .feature-test .fail {
- color: #f55;
- }
-
-/* Being responsible... */
-@media screen and (max-width: 872px) {
- .container.intro {
- width: 100%;
- }
-}
-@media screen and (max-width: 744px) {
- .intro-copy > section {
- padding: 20px;
- }
- footer.main p {
- padding-right: 20px;
- }
- footer.main ul {
- padding-left: 20px;
- }
- .css-output {
- padding: 15px 20px;
- }
- body {
- padding-left: 20px;
- padding-right: 20px;
- }
- .container.intro .select-btn, .container.intro .demo-btn {
- font-size: 1.6em;
- padding: 11px 22px;
- display: block;
- margin: 12px auto;
- }
- .select-btn {
- margin: 0 21px 0 0;
- }
- .start-buttons {
- top: 23px;
- }
- .container.intro > header {
- height: 91px;
- -webkit-transform: scale(0.7);
- -moz-transform: scale(0.7);
- -ms-transform: scale(0.7);
- -o-transform: scale(0.7);
- transform: scale(0.7);
- }
- .container.intro > header h1 {
- top: -32px;
- }
- .container > header h1:before, .container > header h1:after {
- display: none;
- }
-}
-@media screen and (max-width: 562px) {
- footer.main {
- display: none;
- }
-}
Please sign in to comment.
Something went wrong with that request. Please try again.