diff --git a/cms/static/sass/_assets.scss b/cms/static/sass/_assets.scss index c7b01ed07a..54ad25c0a3 100644 --- a/cms/static/sass/_assets.scss +++ b/cms/static/sass/_assets.scss @@ -1,11 +1,160 @@ .assets { input.asset-search-input { - position: absolute; - right: 0; - top: 5px; + float: left; width: 260px; background-color: #fff; } - + .upload-button { + @include blue-button; + float: left; + margin-right: 20px; + font-size: 12px; + } + + .asset-library { + @include clearfix; + + table { + width: 100%; + border-radius: 3px 3px 0 0; + border: 1px solid #c5cad4; + + td, + th { + padding: 10px 20px; + text-align: left; + vertical-align: middle; + } + + thead th { + background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .1)) #ced2db; + font-size: 12px; + font-weight: 700; + text-shadow: 0 1px 0 rgba(255, 255, 255, .5); + } + + tbody { + background: #fff; + + tr { + border-top: 1px solid #c5cad4; + + &:first-child { + border-top: none; + } + } + } + + .thumb-col { + width: 100px; + } + + .date-col { + width: 200px; + } + + .embed-col { + width: 70px; + } + + .thumb { + width: 100px; + max-height: 80px; + + img { + width: 100%; + } + } + } + + .pagination { + float: right; + margin: 15px 10px; + + ol, li { + display: inline; + } + + a { + display: inline-block; + height: 25px; + padding: 0 4px; + text-align: center; + line-height: 25px; + } + } + } +} + +.upload-modal { + display: none; + width: 640px !important; + margin-left: -320px !important; + + .modal-body { + height: auto !important; + overflow-y: auto !important; + text-align: center; + } + + .file-input { + display: none; + } + + .choose-file-button { + @include blue-button; + padding: 10px 82px 12px; + font-size: 17px; + } + + .progress-bar { + display: none; + width: 350px; + height: 50px; + margin: 30px auto 10px; + border: 1px solid $blue; + + &.loaded { + border-color: #66b93d; + + .progress-fill { + background: #66b93d; + } + } + } + + .progress-fill { + width: 0%; + height: 50px; + background: $blue; + color: #fff; + line-height: 48px; + } + + h1 { + float: none; + margin: 40px 0 30px; + font-size: 34px; + font-weight: 300; + } + + .close-button { + @include white-button; + position: absolute; + top: 0; + right: 15px; + width: 29px; + height: 29px; + padding: 0 !important; + border-radius: 17px !important; + line-height: 29px; + text-align: center; + } + + .copy-button { + @include white-button; + display: none; + margin-bottom: 100px; + } } \ No newline at end of file diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index abacff87c3..312d066078 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -24,10 +24,16 @@ a { } h1 { + float: left; font-size: 28px; margin: 36px 6px; } +.page-actions { + float: right; + margin-top: 42px; +} + .main-wrapper { position: relative; margin: 0 40px; @@ -37,6 +43,10 @@ h1 { position: relative; max-width: 1280px; margin: auto; + + > article { + clear: both; + } } .window { @@ -189,20 +199,21 @@ label { } } -.wip { - outline: 1px solid #f00 !important; - position: relative; -} - -.wip-box { - @extend .wip; - &:after { - content: "WIP"; - font-size: 8px; - padding: 2px; - background: #f00; - color: #fff; - @include position(absolute, 0px 0px 0 0); +body.show-wip { + .wip { + outline: 1px solid #f00 !important; + position: relative; } -} + .wip-box { + @extend .wip; + &:after { + content: "WIP"; + font-size: 8px; + padding: 2px; + background: #f00; + color: #fff; + @include position(absolute, 0px 0px 0 0); + } + } +} \ No newline at end of file diff --git a/cms/static/sass/_cms_mixins.scss b/cms/static/sass/_cms_mixins.scss index 0360fe5d37..d05c80dd71 100644 --- a/cms/static/sass/_cms_mixins.scss +++ b/cms/static/sass/_cms_mixins.scss @@ -72,7 +72,7 @@ &:hover { background-color: #d9e3ee; - color: #6d788b; + color: #6d788b; } } diff --git a/cms/static/sass/_graphics.scss b/cms/static/sass/_graphics.scss index 1ee1313073..35924cdeda 100644 --- a/cms/static/sass/_graphics.scss +++ b/cms/static/sass/_graphics.scss @@ -41,6 +41,13 @@ background: url(../img/list-icon.png) no-repeat; } +.close-icon { + display: inline-block; + width: 13px; + height: 12px; + background: url(../img/close-icon.png) no-repeat; +} + .home-icon { display: inline-block; width: 19px; diff --git a/cms/static/sass/_modal.scss b/cms/static/sass/_modal.scss index 203f5a776c..a60d5629e3 100644 --- a/cms/static/sass/_modal.scss +++ b/cms/static/sass/_modal.scss @@ -9,7 +9,7 @@ background: rgba(0, 0, 0, .8); } -.history-modal { +.modal { display: none; position: fixed; top: 60px;