Attachment 124665 Details for Bug 28978 – Bug 28978: Convert installer CSS to SCSS

[patch] Bug 28978: Convert installer CSS to SCSS

Bug-28978-Convert-installer-CSS-to-SCSS.patch (text/plain), 6.76 KB, created by Owen Leonard on 2021-09-08 23:43:39 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Owen Leonard

Created: 2021-09-08 23:43:39 UTC

Size: 6.76 KB

patch

obsolete

>From 0ae9d2a8dffdb30084105be413323ccf200cb65e Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Wed, 8 Sep 2021 23:30:11 +0000
>Subject: [PATCH] Bug 28978: Convert installer CSS to SCSS
>
>This patch creates a new SCSS file, installer.scss, from which
>installer.css will be compiled.
>
>Most of the resulting CSS is unchanged, but some minor sections were
>removed because they were obsolete. The jQueryUI-specific section isn't
>fully converted to SCSS because it's going to go away with the addition
>of Flatpickr.
>
>To test, apply the patch and rebuild the staff client SCSS
>(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
>
>- Confirm that koha-tmpl/intranet-tmpl/prog/css/installer.css is
>  updated.
>- Go through the complete web installation process, including
>  onboarding, to confirm that everything is styled as before.
>---
> .../intranet-tmpl/prog/css/src/installer.scss | 299 ++++++++++++++++++
> 1 file changed, 299 insertions(+)
> create mode 100644 koha-tmpl/intranet-tmpl/prog/css/src/installer.scss
>
>diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss b/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss
>new file mode 100644
>index 0000000000..19301fcec1
>--- /dev/null
>+++ b/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss
>@@ -0,0 +1,299 @@
>+body {
>+    background-color: #EEE;
>+    font-family: arial, verdana, helvetica, sans-serif;
>+    text-align: left;
>+}
>+
>+h1 {
>+    font-size: 161.6%;
>+    font-weight: bold;
>+}
>+
>+h2 {
>+    background-color: #eee;
>+    border-radius: 4px;
>+    font-size: 146.5%;
>+    font-weight: bold;
>+    padding: .5em;
>+    text-shadow: 1px 1px 0 #FFF;
>+}
>+
>+h3 {
>+    color: #003366;
>+    font-size: 131%;
>+    font-weight: bold;
>+}
>+
>+hr {
>+    margin-bottom: .5em;
>+    margin-top: .5em;
>+}
>+
>+.installer-main {
>+    background-color: #FFF;
>+    border-radius: 5px;
>+    box-shadow: 0 2px 2px 0 rgba(50, 50, 50, 0.5);
>+    margin-bottom: 3%;
>+    margin-top: 3%;
>+    padding: 1em;
>+}
>+
>+ul,
>+ol {
>+    padding: 5px 5px 5px 20px;
>+}
>+
>+#logo {
>+    background: url(../img/koha-logo.gif) no-repeat top center;
>+    margin-bottom: .5em;
>+    margin-top: 0;
>+
>+    a {
>+        border-bottom: none;
>+        display: block;
>+        height: 74px;
>+        text-indent: -1000px;
>+    }
>+}
>+
>+
>+.bg-danger {
>+    padding: .2em .4em;
>+}
>+
>+.step a,
>+.step input {
>+    font-size: 2em;
>+}
>+
>+td {
>+    input {
>+        font-size: 1.5em;
>+    }
>+}
>+
>+.step,
>+th {
>+    text-align: right;
>+}
>+
>+#footer {
>+    border-top: 1px solid #ccc;
>+    font-style: italic;
>+    padding-top: 1em;
>+    text-align: center;
>+}
>+
>+.update_error {
>+    color: red;
>+    font-weight: bold;
>+}
>+
>+.checkbox {
>+    margin-bottom: 1em;
>+}
>+
>+fieldset {
>+    &.rows {
>+        border-width: 0;
>+        clear: left;
>+        float: left;
>+        font-size: 90%;
>+        margin: .9em 0 0 0;
>+        padding: 0;
>+        width: 100%;
>+
>+        legend {
>+            border: 0;
>+            font-size: 110%;
>+            font-weight: bold;
>+            margin-bottom: 0;
>+            margin-left: 1em;
>+        }
>+
>+        label {
>+            float: left;
>+            font-weight: bold;
>+            margin-right: 1em;
>+            text-align: right;
>+            width: 9em;
>+
>+            &.error {
>+                color: #cc0000;
>+                float: none;
>+                margin-left: 1em;
>+                width: auto;
>+            }
>+        }
>+
>+        span.label {
>+            border-radius: 0;
>+            color: inherit;
>+            display: inline;
>+            float: left;
>+            font-size: inherit;
>+            font-weight: bold;
>+            line-height: 1;
>+            margin-right: 1em;
>+            padding: .2em .6em .3em;
>+            text-align: right;
>+            vertical-align: baseline;
>+            white-space: normal;
>+            width: 9em;
>+        }
>+
>+        fieldset {
>+            background-color: transparent;
>+            font-size: 100%;
>+            margin: 1em;
>+            padding: .3em;
>+        }
>+
>+        ol {
>+            list-style-type: none;
>+            padding: 0 1em 0 1em;
>+        }
>+
>+        li {
>+            clear: left;
>+            float: left;
>+            list-style-type: none;
>+            padding-bottom: 1em;
>+            width: 100%;
>+        }
>+
>+        .hint {
>+            color: #666;
>+            font-size: 96%;
>+            margin-left: 10.5em;
>+            margin-right: 4em;
>+            margin-top: .5em;
>+        }
>+    }
>+}
>+
>+
>+label.required,
>+span.required {
>+    color : #C00;
>+}
>+
>+span.required {
>+    font-style : italic;
>+    margin-left : .5em;
>+}
>+
>+.breadcrumbs {
>+    background-color: #e6f0f2;
>+    margin: 1em 0;
>+    padding: .4em 2em;
>+}
>+
>+
>+/* Override core jQueryUI widgets */
>+.ui-widget-content {
>+    border: 1px solid #B9D8D9;
>+    background: #ffffff none;
>+    color: #222222;
>+}
>+
>+.ui-widget-header {
>+    border: 1px solid #B9D8D9;
>+    background: #E6F0F2 none;
>+    color: #222222;
>+    font-weight: bold;
>+}
>+
>+.ui-state-default,
>+.ui-widget-content .ui-state-default,
>+.ui-widget-header .ui-state-default {
>+    border: 1px solid #B9D8D9;
>+    background: #F4F8F9 none;
>+    font-weight: normal;
>+    color: #555555;
>+}
>+
>+.ui-state-hover,
>+.ui-widget-content .ui-state-hover,
>+.ui-widget-header .ui-state-hover,
>+.ui-state-focus,
>+.ui-widget-content .ui-state-focus,
>+.ui-widget-header .ui-state-focus {
>+    border: 1px solid #B9D8D9;
>+    background: #E6F0F2 none;
>+    font-weight: normal;
>+    color: #212121;
>+}
>+
>+.ui-state-active,
>+.ui-widget-content .ui-state-active,
>+.ui-widget-header .ui-state-active {
>+    border: 1px solid #aaaaaa;
>+    background: #ffffff none;
>+    font-weight: normal;
>+    color: #212121;
>+}
>+
>+.ui-state-highlight,
>+.ui-widget-content .ui-state-highlight,
>+.ui-widget-header .ui-state-highlight {
>+    border: 1px solid #FED22F;
>+    background: #FFF4C6;
>+    color: #363636;
>+}
>+
>+.ui-state-error,
>+.ui-widget-content .ui-state-error,
>+.ui-widget-header .ui-state-error {
>+    border: 1px solid #cd0a0a;
>+    background: #fef1ec;
>+    color: #cd0a0a;
>+}
>+
>+.ui-widget,
>+.ui-widget input,
>+.ui-widget select,
>+.ui-widget textarea,
>+.ui-widget button {
>+    font-family : inherit;
>+    font-size : inherit;
>+}
>+
>+/* jQuery UI Datepicker */
>+.ui-datepicker table {
>+    width: 100%;
>+    font-size: .9em;
>+    border : 0;
>+    border-collapse: collapse;
>+    margin:0 0 .4em;
>+}
>+
>+.ui-datepicker th {
>+    background : transparent none;
>+    padding: .7em .3em;
>+    text-align: center;
>+    font-weight: bold;
>+    border: 0;
>+}
>+
>+.ui-datepicker-trigger {
>+    vertical-align: middle;
>+    margin : 0 3px;
>+}
>+.ui-datepicker {
>+    box-shadow: 1px 1px 3px 0 #666;
>+}
>+
>+span.breadcrumbs {
>+    display: block;
>+}
>+
>+.selectall,
>+.deselectall {
>+    display: inline-block;
>+}
>+
>+.selectall.mandatory,
>+.deselectall.optional {
>+    display: none;
>+}
>-- 
>2.20.1

Actions: View | Diff | Splinter Review

Attachments on bug 28978: 124665 | 125502 | 125657