Skip to content

Commit 8fc18f5

Browse files
halfmoonuihalfmoonui
authored
Version 1.1.1 released
Minor updates: - Rounded buttons (#25) - Fixes switch transitions (#42) - Other minor bug fixes, such as the border radius issue with input groups
1 parent b649d66 commit 8fc18f5

File tree

9 files changed

+111
-62
lines changed

9 files changed

+111
-62
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,15 @@ The quickest way to get started with Halfmoon is by using the CDN to include the
1717

1818
```html
1919
<!-- Halfmoon CSS -->
20-
<link href="https://cdn.jsdelivr.net/npm/halfmoon@1.1.0/css/halfmoon-variables.min.css" rel="stylesheet" />
20+
<link href="https://cdn.jsdelivr.net/npm/halfmoon@1.1.1/css/halfmoon-variables.min.css" rel="stylesheet" />
2121
<!--
2222
Or,
2323
Use the following (no variables, supports IE11):
24-
<link href="https://cdn.jsdelivr.net/npm/halfmoon@1.1.0/css/halfmoon.min.css" rel="stylesheet" />
24+
<link href="https://cdn.jsdelivr.net/npm/halfmoon@1.1.1/css/halfmoon.min.css" rel="stylesheet" />
2525
-->
2626

2727
<!-- Halfmoon JS -->
28-
<script src="https://cdn.jsdelivr.net/npm/halfmoon@1.1.0/js/halfmoon.min.js"></script>
28+
<script src="https://cdn.jsdelivr.net/npm/halfmoon@1.1.1/js/halfmoon.min.js"></script>
2929
```
3030

3131
**Pleast note**, the JS file should be placed at the end of the `<body>` tag. Otherwise, some things may not work as expected. For example, using the `onclick="..."` event to call one of Halfmoon's built-in methods will not work **unless** the JS file is placed at the end of the `<body>` tag.

‎css/halfmoon-variables.css‎

Lines changed: 51 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
-------------------------------------------------------------------------------
33
Halfmoon CSS (Variables file)
4-
Version: 1.1.0
4+
Version: 1.1.1
55
https://www.gethalfmoon.com
66
Copyright, Halfmoon UI
77
Licensed under MIT (https://www.gethalfmoon.com/license)
@@ -948,6 +948,11 @@ CSS variables (CSS custom properties)
948948
--dm-button-danger-box-shadow-focus: 0 0 0 0.3rem var(--danger-box-shadow-color);
949949
--dm-button-danger-outline-color-focus: var(--dm-button-outline-color-focus);
950950

951+
/* Rounded button */
952+
953+
--button-rounded-border-radius: var(--button-height);
954+
--small-button-rounded-border-radius: var(--small-button-height);
955+
--large-button-rounded-border-radius: var(--large-button-height);
951956

952957
/*
953958
---------------------------------------------------------------------------
@@ -1368,7 +1373,7 @@ CSS variables (CSS custom properties)
13681373
--switch-width: 3.2rem;
13691374
--switch-height: 2rem;
13701375
--switch-line-height: var(--switch-height);
1371-
--switch-label-padding-left: 4rem;
1376+
--switch-label-padding-left: calc(var(--switch-width) + 0.8rem);
13721377
--switch-label-blank-padding-left: var(--switch-width);
13731378

13741379
--lm-switch-bg-color: #ffffff;
@@ -1399,7 +1404,7 @@ CSS variables (CSS custom properties)
13991404
--switch-slider-top: 0.4rem;
14001405
--switch-slider-left: 0.5rem;
14011406
--switch-slider-top-checked: var(--switch-slider-top);
1402-
--switch-slider-left-checked: 1.5rem;
1407+
--switch-slider-left-checked: calc(var(--switch-width) - var(--switch-slider-width-height) - var(--switch-slider-left));
14031408

14041409
--lm-switch-slider-bg-color: rgba(0, 0, 0, 0.2); /* Transparency used in light mode because the background of the switch box is plain white */
14051410
--lm-switch-slider-border-color: var(--lm-switch-slider-bg-color);
@@ -5861,6 +5866,18 @@ Notes:
58615866
padding-right: 0;
58625867
}
58635868

5869+
/* Rounded button */
5870+
5871+
.btn-rounded {
5872+
border-radius: var(--button-rounded-border-radius);
5873+
}
5874+
.btn-rounded.btn-sm {
5875+
border-radius: var(--small-button-rounded-border-radius);
5876+
}
5877+
.btn-rounded.btn-lg {
5878+
border-radius: var(--large-button-rounded-border-radius);
5879+
}
5880+
58645881

58655882
/*
58665883
-------------------------------------------------------------------------------
@@ -7480,6 +7497,8 @@ select.form-control[multiple] > option:disabled {
74807497
background-color: var(--lm-switch-slider-bg-color);
74817498
border: var(--switch-slider-border-width) solid var(--lm-switch-slider-border-color);
74827499
border-radius: var(--switch-slider-border-radius);
7500+
-webkit-transition: left .1s;
7501+
transition: left .1s;
74837502
}
74847503
.dark-mode .custom-switch label:after {
74857504
background-color: var(--dm-switch-slider-bg-color);
@@ -7782,6 +7801,7 @@ select.form-control[multiple] > option:disabled {
77827801
color: var(--lm-input-group-text-text-color);
77837802
background-color: var(--lm-input-group-text-bg-color);
77847803
border: var(--input-group-text-border-width) solid var(--lm-input-group-text-border-color);
7804+
border-radius: var(--input-group-text-border-radius);
77857805
}
77867806
.dark-mode .input-group-text {
77877807
color: var(--dm-input-group-text-text-color);
@@ -7827,27 +7847,32 @@ select.form-control[multiple] > option:disabled {
78277847
padding-left: 0;
78287848
padding-right: 0;
78297849
}
7850+
.input-group-sm > .input-group-prepend > .btn-rounded,
7851+
.input-group-sm > .input-group-append > .btn-rounded {
7852+
border-radius: var(--small-button-rounded-border-radius);
7853+
}
7854+
.input-group-lg > .input-group-prepend > .btn-rounded,
7855+
.input-group-lg > .input-group-append > .btn-rounded {
7856+
border-radius: var(--large-button-rounded-border-radius);
7857+
}
78307858

78317859
/* Input group borders */
78327860

7833-
.input-group > .form-control,
7834-
.input-group-prepend > .input-group-text,
7835-
.input-group-append > .input-group-text,
7836-
.input-group-prepend > .btn,
7837-
.input-group-append > .btn {
7838-
border-radius: 0;
7839-
}
7840-
.input-group > .form-control:first-child,
7841-
.input-group-prepend:first-child > .input-group-text,
7842-
.input-group-prepend:first-child > .btn {
7843-
border-top-left-radius: var(--input-border-radius);
7844-
border-bottom-left-radius: var(--input-border-radius);
7861+
.input-group > .form-control:not(:first-child),
7862+
.input-group-prepend:not(:first-child) > .input-group-text,
7863+
.input-group-append:not(:first-child) > .input-group-text,
7864+
.input-group-prepend:not(:first-child) > .btn,
7865+
.input-group-append:not(:first-child) > .btn {
7866+
border-top-left-radius: 0;
7867+
border-bottom-left-radius: 0;
78457868
}
7846-
.input-group > .form-control:last-child,
7847-
.input-group-append:last-child > .input-group-text,
7848-
.input-group-append:last-child > .btn {
7849-
border-top-right-radius: var(--input-border-radius);
7850-
border-bottom-right-radius: var(--input-border-radius);
7869+
.input-group > .form-control:not(:last-child),
7870+
.input-group-prepend:not(:last-child) > .input-group-text,
7871+
.input-group-append:not(:last-child) > .input-group-text,
7872+
.input-group-prepend:not(:last-child) > .btn,
7873+
.input-group-append:not(:last-child) > .btn {
7874+
border-top-right-radius: 0;
7875+
border-bottom-right-radius: 0;
78517876
}
78527877
.input-group > .form-control:focus,
78537878
.input-group-prepend > .btn:focus,
@@ -9945,6 +9970,12 @@ a.badge-group:hover > .badge.badge-danger {
99459970
padding-left: 0;
99469971
padding-right: 0;
99479972
}
9973+
.btn-group-sm > .btn-rounded {
9974+
border-radius: var(--small-button-rounded-border-radius);
9975+
}
9976+
.btn-group-lg > .btn-rounded {
9977+
border-radius: var(--large-button-rounded-border-radius);
9978+
}
99489979

99499980
/* Button toolbar */
99509981

‎css/halfmoon-variables.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/halfmoon.css‎

Lines changed: 49 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
-------------------------------------------------------------------------------
33
Halfmoon CSS
4-
Version: 1.1.0
4+
Version: 1.1.1
55
https://www.gethalfmoon.com
66
Copyright, Halfmoon UI
77
Licensed under MIT (https://www.gethalfmoon.com/license)
@@ -4177,6 +4177,18 @@ Notes:
41774177
padding-right: 0;
41784178
}
41794179

4180+
/* Rounded button */
4181+
4182+
.btn-rounded {
4183+
border-radius: 3.2rem;
4184+
}
4185+
.btn-rounded.btn-sm {
4186+
border-radius: 2.6rem;
4187+
}
4188+
.btn-rounded.btn-lg {
4189+
border-radius: 4rem;
4190+
}
4191+
41804192

41814193
/*
41824194
-------------------------------------------------------------------------------
@@ -6304,7 +6316,7 @@ select.form-control[multiple] > option:disabled {
63046316
.custom-switch label {
63056317
display: inline-block;
63066318
margin-bottom: 0;
6307-
padding-left: 4rem;
6319+
padding-left: calc(3.2rem + 0.8rem);
63086320
cursor: pointer;
63096321
-webkit-user-select: none;
63106322
-moz-user-select: none;
@@ -6380,14 +6392,16 @@ select.form-control[multiple] > option:disabled {
63806392
background-color: rgba(0, 0, 0, 0.2);
63816393
border: 0 solid rgba(0, 0, 0, 0.2);
63826394
border-radius: 50%;
6395+
-webkit-transition: left .1s;
6396+
transition: left .1s;
63836397
}
63846398
.dark-mode .custom-switch label:after {
63856399
background-color: rgba(255, 255, 255, 0.15);
63866400
border-color: rgba(255, 255, 255, 0.15);
63876401
}
63886402
.custom-switch input[type="checkbox"]:checked~label:after {
63896403
top: 0.4rem;
6390-
left: 1.5rem;
6404+
left: calc(3.2rem - 1.2rem - 0.5rem);
63916405
background-color: #ffffff;
63926406
border-color: #ffffff;
63936407
}
@@ -6777,6 +6791,7 @@ select.form-control[multiple] > option:disabled {
67776791
color: rgba(0, 0, 0, 0.85);
67786792
background-color: #ecf0f1;
67796793
border: 1px solid rgba(0, 0, 0, 0.2);
6794+
border-radius: 0.4rem;
67806795
}
67816796
.dark-mode .input-group-text {
67826797
color: rgba(255, 255, 255, 0.8);
@@ -6841,39 +6856,36 @@ select.form-control[multiple] > option:disabled {
68416856
padding-left: 0;
68426857
padding-right: 0;
68436858
}
6844-
6845-
/* Input group borders */
6846-
6847-
.input-group > .form-control,
6848-
.input-group-prepend > .input-group-text,
6849-
.input-group-append > .input-group-text,
6850-
.input-group-prepend > .btn,
6851-
.input-group-append > .btn {
6852-
border-radius: 0;
6853-
}
6854-
.input-group > .form-control:first-child {
6855-
border-top-left-radius: 0.4rem;
6856-
border-bottom-left-radius: 0.4rem;
6859+
.input-group-sm > .input-group-prepend > .btn-rounded {
6860+
border-radius: 2.6rem;
68576861
}
6858-
.input-group-prepend:first-child > .input-group-text {
6859-
border-top-left-radius: 0.4rem;
6860-
border-bottom-left-radius: 0.4rem;
6862+
.input-group-sm > .input-group-append > .btn-rounded {
6863+
border-radius: 2.6rem;
68616864
}
6862-
.input-group-prepend:first-child > .btn {
6863-
border-top-left-radius: 0.4rem;
6864-
border-bottom-left-radius: 0.4rem;
6865+
.input-group-lg > .input-group-prepend > .btn-rounded {
6866+
border-radius: 4rem;
68656867
}
6866-
.input-group > .form-control:last-child {
6867-
border-top-right-radius: 0.4rem;
6868-
border-bottom-right-radius: 0.4rem;
6868+
.input-group-lg > .input-group-append > .btn-rounded {
6869+
border-radius: 4rem;
68696870
}
6870-
.input-group-append:last-child > .input-group-text {
6871-
border-top-right-radius: 0.4rem;
6872-
border-bottom-right-radius: 0.4rem;
6871+
6872+
/* Input group borders */
6873+
6874+
.input-group > .form-control:not(:first-child),
6875+
.input-group-prepend:not(:first-child) > .input-group-text,
6876+
.input-group-append:not(:first-child) > .input-group-text,
6877+
.input-group-prepend:not(:first-child) > .btn,
6878+
.input-group-append:not(:first-child) > .btn {
6879+
border-top-left-radius: 0;
6880+
border-bottom-left-radius: 0;
68736881
}
6874-
.input-group-append:last-child > .btn {
6875-
border-top-right-radius: 0.4rem;
6876-
border-bottom-right-radius: 0.4rem;
6882+
.input-group > .form-control:not(:last-child),
6883+
.input-group-prepend:not(:last-child) > .input-group-text,
6884+
.input-group-append:not(:last-child) > .input-group-text,
6885+
.input-group-prepend:not(:last-child) > .btn,
6886+
.input-group-append:not(:last-child) > .btn {
6887+
border-top-right-radius: 0;
6888+
border-bottom-right-radius: 0;
68776889
}
68786890
.input-group > .form-control:focus,
68796891
.input-group-prepend > .btn:focus,
@@ -9546,6 +9558,12 @@ a.badge-group:hover > .badge.badge-danger {
95469558
padding-left: 0;
95479559
padding-right: 0;
95489560
}
9561+
.btn-group-sm > .btn-rounded {
9562+
border-radius: 2.6rem;
9563+
}
9564+
.btn-group-lg > .btn-rounded {
9565+
border-radius: 4rem;
9566+
}
95499567

95509568
/* Button toolbar */
95519569

‎css/halfmoon.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/halfmoon-module.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* -----------------------------------------------------------------------------
33
* Halfmoon JS (module)
4-
* Version: 1.1.0
4+
* Version: 1.1.1
55
* https://www.gethalfmoon.com
66
* Copyright, Halfmoon UI
77
* Licensed under MIT (https://www.gethalfmoon.com/license)

‎js/halfmoon.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* -----------------------------------------------------------------------------
33
* Halfmoon JS
4-
* Version: 1.1.0
4+
* Version: 1.1.1
55
* https://www.gethalfmoon.com
66
* Copyright, Halfmoon UI
77
* Licensed under MIT (https://www.gethalfmoon.com/license)

‎js/halfmoon.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "halfmoon",
3-
"version": "1.1.0",
3+
"version": "1.1.1",
44
"description": "Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools",
55
"main": "index.js",
66
"scripts": {

0 commit comments

Comments
 (0)