From ec48ba45bfbed17c5718d6f15e142ad81d723a38 Mon Sep 17 00:00:00 2001 From: Philipp Dormann Date: Fri, 22 Mar 2019 17:34:07 +0100 Subject: [PATCH] add SCSS preprocessor to booty --- bl-kernel/admin/themes/booty/css/bludit.css | 410 +----------------- bl-kernel/admin/themes/booty/scss/README.md | 14 + bl-kernel/admin/themes/booty/scss/bludit.scss | 371 ++++++++++++++++ 3 files changed, 386 insertions(+), 409 deletions(-) create mode 100644 bl-kernel/admin/themes/booty/scss/README.md create mode 100644 bl-kernel/admin/themes/booty/scss/bludit.scss diff --git a/bl-kernel/admin/themes/booty/css/bludit.css b/bl-kernel/admin/themes/booty/css/bludit.css index eebeb418..f1291103 100644 --- a/bl-kernel/admin/themes/booty/css/bludit.css +++ b/bl-kernel/admin/themes/booty/css/bludit.css @@ -1,409 +1 @@ - -html { - height: 100%; - font-size: 0.9rem; - background: #fcfcfc; -} - -body { - background: #fcfcfc; -} - -/* - BOOTSTRAP Hacks -*/ - -@media (min-width: 1200px) { - .container { - max-width: 1250px; - } -} - -/* for small devices */ -@media (max-width: 575.98px) { - #jsmediaManagerButton, - #jscategoryButton, - #jsdescriptionButton { - width: 100%; - text-align: left; - } -} - -a { - color: #4a90e2; -} - -a:hover { - color: #4a90e2; -} - -.btn { - border-radius: 2px; -} - -.btn-primary { - background-color: #4F93E0; - border-color: #4a90e2; -} - -.btn-primary:hover { - background-color: #4585CF; - border-color: #4a90e2; -} - -.btn-light { - color: #212529; - background-color: #f3f3f3; - border-color: #ced4d9; -} - -.btn-form { - background-color: #F3F3F3; - border-color: #DDD; - color: #000; -} - -.btn-form:hover { - background-color: rgb(228, 228, 228); - border-color: #DDD; - color: #000; -} - -code { - padding: 3px 5px 2px; - margin: 0 1px; - background: #eaeaea; - background: rgba(0,0,0,.07); - color: #444; -} - -.list-group-sortable { - cursor: pointer; -} - -.modal-body { - padding: 2rem; -} - -.modal-footer { - background-color: rgb(247, 247, 247); -} - -.modal-dialog .btn-link { - color: #000; -} - -/* - LOGIN -*/ - -body.login { - background: rgb(255,255,255); - background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 53%); - height: 100%; -} - - -/* - DASHBOARD -*/ - -#dashboard ul.list-group.list-group-striped li { - border: none; - word-break: break-word; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} - -#dashboard ul.list-group.list-group-striped li:nth-of-type(even) { - background: #f1f1f1; - -} - -#dashboard div.quick-links-icons { - font-size: 3em; - width: 100%; -} - -#dashboard a.quick-links { - color: #777; -} - -#dashboard a.quick-links:hover { - text-decoration: none; - color: #4586d4; -} - -#hello-message { - padding: 10px 0; - color: #777; - margin-bottom: 20px; -} - -#hello-message span.oi { - top: 3px; -} - -.ct-series-a .ct-line { - /* Set the colour of this series line */ - stroke: #4a90e2; - /* Control the thikness of your lines */ - stroke-width: 2px; - /* Create a dashed line with a pattern */ -} - -.ct-series-a .ct-point { - /* Colour of your points */ - stroke: #4a90e2; - /* Size of your points */ - stroke-width: 8px; -} - -/* - ALERT -*/ - -#alert { - display: none; - position: fixed; - text-align: center; - border-radius: 0px; - border: 0; - z-index: 1000; - bottom: 0; - right: 0; - margin: 0; -} - -.alert-success { - background-color: #4586d4; - border-left: 6px solid #abd1ff !important; - color: #ffffff; -} - -.alert-danger { - background-color: #d44545; - border-left: 6px solid #ff9c9c !important; - color: #ffffff; -} - -/* - SIDEBAR -*/ - -div.sidebar .nav-item a { - padding-left:0; - padding-right:0; - color: #777; - padding-top: 5px; - padding-bottom: 5px; -} - -div.sidebar .nav-item a:hover { - text-decoration: underline; -} - -div.sidebar .nav-item h4 { - font-size: 1.3em; - text-transform: uppercase; - font-weight: 400; - margin-top: 10px; -} - -div.sidebar .nav-item span.oi { - color: #000; - font-size: 0.8em; - padding-right: 5px; -} - -/* - PLUGINS -*/ - -.plugin-form label { - display: block; - margin-top: 1rem !important; -} - -.plugin-form input[type="text"], -.plugin-form textarea, -.plugin-form select { - display: block; - width: 100%; - padding: .375rem .75rem; - font-size: 1rem; - line-height: 1.5; - color: #495057; - background-color: #fff; - background-clip: padding-box; - border: 1px solid #ced4da; - border-radius: .25rem; - transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; -} - -.plugin-form textarea { - min-height: 120px; -} - -.plugin-form span.tip { - display: block; - font-size: 80%; - font-weight: 400; - margin-top: .25rem; - color: #6c757d !important; -} - -/* - Manage > Content -*/ - -td.child { - padding-left: 30px; -} - -/* - Manage > New Content -*/ - -#jseditor { - background: #fff; - padding: 10px 5% !important; - font-size: 16px; - line-height: 1.5em; - border: 1px solid #ced4da; -} - -#jseditorSidebar { - display: none; - height: calc(100% - 45px); - width: 50%; - max-width: 350px; - position: absolute; - z-index: 50; - top: 45px; - right: 15px; - background-color: #fff; - overflow-x: hidden; - transition: 0.5s; - border-left: 1px solid #ccc; - border-right: 1px solid #ccc; - border-top: 1px solid #ccc; -} - -@media (max-width: 575.98px) { - #jseditorSidebar { - width: 100%; - max-width: 100%; - right: 0; - } - #jseditorToolbarRight button { - font-size: 0px !important; - } - #jseditorToolbarRight button span { - font-size: 16px !important; - } - .contentTools .btn { - font-size: 0px !important; - margin-right: 5px; - } - .contentTools .btn span { - font-size: 16px !important; - } -} - -#jseditorSidebar nav { - background: #f3f3f3; -} - -#jseditorSidebar nav a { - color: #000; -} - -#jseditorSidebar .nav-tabs .nav-link { - border: none; -} - -#jseditorSidebar .nav-link.active { - background: none; - border: none; - border-bottom: 3px solid #ccc; -} - -#jsshadow { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: rgba(255,255,255,0.7); - z-index: 10; - display: none; -} - -img.profilePicture { - width: 30px; - height: 30px; - border-radius: 30px; - border: 1px solid #ccc; -} - -/* Switch button */ -.switch { - position: relative; - height: 26px; - width: 140px; - background: #f3f3f3; - border: 1px solid #ced4d9; - border-radius: 2px; -} - -.switch-label { - position: relative; - z-index: 2; - float: left; - width: 50%; - line-height: 25px; - font-size: 11px; - text-align: center; - cursor: pointer; - margin: 0 !important; -} -.switch-label:active { - font-weight: bold; -} - -.switch-label-off { - padding-left: 2px; -} - -.switch-label-on { - padding-right: 2px; -} - -.switch-input { - display: none; -} - -.switch-input:checked + .switch-label { - font-weight: bold; - color: #fff; - transition: 0.15s ease-out; - transition-property: color, text-shadow; -} -.switch-input:checked + .switch-label-on ~ .switch-selection { - left: 50%; -} - -.switch-selection { - position: absolute; - z-index: 1; - top: 2px; - left: 2px; - display: block; - width: 50%; - height: 21px; - border-radius: 2px; - background-color: #6c757d; - transition: left 0.15s ease-out; -} +html{height:100%;font-size:0.9rem;background:#fcfcfc}body{background:#fcfcfc}body.login{background:-webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(53%, #fafafa));background:linear-gradient(0deg, #fff 0, #fafafa 53%);height:100%}@media (min-width: 1200px){.container{max-width:1250px}}@media (max-width: 575.98px){#jsmediaManagerButton{width:100%;text-align:left}#jscategoryButton{width:100%;text-align:left}#jsdescriptionButton{width:100%;text-align:left}#jseditorSidebar{width:100%;max-width:100%;right:0}#jseditorToolbarRight button{font-size:0}#jseditorToolbarRight button span{font-size:16px}.contentTools .btn{font-size:0;margin-right:5px}.contentTools .btn span{font-size:16px}}a{color:#4a90e2}a:hover{color:#4a90e2}.btn{border-radius:2px}.btn-primary{background-color:#4a90e2;border-color:#4a90e2}.btn-primary:hover{background-color:#4a90e2;border-color:#4a90e2}.btn-light{color:#212529;background-color:#f3f3f3;border-color:#ced4d9}.btn-form{background-color:#f3f3f3;border-color:#ddd;color:#000}.btn-form:hover{background-color:#e4e4e4;border-color:#ddd;color:#000}code{padding:3px 5px 2px;margin:0 1px;background:rgba(0,0,0,0.07);color:#444}.list-group-sortable{cursor:pointer}.modal-body{padding:2rem}.modal-footer{background-color:#f7f7f7}#dashboard ul.list-group.list-group-striped li{border:none;word-break:break-word;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}#dashboard ul.list-group.list-group-striped li:nth-of-type(even){background:#f1f1f1}#dashboard div.quick-links-icons{font-size:3em;width:100%}#dashboard a.quick-links{color:#777}#dashboard a.quick-links:hover{text-decoration:none;color:#4a90e2}#hello-message{padding:10px 0;color:#777;margin-bottom:20px}#hello-message span.oi{top:3px}.ct-series-a .ct-line{stroke:#4a90e2;stroke-width:2px}.ct-series-a .ct-point{stroke:#4a90e2;stroke-width:8px}#alert{display:none;position:fixed;text-align:center;border-radius:0;border:0;z-index:1000;bottom:0;right:0;margin:0}.alert-success{background-color:#4a90e2;border-left:6px solid #abd1ff;color:#fff}.alert-danger{background-color:#d44545;border-left:6px solid #ff9c9c;color:#fff}.plugin-form label{display:block;margin-top:1rem}.plugin-form input[type="text"]{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4d9;border-radius:.25rem;-webkit-transition:border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out}.plugin-form textarea{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4d9;border-radius:.25rem;-webkit-transition:border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;min-height:120px}.plugin-form select{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4d9;border-radius:.25rem;-webkit-transition:border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out}.plugin-form span.tip{display:block;font-size:80%;font-weight:400;margin-top:.25rem;color:#6c757d}#jseditor{background:#fff;padding:10px 5%;font-size:16px;line-height:1.5em;border:1px solid #ced4d9}#jseditorSidebar{display:none;height:calc(100% - 45px);width:50%;max-width:350px;position:absolute;z-index:50;top:45px;right:15px;background-color:#fff;overflow-x:hidden;-webkit-transition:0.5s;transition:0.5s;border-left:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc}#jseditorSidebar nav{background:#f3f3f3}#jseditorSidebar nav a{color:#000}#jseditorSidebar .nav-tabs .nav-link{border:none}#jseditorSidebar .nav-link.active{background:none;border:none;border-bottom:3px solid #ccc}#jsshadow{position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(255,255,255,0.7);z-index:10;display:none}.switch{position:relative;height:26px;width:140px;background:#f3f3f3;border:1px solid #ced4d9;border-radius:2px}.switch-label{position:relative;z-index:2;float:left;width:50%;line-height:25px;font-size:11px;text-align:center;cursor:pointer;margin:0}.switch-label:active{font-weight:bold}.switch-label-off{padding-left:2px}.switch-label-on{padding-right:2px}.switch-input{display:none}.switch-input:checked.switch-label{font-weight:bold;color:#fff;-webkit-transition:0.15s ease-out;transition:0.15s ease-out;-webkit-transition-property:color, text-shadow;transition-property:color, text-shadow}.switch-input:checked.switch-label-on ~ .switch-selection{left:50%}.switch-selection{position:absolute;z-index:1;top:2px;left:2px;display:block;width:50%;height:21px;border-radius:2px;background-color:#6c757d;-webkit-transition:left 0.15s ease-out;transition:left 0.15s ease-out}.modal-dialog .btn-link{color:#000}div.sidebar .nav-item a{padding-left:0;padding-right:0;color:#777;padding-top:5px;padding-bottom:5px}div.sidebar .nav-item a:hover{text-decoration:underline}div.sidebar .nav-item h4{font-size:1.3em;text-transform:uppercase;font-weight:400;margin-top:10px}div.sidebar .nav-item span.oi{color:#000;font-size:0.8em;padding-right:5px}td.child{padding-left:30px}img.profilePicture{width:30px;height:30px;border-radius:30px;border:1px solid #ccc} diff --git a/bl-kernel/admin/themes/booty/scss/README.md b/bl-kernel/admin/themes/booty/scss/README.md new file mode 100644 index 00000000..4e7a9b70 --- /dev/null +++ b/bl-kernel/admin/themes/booty/scss/README.md @@ -0,0 +1,14 @@ +# SCSS compiling +## tool +- https://github.com/ritwickdey/vscode-live-sass-compiler +## settings +``` +"liveSassCompile.settings.formats": [ + { + "format": "compressed", + "extensionName": ".css", + "savePath": "~/../css/" + } +], +"liveSassCompile.settings.generateMap": false +``` \ No newline at end of file diff --git a/bl-kernel/admin/themes/booty/scss/bludit.scss b/bl-kernel/admin/themes/booty/scss/bludit.scss new file mode 100644 index 00000000..090b29c8 --- /dev/null +++ b/bl-kernel/admin/themes/booty/scss/bludit.scss @@ -0,0 +1,371 @@ +$color_alabaster_approx: #fcfcfc; +$color_havelock_blue_approx: #4a90e2; +$color_shark_approx: #212529; +$color_concrete_approx: #f3f3f3; +$color_mischka_approx: #ced4d9; +$color_alto_approx: #ddd; +$black: #000; +$color_mercury_approx: #e4e4e4; +$color_gray_nurse_approx: #eaeaea; +$black_7: rgba(0, 0, 0, .07); +$color_tundora_approx: #444; +$color_black_haze_approx: #f7f7f7; +$white: #fff; +$alabaster_100: #fafafa; +$seashell: #f1f1f1; +$color_tapa_approx: #777; +$color_sail_approx: #abd1ff; +$color_valencia_approx: #d44545; +$color_sweet_pink_approx: #ff9c9c; +$color_abbey_approx: #495057; +$color_pale_sky_approx: #6c757d; +$color_celeste_approx: #ccc; +$white_70: rgba(255, 255, 255, 0.7); + +html { + height: 100%; + font-size: 0.9rem; + background: $color_alabaster_approx; +} +body { + background: $color_alabaster_approx; + &.login { + background: linear-gradient(0deg, $white 0, $alabaster_100 53%); + height: 100%; + } +} +@media (min-width: 1200px) { + .container { + max-width: 1250px; + } +} +@media (max-width: 575.98px) { + #jsmediaManagerButton { + width: 100%; + text-align: left; + } + #jscategoryButton { + width: 100%; + text-align: left; + } + #jsdescriptionButton { + width: 100%; + text-align: left; + } + #jseditorSidebar { + width: 100%; + max-width: 100%; + right: 0; + } + #jseditorToolbarRight button { + font-size: 0; + span { + font-size: 16px; + } + } + .contentTools .btn { + font-size: 0; + margin-right: 5px; + span { + font-size: 16px; + } + } +} +a { + color: $color_havelock_blue_approx; + &:hover { + color: $color_havelock_blue_approx; + } +} +.btn { + border-radius: 2px; +} +.btn-primary { + background-color: $color_havelock_blue_approx; + border-color: $color_havelock_blue_approx; + &:hover { + background-color: $color_havelock_blue_approx; + border-color: $color_havelock_blue_approx; + } +} +.btn-light { + color: $color_shark_approx; + background-color: $color_concrete_approx; + border-color: $color_mischka_approx; +} +.btn-form { + background-color: $color_concrete_approx; + border-color: $color_alto_approx; + color: $black; + &:hover { + background-color: $color_mercury_approx; + border-color: $color_alto_approx; + color: $black; + } +} +code { + padding: 3px 5px 2px; + margin: 0 1px; + background: $black_7; + color: $color_tundora_approx; +} +.list-group-sortable { + cursor: pointer; +} +.modal-body { + padding: 2rem; +} +.modal-footer { + background-color: $color_black_haze_approx; +} +#dashboard { + ul.list-group.list-group-striped li { + border: none; + word-break: break-word; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + &:nth-of-type(even) { + background: $seashell; + } + } + div.quick-links-icons { + font-size: 3em; + width: 100%; + } + a.quick-links { + color: $color_tapa_approx; + &:hover { + text-decoration: none; + color: $color_havelock_blue_approx; + } + } +} +#hello-message { + padding: 10px 0; + color: $color_tapa_approx; + margin-bottom: 20px; + span.oi { + top: 3px; + } +} +.ct-series-a { + .ct-line { + stroke: $color_havelock_blue_approx; + stroke-width: 2px; + } + .ct-point { + stroke: $color_havelock_blue_approx; + stroke-width: 8px; + } +} +#alert { + display: none; + position: fixed; + text-align: center; + border-radius: 0; + border: 0; + z-index: 1000; + bottom: 0; + right: 0; + margin: 0; +} +.alert-success { + background-color: $color_havelock_blue_approx; + border-left: 6px solid $color_sail_approx; + color: $white; +} +.alert-danger { + background-color: $color_valencia_approx; + border-left: 6px solid $color_sweet_pink_approx; + color: $white; +} +.plugin-form { + label { + display: block; + margin-top: 1rem; + } + input[type="text"] { + display: block; + width: 100%; + padding: .375rem .75rem; + font-size: 1rem; + line-height: 1.5; + color: $color_abbey_approx; + background-color: $white; + background-clip: padding-box; + border: 1px solid $color_mischka_approx; + border-radius: .25rem; + transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; + } + textarea { + display: block; + width: 100%; + padding: .375rem .75rem; + font-size: 1rem; + line-height: 1.5; + color: $color_abbey_approx; + background-color: $white; + background-clip: padding-box; + border: 1px solid $color_mischka_approx; + border-radius: .25rem; + transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; + min-height: 120px; + } + select { + display: block; + width: 100%; + padding: .375rem .75rem; + font-size: 1rem; + line-height: 1.5; + color: $color_abbey_approx; + background-color: $white; + background-clip: padding-box; + border: 1px solid $color_mischka_approx; + border-radius: .25rem; + transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; + } + span.tip { + display: block; + font-size: 80%; + font-weight: 400; + margin-top: .25rem; + color: $color_pale_sky_approx; + } +} +#jseditor { + background: $white; + padding: 10px 5%; + font-size: 16px; + line-height: 1.5em; + border: 1px solid $color_mischka_approx; +} +#jseditorSidebar { + display: none; + height: calc(100% - 45px); + width: 50%; + max-width: 350px; + position: absolute; + z-index: 50; + top: 45px; + right: 15px; + background-color: $white; + overflow-x: hidden; + transition: 0.5s; + border-left: 1px solid $color_celeste_approx; + border-right: 1px solid $color_celeste_approx; + border-top: 1px solid $color_celeste_approx; + nav { + background: $color_concrete_approx; + a { + color: $black; + } + } + .nav-tabs .nav-link { + border: none; + } + .nav-link.active { + background: none; + border: none; + border-bottom: 3px solid $color_celeste_approx; + } +} +#jsshadow { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: $white_70; + z-index: 10; + display: none; +} +.switch { + position: relative; + height: 26px; + width: 140px; + background: $color_concrete_approx; + border: 1px solid $color_mischka_approx; + border-radius: 2px; +} +.switch-label { + position: relative; + z-index: 2; + float: left; + width: 50%; + line-height: 25px; + font-size: 11px; + text-align: center; + cursor: pointer; + margin: 0; + &:active { + font-weight: bold; + } +} +.switch-label-off { + padding-left: 2px; +} +.switch-label-on { + padding-right: 2px; +} +.switch-input { + display: none; + &:checked { + &.switch-label { + font-weight: bold; + color: $white; + transition: 0.15s ease-out; + transition-property: color, text-shadow; + } + &.switch-label-on ~ .switch-selection { + left: 50%; + } + } +} +.switch-selection { + position: absolute; + z-index: 1; + top: 2px; + left: 2px; + display: block; + width: 50%; + height: 21px; + border-radius: 2px; + background-color: $color_pale_sky_approx; + transition: left 0.15s ease-out; +} +.modal-dialog .btn-link { + color: $black; +} +div.sidebar .nav-item { + a { + padding-left: 0; + padding-right: 0; + color: $color_tapa_approx; + padding-top: 5px; + padding-bottom: 5px; + &:hover { + text-decoration: underline; + } + } + h4 { + font-size: 1.3em; + text-transform: uppercase; + font-weight: 400; + margin-top: 10px; + } + span.oi { + color: $black; + font-size: 0.8em; + padding-right: 5px; + } +} +td.child { + padding-left: 30px; +} +img.profilePicture { + width: 30px; + height: 30px; + border-radius: 30px; + border: 1px solid $color_celeste_approx; +}