¨4.0.1¨

resources/sass/install/components/_alert.scss

@@ -0,0 +1,11 @@
+.alert {
+    --bs-alert-margin-bottom: 15px;
+    --bs-alert-border-radius: #{$radius-default};
+}
+
+.alert-danger {
+    --bs-alert-color: #{$color-red-800};
+    --bs-alert-bg: #{$color-red-100};
+    --bs-alert-border-color: #{$color-red-100};
+    --bs-alert-link-color: #{$color-red-900};
+}

resources/sass/install/components/_button.scss

@@ -0,0 +1,91 @@
+.btn {
+    --bs-btn-font-size: 14px;
+    --bs-btn-font-weight: #{$font-medium};
+    --bs-btn-line-height: 20px;
+    --bs-btn-padding-x: 16px;
+    --bs-btn-padding-y: 6px;
+    --bs-btn-border-radius: #{$radius-default};
+    --bs-btn-box-shadow: none;
+    --bs-btn-focus-box-shadow: none;
+    --bs-btn-disabled-opacity: 0.6;
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-primary {
+    --bs-btn-color: #{$color-white};
+    --bs-btn-hover-color: #{$color-white};
+    --bs-btn-active-color: #{$color-white};
+    --bs-btn-bg: #{$color-primary-500};
+    --bs-btn-hover-bg: #{$color-primary-600};
+    --bs-btn-active-bg: #{$color-primary-600};
+    --bs-btn-border-color: #{$color-primary-500};
+    --bs-btn-hover-border-color: #{$color-primary-600};
+    --bs-btn-active-border-color: #{$color-primary-600};
+    --bs-btn-disabled-bg: #{$color-primary-600};
+    --bs-btn-disabled-border-color: #{$color-primary-600};
+}
+
+.btn-light {
+    --bs-btn-color: #{$color-gray-500};
+    --bs-btn-hover-color: #{$color-primary-600};
+    --bs-btn-active-color: #{$color-primary-600};
+    --bs-btn-bg: #{$color-white};
+    --bs-btn-hover-bg: #{$color-white};
+    --bs-btn-active-bg: #{$color-white};
+    --bs-btn-border-color: #{$color-gray-300};
+    --bs-btn-hover-border-color: #{$color-primary-500};
+    --bs-btn-active-border-color: #{$color-primary-500};
+    --bs-btn-disabled-color: #{$color-gray-500};
+    --bs-btn-disabled-bg: #{$color-gray-100};
+    --bs-btn-disabled-border-color: #{$color-gray-100};
+}
+
+.btn-close {
+    --bs-btn-close-color: #{$color-slate-900};
+
+    &:focus {
+        box-shadow: none;
+    }
+}
+
+.btn-loading {
+    --bs-btn-color: transparent;
+    --bs-btn-hover-color: transparent;
+    --bs-btn-active-color: transparent;
+    --bs-btn-disabled-color: transparent;
+
+    &:before,
+    &:after {
+        position: absolute;
+        content: "";
+        left: 50%;
+        top: 50%;
+        height: 18px;
+        width: 18px;
+        border-radius: $radius-full;
+        animation: button-spin-loader 800ms linear infinite;
+    }
+
+    &:before {
+        border: 1px solid transparent;
+        border-top-color: $color-white;
+    }
+
+    &:after {
+        border: 1px solid rgba($color-white, 0.25);
+    }
+}
+
+@keyframes button-spin-loader {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}

resources/sass/install/components/_form.scss

@@ -0,0 +1,132 @@
+.form-horizontal {
+    .form-group {
+        margin-bottom: 20px;
+    }
+}
+
+.form-group {
+    margin-bottom: 14px;
+}
+
+label {
+    > .required {
+        margin-left: 4px;
+        color: $color-red-500;
+    }
+
+    > .mdi {
+        font-size: 14px;
+        color: $color-gray-600;
+    }
+}
+
+.form-label,
+.col-form-label {
+    font-weight: $font-medium;
+    display: flex;
+    color: $color-gray-700;
+}
+
+.form-label {
+    margin-bottom: 5px;
+}
+
+.col-form-label {
+    align-self: flex-start;
+    padding-top: 5px;
+}
+
+.input-group-text {
+    color: $color-gray-500;
+    background: lighten($color-gray-100, 1%);
+    border: 1px solid lighten($color-slate-300, 4%);
+
+    .mdi {
+        color: lighten($color-gray-500, 4%);
+    }
+}
+
+.form-control,
+.form-select {
+    font-size: 14px;
+    line-height: 20px;
+    color: $color-gray-500;
+    border-radius: $radius-default;
+    border-color: lighten($color-slate-300, 4%);
+
+    &:focus {
+        color: $color-slate-600;
+        border-color: $color-primary-500;
+        box-shadow: none;
+        text-overflow: ellipsis;
+    }
+
+    &:placeholder-shown {
+        text-overflow: ellipsis;
+    }
+
+    &.active {
+        border-color: $color-primary-500;
+    }
+}
+
+.form-control {
+    padding: 7px 11px;
+
+    &:disabled {
+        color: $color-gray-500;
+        background: lighten($color-slate-100, 2%);
+        opacity: 0.8;
+    }
+}
+
+.form-select {
+    padding: 7px 35px 7px 11px;
+    background-image: url(../../images/arrow-down.svg);
+    background-size: 20px 20px;
+    background-position: right 8px center;
+    cursor: pointer;
+}
+
+.form-check-group {
+    .form-check {
+        margin-bottom: 11px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+
+.form-check-label {
+    font-weight: $font-medium;
+}
+
+.input-group-row {
+    margin-bottom: 20px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.form-footer {
+    padding-top: 20px;
+    border-top: 1px solid lighten($color-slate-300, 4%);
+}
+
+.invalid-feedback,
+.text-muted {
+    display: block;
+    margin: 3px 0 -5px;
+}
+
+.invalid-feedback {
+    font-size: 14px;
+    color: $color-red-500;
+}
+
+.text-muted {
+    font-size: 14px;
+    color: lighten($color-gray-500, 10%) !important;
+}

resources/sass/install/components/_table.scss

@@ -0,0 +1,34 @@
+.table {
+    tr {
+        &:first-child {
+            td {
+                padding-top: 10px;
+            }
+        }
+    }
+
+    th,
+    td {
+        &:first-child {
+            padding-left: 0;
+        }
+
+        &:last-child {
+            padding-right: 0;
+            text-align: right;
+        }
+    }
+
+    th {
+        font-weight: $font-semi-bold;
+        color: $color-gray-700;
+        border-color: $color-slate-200;
+    }
+
+    td {
+        padding: 4px;
+        color: $color-gray-600;
+        border-bottom: none;
+        vertical-align: middle;
+    }
+}