Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge pull request #1 from JasonAGross/gh-pages

New Hotness: CSS
  • Loading branch information...
commit ad42aa011da8422023678f8bcff61ccb514efa8b 2 parents 3ddf5fe + e9ac8db
@cgack authored
Showing with 119 additions and 67 deletions.
  1. +119 −67 griddle.css
View
186 griddle.css
@@ -474,13 +474,11 @@ html body * dd.clear
height: 0;
}
-
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
-.ui-icon-triangle-1-s
-{
+.ui-icon-triangle-1-s {
background-position: -32px -16px;
}
.ui-widget
@@ -499,8 +497,7 @@ html body * dd.clear
margin-right: .625em;
}
-.fieldGroup label
-{
+.fieldGroup label {
display: block;
margin-top: 10px;
}
@@ -527,47 +524,51 @@ html body * dd.clear
.griddleTopControls .addRegion, .griddleBottomControls .addRow {
float: right;
}
-.passiveGrid, .activeGrid, .passGrid
-{
+
+.passiveGrid, .activeGrid, .passGrid {
position: absolute;
left: 0;
height: 100%;
width: 100%;
}
-.passGrid
-{
+
+.passGrid {
position:relative;
}
-.passiveGrid div
-{
+
+.passiveGrid div {
background: #f5f5f5;
height: 100%;
box-sizing: border-box;
border-radius: 3px;
}
-.passGrid .grid_12
-{
+
+.passGrid .grid_12 {
height: 55px;
border-top: 1px dashed #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
box-sizing: border-box;
}
-.passGrid .grid_12:first-child
-{
+
+.passGrid .grid_12:first-child {
border-top: 1px solid #ccc;
}
+
.passGrid .grid_12:last-child {
border-bottom: 1px solid #ccc;
}
-.activeGrid .moveable
-{
+
+.activeGrid .moveable {
height: 55px;
width: 23%;
+
margin-left: 1%;
margin-right: 1%;
+ font-family: Helvetica, Arial, sans-serif;
text-align: center;
- line-height: 55px;
+ line-height: 70px;
+ color: #285559;
overflow: hidden;
box-sizing: border-box;
position: relative;
@@ -578,8 +579,61 @@ html body * dd.clear
-moz-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
-.activeGrid .contentregion
-{
+
+.activeGrid .moveable:before {
+ position: absolute;
+ font-family: "Times New Roman", Times, serif;
+ content: '==';
+ text-align: center;
+ line-height: 15px;
+ text-indent: -15px;
+ color: #cce6e8;
+ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+ display: block;
+ top: 0;
+ width: 100%;
+ height: 15px;
+ margin-left: 15px;
+ border-bottom: 1px solid #b7d7da;
+
+ background-color: #aedce1;
+ background-image: -moz-linear-gradient(top, #b9e5ea, #90c7cd);
+ background-image: -ms-linear-gradient(top, #b9e5ea, #90c7cd);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b9e5ea), to(#90c7cd));
+ background-image: -webkit-linear-gradient(top, #b9e5ea, #90c7cd);
+ background-image: -o-linear-gradient(top, #b9e5ea, #90c7cd);
+ background-image: linear-gradient(top, #b9e5ea, #90c7cd);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9e5ea', endColorstr='#90c7cd', GradientType=0);
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+
+ -webkit-box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
+ -moz-box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.activeGrid .moveable:hover {
+ cursor: move;
+}
+
+.activeGrid .moveable:after {
+ content: '';
+ width: 14px;
+ height: 14px;
+ background: url('https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/images/ui-icons_222222_256x240.png') -80px -224px no-repeat;
+ display: block;
+ position: absolute;
+ right: 2px;
+ bottom: 2px;
+}
+
+.activeGrid .ui-draggable-dragging {
+ -webkit-box-shadow: 0 25px 25px -25px rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: 0 25px 25px -25px rgba(0, 0, 0, 0.5);
+ box-shadow: 0 25px 25px -25px rgba(0, 0, 0, 0.5);
+}
+
+.activeGrid .contentregion {
height: 55px;
width: 48%;
/*margin-left: 1%; */
@@ -592,8 +646,8 @@ html body * dd.clear
-moz-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
-.contentregion .moveable
-{
+
+.contentregion .moveable {
margin-left: auto 0;
margin-right: auto 0;
margin-bottom: 1%;
@@ -602,17 +656,6 @@ html body * dd.clear
-moz-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
-.activeGrid .moveable:after
-{
- content: '';
- width: 14px;
- height: 14px;
- background: url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/images/ui-icons_222222_256x240.png) -80px -224px no-repeat;
- display: block;
- position: absolute;
- right: 2px;
- bottom: 2px;
-}
.sizeRef
{
@@ -733,50 +776,59 @@ html body * dd.clear
background: #29911f;
}
-.sortableregion
-{
+.sortableregion {
width: 100%;
height:100%;
padding-left: 5px;
}
-.deleteme
-{
-width: 15px;
-height: 15px;
-background: #b6341a;
-display: block;
-top: 0;
-left: 0;
-float: left;
-color: #fff;
-line-height: 15px;
-font-size: 11px;
-}
-.deletemeright
-{
-width: 15px;
-height: 15px;
-background: #b6341a;
-display: block;
-top: 0;
-left: 0;
-float: right;
-color: #fff;
-line-height: 15px;
-font-size: 11px;
-text-align: center;
-}
-.deleteme:hover, .deletemeright:hover
-{
+
+.deleteme {
+ font-family: Verdana, Geneva, sans-serif;
+ width: 15px;
+ height: 15px;
+ background: #b6341a;
+ display: block;
+ top: 0;
+ left: 0;
+ float: left;
+ color: #fff;
+ line-height: 15px;
+ font-size: 9px;
+
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.deletemeright {
+ font-family: Verdana, Geneva, sans-serif;
+ width: 15px;
+ height: 15px;
+ background: #b6341a;
+ display: block;
+ top: 0;
+ left: 0;
+ float: right;
+ color: #fff;
+ line-height: 15px;
+ font-size: 9px;
+ text-align: center;
+ border-right: 1px solid #7e1c08;
+
+ -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+ -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+
+.deleteme:hover, .deletemeright:hover {
cursor:pointer;
font-weight: bold;
}
-.ui-state-hover
-{
+
+.ui-state-hover {
border: 3px solid #4ECDC4;
}
pre#output {
margin: 1%;
}
-
Please sign in to comment.
Something went wrong with that request. Please try again.