ol-wfst 4.0.4 → 4.0.6

package/lib/style/css/ol-wfst.bootstrap5.css

@@ -119,7 +119,7 @@
 }
 .modal-header .btn-close {
   padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
-  margin: calc(var(--bs-modal-header-padding-y) * -0.5) calc(var(--bs-modal-header-padding-x) * -0.5) calc(var(--bs-modal-header-padding-y) * -0.5) auto;
+  margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(-0.5 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto;
 }
 
 .modal-title {
@@ -166,7 +166,7 @@
 }
 @media (min-width: 992px) {
   .modal-lg,
-.modal-xl {
+  .modal-xl {
     --bs-modal-width: 800px;
   }
 }
@@ -207,7 +207,7 @@
     border-radius: 0;
   }
   .modal-fullscreen-sm-down .modal-header,
-.modal-fullscreen-sm-down .modal-footer {
+  .modal-fullscreen-sm-down .modal-footer {
     border-radius: 0;
   }
   .modal-fullscreen-sm-down .modal-body {
@@ -227,7 +227,7 @@
     border-radius: 0;
   }
   .modal-fullscreen-md-down .modal-header,
-.modal-fullscreen-md-down .modal-footer {
+  .modal-fullscreen-md-down .modal-footer {
     border-radius: 0;
   }
   .modal-fullscreen-md-down .modal-body {
@@ -247,7 +247,7 @@
     border-radius: 0;
   }
   .modal-fullscreen-lg-down .modal-header,
-.modal-fullscreen-lg-down .modal-footer {
+  .modal-fullscreen-lg-down .modal-footer {
     border-radius: 0;
   }
   .modal-fullscreen-lg-down .modal-body {
@@ -267,7 +267,7 @@
     border-radius: 0;
   }
   .modal-fullscreen-xl-down .modal-header,
-.modal-fullscreen-xl-down .modal-footer {
+  .modal-fullscreen-xl-down .modal-footer {
     border-radius: 0;
   }
   .modal-fullscreen-xl-down .modal-body {
@@ -287,7 +287,7 @@
     border-radius: 0;
   }
   .modal-fullscreen-xxl-down .modal-header,
-.modal-fullscreen-xxl-down .modal-footer {
+  .modal-fullscreen-xxl-down .modal-footer {
     border-radius: 0;
   }
   .modal-fullscreen-xxl-down .modal-body {
@@ -306,6 +306,7 @@
   --bs-btn-border-width: 1px;
   --bs-btn-border-color: transparent;
   --bs-btn-border-radius: 0.375rem;
+  --bs-btn-hover-border-color: transparent;
   --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
   --bs-btn-disabled-opacity: 0.65;
   --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
@@ -338,19 +339,44 @@
   background-color: var(--bs-btn-hover-bg);
   border-color: var(--bs-btn-hover-border-color);
 }
-.btn-check:focus + .btn, .btn:focus {
+.btn-check + .btn:hover {
+  color: var(--bs-btn-color);
+  background-color: var(--bs-btn-bg);
+  border-color: var(--bs-btn-border-color);
+}
+.btn.focus-visible {
+  color: var(--bs-btn-hover-color);
+  background-color: var(--bs-btn-hover-bg);
+  border-color: var(--bs-btn-hover-border-color);
+  outline: 0;
+  box-shadow: var(--bs-btn-focus-box-shadow);
+}
+.btn:focus-visible {
   color: var(--bs-btn-hover-color);
   background-color: var(--bs-btn-hover-bg);
   border-color: var(--bs-btn-hover-border-color);
   outline: 0;
   box-shadow: var(--bs-btn-focus-box-shadow);
 }
-.btn-check:checked + .btn, .btn-check:active + .btn, .btn:active, .btn.active, .btn.show {
+.btn-check.focus-visible + .btn {
+  border-color: var(--bs-btn-hover-border-color);
+  outline: 0;
+  box-shadow: var(--bs-btn-focus-box-shadow);
+}
+.btn-check:focus-visible + .btn {
+  border-color: var(--bs-btn-hover-border-color);
+  outline: 0;
+  box-shadow: var(--bs-btn-focus-box-shadow);
+}
+.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
   color: var(--bs-btn-active-color);
   background-color: var(--bs-btn-active-bg);
   border-color: var(--bs-btn-active-border-color);
 }
-.btn-check:checked + .btn:focus, .btn-check:active + .btn:focus, .btn:active:focus, .btn.active:focus, .btn.show:focus {
+.btn-check:checked + .btn.focus-visible, :not(.btn-check) + .btn:active.focus-visible, .btn:first-child:active.focus-visible, .btn.active.focus-visible, .btn.show.focus-visible {
+  box-shadow: var(--bs-btn-focus-box-shadow);
+}
+.btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
   box-shadow: var(--bs-btn-focus-box-shadow);
 }
 .btn:disabled, .btn.disabled, fieldset:disabled .btn {
@@ -648,7 +674,10 @@
   --bs-btn-focus-shadow-rgb: 49, 132, 253;
   text-decoration: underline;
 }
-.btn-link:focus {
+.btn-link.focus-visible {
+  color: var(--bs-btn-color);
+}
+.btn-link:focus-visible {
   color: var(--bs-btn-color);
 }
 .btn-link:hover {

package/lib/style/scss/-ol-wfst.bootstrap5.scss

@@ -1,10 +1,10 @@
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/mixins';
-@import '~bootstrap/scss/variables';
-
-@import '~bootstrap/scss/_modal';
-@import '~bootstrap/scss/_buttons';
-@import '~bootstrap/scss/_close';
-@import '~bootstrap/scss/_transitions';
-
-@import '~bootstrap/scss/helpers/_clearfix';
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/variables';
+
+@import '~bootstrap/scss/_modal';
+@import '~bootstrap/scss/_buttons';
+@import '~bootstrap/scss/_close';
+@import '~bootstrap/scss/_transitions';
+
+@import '~bootstrap/scss/helpers/_clearfix';

package/lib/style/scss/_variables.scss

@@ -1,17 +1,17 @@
-@import '~bootstrap/scss/variables';
-
-$primaryColor: #ffed00 !default;
-
-$layerSelected: darken(rgba($primaryColor, 0.6), 3) !default;
-$layerHover: #f5f5f5;
-
-$btnBack: #ffffff;
-$btnHover: #f5f5f5;
-$btnBackActive: darken($btnBack, 2);
-$btnActive: $primaryColor !default;
-$btnHover: lighten($primaryColor, 20) !default;
-
-$changesBackground: #ff6161 !default;
-$btnDelete: #d43f3a;
-
-$borderRadius: 4px;
+@import '~bootstrap/scss/variables';
+
+$primaryColor: #ffed00 !default;
+
+$layerSelected: darken(rgba($primaryColor, 0.6), 3) !default;
+$layerHover: #f5f5f5;
+
+$btnBack: #ffffff;
+$btnHover: #f5f5f5;
+$btnBackActive: darken($btnBack, 2);
+$btnActive: $primaryColor !default;
+$btnHover: lighten($primaryColor, 20) !default;
+
+$changesBackground: #ff6161 !default;
+$btnDelete: #d43f3a;
+
+$borderRadius: 4px;

package/lib/style/scss/ol-wfst.scss

@@ -1,230 +1,230 @@
-@import '~bootstrap/scss/functions';
-@import 'variables';
-@import '~bootstrap/scss/mixins';
-
-.ol-wfst--input-field-container {
-    display: inline-block;
-    width: 49%;
-    padding: 5px;
-    margin-bottom: 10px;
-}
-.ol-wfst--input-field-label {
-    display: block;
-    font-weight: 500;
-    margin-bottom: 4px;
-}
-.ol-wfst--input-field-input {
-    width: 100%;
-    padding: 5px;
-}
-.ol-wfst--edit-button-cnt {
-    display: inline-block;
-    margin: 0 5px;
-}
-.ol-wfst--edit-button {
-    outline: 0;
-    padding: 8px;
-    height: 38px;
-    width: 38px;
-    font-size: 12px;
-    background: $btnBack;
-    border: 1px solid #b3b3b3;
-    border-radius: 50%;
-    box-shadow: 0 2px 8px rgb(0 0 0 / 42%);
-    cursor: pointer;
-}
-.ol-wfst--edit-button:hover {
-    background: $btnHover;
-}
-.ol-wfst--edit-button:active {
-    background: $btnBackActive;
-    transform: translateY(1px);
-}
-.ol-wfst--edit-button img {
-    fill: #333;
-    width: 20px;
-    height: 20px;
-}
-.ol-wfst--changes-control {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    right: 0;
-    transform: translateX(-50%);
-    max-width: 290px;
-    width: 90%;
-    background: $changesBackground;
-    border: 1px solid #969696;
-    border-top: 0;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.529);
-    border-radius: 0 0 $borderRadius $borderRadius;
-    padding: 10px;
-}
-
-.ol-wfst--changes-control-el {
-    text-align: center;
-}
-.ol-wfst--changes-control-el button {
-    margin: 0 5px;
-}
-.ol-wfst--changes-control-id {
-    margin-bottom: 10px;
-    font-size: 12px;
-    color: #fff;
-}
-.ol-wfst--tools-control {
-    position: absolute;
-    left: 10px;
-    bottom: 10px;
-    background-color: #fff;
-    box-shadow: 0 1px 4px rgb(0 0 0 / 42%);
-    border: 1px solid #a9a9a9bb;
-    border-radius: $borderRadius;
-}
-
-.btn.btn-third {
-    float: left;
-    color: $btnDelete;
-}
-
-.ol-wfst--layer-not-visible {
-    opacity: 0.5 !important;
-    font-style: italic;
-}
-
-.wfst--layer-control {
-    position: relative;
-    padding: 5px 10px;
-}
-.wfst--layer-control.ol-wfst--selected-on {
-    background-color: $layerSelected !important;
-}
-.wfst--layer-control:hover,
-.wfst--layer-control:active {
-    background-color: $layerHover;
-}
-.wfst--layer-control input[type='radio'] {
-    display: none;
-}
-
-.ol-wfst--tools-control-btn.wfst--active {
-    background-color: $btnActive !important;
-    opacity: 1;
-}
-.ol-wfst--tools-control-btn:hover,
-.ol-wfst--tools-control-btn:active {
-    background-color: $btnHover;
-    opacity: 0.95;
-}
-.ol-wfst--tools-control-btn:active {
-    transform: translateY(1px);
-}
-.ol-wfst--tools-control-btn {
-    background: #ffffff;
-    border-radius: $borderRadius;
-    outline: 0;
-    width: 40px;
-    height: 32px;
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    cursor: pointer;
-    border: 1px solid #c0c0c0;
-}
-.ol-wfst--tools-control-btn img {
-    width: 20px;
-    height: 20px;
-}
-.wfst--tools-control--head {
-    background: #dddddd;
-    padding: 10px;
-    border-bottom: 1px solid #a9a9a9bb;
-    border-radius: $borderRadius $borderRadius 0 0;
-}
-.wfst--tools-control--head > * {
-    display: inline-block;
-}
-.ol-wfst--tools-control-draw-cnt:not(:first-child) {
-    margin-left: 6px;
-}
-
-.ol-wfst--tools-control-btn-upload {
-    padding: 3px;
-}
-.wfst--tools-control--select-draw {
-    outline: 0;
-    border: 1px solid #c0c0c0;
-    border-radius: $borderRadius;
-    padding: 0 3px;
-    height: 32px;
-    background: #f7f7f7;
-    cursor: pointer;
-    pointer-events: none;
-    opacity: 0.5;
-    vertical-align: middle;
-    font-size: 0.9em;
-    border-left: 0;
-    border-radius: 0 $borderRadius $borderRadius 0;
-}
-.ol-wfst--tools-control-btn-draw {
-    border-radius: $borderRadius 0 0 $borderRadius;
-    opacity: 0.7;
-}
-.draw-mode .wfst--tools-control--select-draw {
-    pointer-events: inherit;
-    opacity: 1;
-    background: #fffab5;
-}
-.wfst--tools-control--head label {
-    cursor: pointer;
-}
-.wfst--tools-control--select-layers label {
-    position: absolute;
-    left: 30px;
-    right: 0;
-    cursor: pointer;
-}
-#ol-wfst--upload {
-    display: none;
-    visibility: hidden;
-}
-.ol-wfst--tools-control--loading {
-    display: none;
-    position: absolute;
-    top: -25px;
-}
-.ol-wfst--tools-control--loading.ol-wfst--tools-control--loading-show {
-    display: block;
-}
-.ol-wfst--tools-control-visible {
-    display: inline-block;
-}
-.ol-wfst--tools-control-visible img {
-    width: 14px;
-    height: 14px;
-}
-.ol-wfst--tools-control-visible-btn {
-    opacity: 0.6;
-    cursor: pointer;
-}
-.ol-wfst--tools-control-visible-btn:hover {
-    opacity: 0.9;
-}
-.wfst--layer-control {
-    opacity: 0.7;
-}
-.wfst--layer-control.ol-wfst--visible-on {
-    opacity: 1;
-}
-.ol-wfst--visible-btn-on {
-    display: none;
-}
-.ol-wfst--visible-btn-off {
-    display: block;
-}
-.ol-wfst--visible-on .ol-wfst--visible-btn-on {
-    display: block;
-}
-.ol-wfst--visible-on .ol-wfst--visible-btn-off {
-    display: none;
-}
+@import '~bootstrap/scss/functions';
+@import 'variables';
+@import '~bootstrap/scss/mixins';
+
+.ol-wfst--input-field-container {
+    display: inline-block;
+    width: 49%;
+    padding: 5px;
+    margin-bottom: 10px;
+}
+.ol-wfst--input-field-label {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 4px;
+}
+.ol-wfst--input-field-input {
+    width: 100%;
+    padding: 5px;
+}
+.ol-wfst--edit-button-cnt {
+    display: inline-block;
+    margin: 0 5px;
+}
+.ol-wfst--edit-button {
+    outline: 0;
+    padding: 8px;
+    height: 38px;
+    width: 38px;
+    font-size: 12px;
+    background: $btnBack;
+    border: 1px solid #b3b3b3;
+    border-radius: 50%;
+    box-shadow: 0 2px 8px rgb(0 0 0 / 42%);
+    cursor: pointer;
+}
+.ol-wfst--edit-button:hover {
+    background: $btnHover;
+}
+.ol-wfst--edit-button:active {
+    background: $btnBackActive;
+    transform: translateY(1px);
+}
+.ol-wfst--edit-button img {
+    fill: #333;
+    width: 20px;
+    height: 20px;
+}
+.ol-wfst--changes-control {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    right: 0;
+    transform: translateX(-50%);
+    max-width: 290px;
+    width: 90%;
+    background: $changesBackground;
+    border: 1px solid #969696;
+    border-top: 0;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.529);
+    border-radius: 0 0 $borderRadius $borderRadius;
+    padding: 10px;
+}
+
+.ol-wfst--changes-control-el {
+    text-align: center;
+}
+.ol-wfst--changes-control-el button {
+    margin: 0 5px;
+}
+.ol-wfst--changes-control-id {
+    margin-bottom: 10px;
+    font-size: 12px;
+    color: #fff;
+}
+.ol-wfst--tools-control {
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+    background-color: #fff;
+    box-shadow: 0 1px 4px rgb(0 0 0 / 42%);
+    border: 1px solid #a9a9a9bb;
+    border-radius: $borderRadius;
+}
+
+.btn.btn-third {
+    float: left;
+    color: $btnDelete;
+}
+
+.ol-wfst--layer-not-visible {
+    opacity: 0.5 !important;
+    font-style: italic;
+}
+
+.wfst--layer-control {
+    position: relative;
+    padding: 5px 10px;
+}
+.wfst--layer-control.ol-wfst--selected-on {
+    background-color: $layerSelected !important;
+}
+.wfst--layer-control:hover,
+.wfst--layer-control:active {
+    background-color: $layerHover;
+}
+.wfst--layer-control input[type='radio'] {
+    display: none;
+}
+
+.ol-wfst--tools-control-btn.wfst--active {
+    background-color: $btnActive !important;
+    opacity: 1;
+}
+.ol-wfst--tools-control-btn:hover,
+.ol-wfst--tools-control-btn:active {
+    background-color: $btnHover;
+    opacity: 0.95;
+}
+.ol-wfst--tools-control-btn:active {
+    transform: translateY(1px);
+}
+.ol-wfst--tools-control-btn {
+    background: #ffffff;
+    border-radius: $borderRadius;
+    outline: 0;
+    width: 40px;
+    height: 32px;
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    border: 1px solid #c0c0c0;
+}
+.ol-wfst--tools-control-btn img {
+    width: 20px;
+    height: 20px;
+}
+.wfst--tools-control--head {
+    background: #dddddd;
+    padding: 10px;
+    border-bottom: 1px solid #a9a9a9bb;
+    border-radius: $borderRadius $borderRadius 0 0;
+}
+.wfst--tools-control--head > * {
+    display: inline-block;
+}
+.ol-wfst--tools-control-draw-cnt:not(:first-child) {
+    margin-left: 6px;
+}
+
+.ol-wfst--tools-control-btn-upload {
+    padding: 3px;
+}
+.wfst--tools-control--select-draw {
+    outline: 0;
+    border: 1px solid #c0c0c0;
+    border-radius: $borderRadius;
+    padding: 0 3px;
+    height: 32px;
+    background: #f7f7f7;
+    cursor: pointer;
+    pointer-events: none;
+    opacity: 0.5;
+    vertical-align: middle;
+    font-size: 0.9em;
+    border-left: 0;
+    border-radius: 0 $borderRadius $borderRadius 0;
+}
+.ol-wfst--tools-control-btn-draw {
+    border-radius: $borderRadius 0 0 $borderRadius;
+    opacity: 0.7;
+}
+.draw-mode .wfst--tools-control--select-draw {
+    pointer-events: inherit;
+    opacity: 1;
+    background: #fffab5;
+}
+.wfst--tools-control--head label {
+    cursor: pointer;
+}
+.wfst--tools-control--select-layers label {
+    position: absolute;
+    left: 30px;
+    right: 0;
+    cursor: pointer;
+}
+#ol-wfst--upload {
+    display: none;
+    visibility: hidden;
+}
+.ol-wfst--tools-control--loading {
+    display: none;
+    position: absolute;
+    top: -25px;
+}
+.ol-wfst--tools-control--loading.ol-wfst--tools-control--loading-show {
+    display: block;
+}
+.ol-wfst--tools-control-visible {
+    display: inline-block;
+}
+.ol-wfst--tools-control-visible img {
+    width: 14px;
+    height: 14px;
+}
+.ol-wfst--tools-control-visible-btn {
+    opacity: 0.6;
+    cursor: pointer;
+}
+.ol-wfst--tools-control-visible-btn:hover {
+    opacity: 0.9;
+}
+.wfst--layer-control {
+    opacity: 0.7;
+}
+.wfst--layer-control.ol-wfst--visible-on {
+    opacity: 1;
+}
+.ol-wfst--visible-btn-on {
+    display: none;
+}
+.ol-wfst--visible-btn-off {
+    display: block;
+}
+.ol-wfst--visible-on .ol-wfst--visible-btn-on {
+    display: block;
+}
+.ol-wfst--visible-on .ol-wfst--visible-btn-off {
+    display: none;
+}