Continued on week view styles
This commit is contained in:
Kyle Fiedler
committed by
Matthew Mongeau
Matthew Mongeau
parent
2d97c0fc05
commit
e9ce333999
@@ -2,6 +2,7 @@
|
||||
$fg-column: 70px;
|
||||
$fg-gutter: 26px;
|
||||
$fg-max-columns: 12;
|
||||
$body-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
@@ -10,7 +11,7 @@ html {
|
||||
body {
|
||||
@include clearfix();
|
||||
height: 100%;
|
||||
font: 14px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
||||
font: 14px $body-font-family;
|
||||
|
||||
> section {
|
||||
display: table;
|
||||
@@ -57,6 +58,10 @@ a {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: $body-font-family;
|
||||
}
|
||||
|
||||
input[type="submit"], .button {
|
||||
border: 1px solid #ccc;
|
||||
background: #efefef;
|
||||
|
||||
@@ -2,7 +2,6 @@ section.cal {
|
||||
@include box-sizing(border-box);
|
||||
padding: 25px;
|
||||
@include clearfix;
|
||||
overflow: scroll;
|
||||
|
||||
> header {
|
||||
@include clearfix;
|
||||
@@ -106,12 +105,22 @@ section.cal {
|
||||
display: none;
|
||||
@include position(absolute, 30px 0 0 0);
|
||||
width: 90%;
|
||||
background: rgba(#000, .8);
|
||||
background: rgba(#000, .9);
|
||||
padding: 10px;
|
||||
@include box-sizing(border-box);
|
||||
@include border-radius(3px);
|
||||
z-index: 99;
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
background: rgba(#000, .8);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
@include position(absolute, -5px 0 0 50%);
|
||||
@include transform(rotate(45deg));
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
border-bottom: 0;
|
||||
@@ -157,67 +166,67 @@ section.cal {
|
||||
|
||||
section.new-section {
|
||||
margin-top: 10px;
|
||||
@include inline-block();
|
||||
position: relative;
|
||||
|
||||
> a {
|
||||
@extend .button;
|
||||
@include inline-block();
|
||||
display: block;
|
||||
}
|
||||
|
||||
section {
|
||||
display: none;
|
||||
@include position(absolute, 32px 0 0 0);
|
||||
background: rgba(#000, .8);
|
||||
min-width: 300px;
|
||||
padding: 10px;
|
||||
@include box-sizing(border-box);
|
||||
@include border-radius(3px);
|
||||
z-index: 99;
|
||||
|
||||
header {
|
||||
background: #fff;
|
||||
text-align: left;
|
||||
&:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
background: rgba(#000, .8);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
@include position(absolute, -5px 0 0 20%);
|
||||
@include transform(rotate(45deg));
|
||||
}
|
||||
|
||||
form {
|
||||
background: #fff;
|
||||
width: 50%;
|
||||
padding: 6px;
|
||||
border: 1px solid #000;
|
||||
margin: 0 auto;
|
||||
@include box-shadow(0 0 2px #333);
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
background: #fff;
|
||||
border-left: 1px solid #000;
|
||||
border-top: 1px solid #000;
|
||||
content: " ";
|
||||
display: block;
|
||||
height: 10px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
@include transform(rotate(45deg));
|
||||
width: 10px;
|
||||
z-index: 0;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
select {
|
||||
margin-bottom: 6px;
|
||||
width: 100%;
|
||||
li {
|
||||
border-bottom: 0;
|
||||
background: none;
|
||||
margin-bottom: 6px;
|
||||
|
||||
option {
|
||||
padding: 10px 0 !important;
|
||||
}
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
@include box-sizing(border-box);
|
||||
border-color: #000;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
select {
|
||||
width: 100%;
|
||||
@include box-sizing(border-box);
|
||||
|
||||
a {
|
||||
option {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
float: left;
|
||||
}
|
||||
a {
|
||||
float: right;
|
||||
|
||||
&:last-child {
|
||||
float: right;
|
||||
&:first-child {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -232,19 +241,24 @@ section.cal {
|
||||
}
|
||||
|
||||
body.content
|
||||
section.cal {
|
||||
width: flex-grid(3) + flex-gutter();
|
||||
float: left;
|
||||
@include box-sizing(border-box);
|
||||
section.cal {
|
||||
width: flex-grid(3) + flex-gutter();
|
||||
float: left;
|
||||
overflow: scroll;
|
||||
@include box-sizing(border-box);
|
||||
|
||||
> header ul {
|
||||
> header ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ol {
|
||||
li {
|
||||
@include box-sizing(border-box);
|
||||
width: 100%;
|
||||
|
||||
&.create-module {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ol {
|
||||
li {
|
||||
@include box-sizing(border-box);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,152 +3,190 @@ section.week-new,
|
||||
section.sequence-edit {
|
||||
|
||||
> header {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-bottom: 2px solid #333;
|
||||
@include clearfix();
|
||||
padding: 6px;
|
||||
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
float: left;
|
||||
margin-top: 8px 6px;
|
||||
margin: 8px 6px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
a {
|
||||
float: right;
|
||||
@extend .button;
|
||||
display: block;
|
||||
section.goals {
|
||||
background: #eee;
|
||||
padding: 6px;
|
||||
border-top: 1px solid #ccc;
|
||||
|
||||
header {
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
@include inline-block();
|
||||
}
|
||||
|
||||
p {
|
||||
@include inline-block();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-top: 6px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
header {
|
||||
background: #666;
|
||||
color: #fff;
|
||||
padding: 6px;
|
||||
border-bottom: 1px solid #333;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
> section.content {
|
||||
@include box-sizing(border-box);
|
||||
padding: 20px;
|
||||
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
section.filters {
|
||||
@include clearfix;
|
||||
margin-bottom: 10px;
|
||||
background: #efefef;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
ul {
|
||||
@include clearfix();
|
||||
list-style: none;
|
||||
padding: 6px;
|
||||
|
||||
li {
|
||||
@include inline-block();
|
||||
|
||||
&.advanced {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar {
|
||||
width: flex-grid(3, 9) + flex-gutter(9);
|
||||
float: left;
|
||||
background: #ccc;
|
||||
border-right: 1px solid #333;
|
||||
@include box-sizing(border-box);
|
||||
|
||||
> div {
|
||||
display: table;
|
||||
border: 1px solid;
|
||||
width: 100%;
|
||||
section {
|
||||
height: 50%;
|
||||
header {
|
||||
background: #eee;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
> ul {
|
||||
list-style: none;
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
> li {
|
||||
padding: 6px;
|
||||
border-bottom: 1px solid #666;
|
||||
background: #eee;
|
||||
&.modules {
|
||||
@include box-sizing(border-box);
|
||||
display: table-cell;
|
||||
width: flex-grid(6, 9);
|
||||
border-right: 1px solid #333;
|
||||
|
||||
&.new-module {
|
||||
position: relative;
|
||||
ol {
|
||||
list-style: none;
|
||||
border-bottom: 1px solid #333;
|
||||
|
||||
ul.new-dropdown {
|
||||
li {
|
||||
border-bottom: 1px solid #333;
|
||||
|
||||
&:last-child{
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: none;
|
||||
padding: 6px 0 6px 6px;
|
||||
|
||||
&:first-child {
|
||||
display: block;
|
||||
h3 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
ol {
|
||||
border-left: 1px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.scratch-pad {
|
||||
@include box-sizing(border-box);
|
||||
display: table-cell;
|
||||
width: flex-grid(3, 9) + flex-gutter(9);
|
||||
|
||||
ol {
|
||||
list-style: none;
|
||||
border-bottom: 1px solid #999;
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid #999;
|
||||
background: #f9f9f9;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
padding: 6px;
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.new-module {
|
||||
position: relative;
|
||||
|
||||
ul.new-dropdown {
|
||||
list-style: none;
|
||||
|
||||
&:hover {
|
||||
li {
|
||||
display: block;
|
||||
padding: 6px 0;
|
||||
display: none;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
li {
|
||||
display: block;
|
||||
padding: 6px 0;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 6px;
|
||||
border-bottom: 1px solid #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.weeks-content {
|
||||
width: flex-grid(6, 9);
|
||||
float: left;
|
||||
@include box-sizing(border-box);
|
||||
|
||||
header {
|
||||
@include clearfix;
|
||||
|
||||
h2 {
|
||||
float: left;
|
||||
}
|
||||
|
||||
form {
|
||||
float: right;
|
||||
margin: -2px 0;
|
||||
|
||||
input {
|
||||
border: 1px solid #000;
|
||||
background: #ddd;
|
||||
padding: 2px 4px;
|
||||
@include border-radius(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
section {
|
||||
&.filters {
|
||||
border-bottom: 1px solid #999;
|
||||
|
||||
ul {
|
||||
@include clearfix();
|
||||
list-style: none;
|
||||
p {
|
||||
padding: 6px;
|
||||
|
||||
li {
|
||||
@include inline-block();
|
||||
|
||||
&.advanced {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.modules {
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
padding: 6px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #333;
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
border-bottom: 1px solid #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user