section.cal { @include box-sizing(border-box); @include clearfix; padding: 20px; > header { display: none; @include clearfix; margin-bottom: 10px; opacity: .4; @include transition; text-shadow: 0 1px 0 #fff; &:hover { opacity: 1; } h2 { @include inline-block(); text-transform: uppercase; letter-spacing: 1px; font-size: 14px; padding: 6px 6px 6px 0; font-size: 12px; margin: 0; } ul { @include inline-block; float: right; margin: 0; padding: 0; &.actions { float: left; } li { @include inline-block; margin-right: 6px; border-right: 1px solid #ddd; padding: 0 6px 0 0; &:last-child { border-right: 0; margin-right: 0; padding-right: 0; } a { @include inline-block(); font-size: 12px; @include inline-block; margin: 0 6px; font-style: italic; } ul { @include inline-block(); margin: 0; li { @include inline-block(); padding: 0; border-left: 0; } } } } } ol { list-style: none; @include clearfix; border: 1px solid lighten( $dark-blue , 30% ); background: #FFF; width: 100%; @include box-sizing(border-box); margin: 0; padding: 0; @include box-shadow(0 0 5px lighten($dark-blue, 45%)); @include border-radius(3px); overflow: hidden; > li { border-right: 1px solid lighten($dark-blue, 40%); border-bottom: 1px solid lighten($dark-blue, 40%); @include box-sizing(border-box); float: left; width: flex-grid(3) + ((flex-gutter() * 3) / 4); background-color: $light-blue; @include box-shadow(inset 0 0 0 1px lighten($light-blue, 8%)); &:hover { li.create-module { opacity: 1; } } &:nth-child(4n) { border-right: 0; } header { border-bottom: 1px solid lighten($dark-blue, 40%); @include box-shadow(0 2px 2px $light-blue); display: block; margin-bottom: 2px; background: #FFF; h1 { font-size: 14px; text-transform: uppercase; border-bottom: 1px solid lighten($dark-blue, 60%); padding: 6px; color: $bright-blue; margin: 0; a { color: $bright-blue; display: block; padding: 6px; margin: -6px; &:hover { color: darken($bright-blue, 10%); background: lighten($yellow, 10%); } } } ul { margin: 0; padding: 0; li { background: #fff; color: #888; border-bottom: 0; font-size: 12px; @include box-shadow(none); } } } ul { list-style: none; margin: 0 0 1px 0; padding: 0; li { border-bottom: 1px solid darken($light-blue, 6%); // @include box-shadow(0 1px 0 lighten($light-blue, 4%)); overflow: hidden; position: relative; text-shadow: 0 1px 0 #fff; &:hover { background-color: lighten($yellow, 14%); a.draggable { background-color: lighten($yellow, 14%); opacity: 1; } } &.editable { padding: 3px 6px; } a { color: lighten($dark-blue, 10%); display: block; padding: 6px 35px 6px 6px; &:hover { background-color: lighten($yellow, 10%); } &.draggable { background-color: $light-blue; opacity: .3; padding: 0; &:hover { background-color: lighten($yellow, 10%); } } } &.create-module { position: relative; opacity: 0; @include transition(all 3s ease-in-out); background: darken($light-blue, 2%); > div { background: $dark-blue; @include box-shadow(0 0 5px darken($light-blue, 60%)); @include box-sizing(border-box); display: none; margin-left: 3%; padding: 10px; @include position(absolute, 30px 0 0 0); width: 90%; z-index: 99; ul { li { border-bottom: 0; background: none; input { @include box-sizing(border-box); width: 100%; } select { @include box-sizing(border-box); width: 100%; option { font-size: 14px; } } div { margin-top: 10px; } a { color: $light-blue; float: right; &:first-child { float: left; } &:hover { color: #fff; } } } } } } } } } } section.new-section { margin: 10px 0 40px; @include inline-block(); position: relative; > a { @extend .button; display: block; } section { display: none; @include position(absolute, 30px 0 0 0); background: rgba(#000, .8); min-width: 300px; 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 20%); @include transform(rotate(45deg)); } form { ul { list-style: none; li { border-bottom: 0; background: none; margin-bottom: 6px; input { width: 100%; @include box-sizing(border-box); border-color: #000; padding: 6px; } select { width: 100%; @include box-sizing(border-box); option { font-size: 14px; } } a { float: right; &:first-child { float: left; } } } } } } } } body.content section.cal { width: flex-grid(3); float: left; overflow: scroll; @include box-sizing(border-box); opacity: .4; @include transition(); &:hover { opacity: 1; width: flex-grid(5) + flex-gutter(); + section.main-content { width: flex-grid(7); } } > header { @include transition; overflow: hidden; > a { display: none; } ul { float: none; display: block; li { ul { display: inline; } } } } ol { li { @include box-sizing(border-box); width: 100%; border-right: 0; &.create-module { display: none; } } } }