Skip to content

Commit 2fa8d0d

Browse files
bagahundabagahunda
committed
add flatpickr
1 parent 5bdb22d commit 2fa8d0d

12 files changed

+1763
-729
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎casl.html

+531-376
Large diffs are not rendered by default.

‎casl1.html

+544
Large diffs are not rendered by default.

‎css/awesomplete.base.css

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.awesomplete [hidden] {
2+
display: none;
3+
}
4+
5+
.awesomplete .visually-hidden {
6+
position: absolute;
7+
clip: rect(0, 0, 0, 0);
8+
}
9+
10+
.awesomplete {
11+
display: inline-block;
12+
position: relative;
13+
}
14+
15+
.awesomplete > input {
16+
display: block;
17+
}
18+
19+
.awesomplete > ul {
20+
position: absolute;
21+
left: 0;
22+
z-index: 1;
23+
min-width: 100%;
24+
box-sizing: border-box;
25+
list-style: none;
26+
padding: 0;
27+
margin: 0;
28+
background: #fff;
29+
}
30+
31+
.awesomplete > ul:empty {
32+
display: none;
33+
}

‎css/flatpickr.min.css

+13
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/style.css

+277-8
Original file line numberDiff line numberDiff line change
@@ -611,6 +611,7 @@ p {
611611
margin: 0 0 10px 0;
612612
}
613613
.casl__button {
614+
margin-top: 30px;
614615
height: auto;
615616
position: relative;
616617
width: 100%;
@@ -761,6 +762,7 @@ ul.categories-bar li.selected {
761762
display: block;
762763
}
763764
ul.casl__tab {
765+
font-size: 14px;
764766
list-style-type: none;
765767
overflow: hidden;
766768
background-color: #2268a3;
@@ -889,14 +891,13 @@ ul.casl__tab li.active {
889891
word-wrap: break-word;
890892
}
891893
.select-consent {
892-
border: 1px solid #d42c44;
893-
color: #d42c44;
894+
border: 1px solid #28BFF1;
895+
border-radius: 10px;
894896
font-size: 15px;
895897
font-weight: 600;
896-
text-align: center;
897898
font-family: "Open Sans";
898-
-moz-text-align-last: center;
899-
text-align-last: center;
899+
-moz-text-align-last: left;
900+
text-align-last: left;
900901
line-height: 1.5;
901902
padding: 5px;
902903
margin: 0;
@@ -905,9 +906,8 @@ ul.casl__tab li.active {
905906
-moz-appearance: none;
906907
outline: none;
907908
appearance: none;
908-
background: url("../images/arrow.png") no-repeat right #fff;
909-
background-size: 16px 16px;
910-
background-position: 98% 50%;
909+
background: url("../images/select-consent-arrow.png") no-repeat right #fff;
910+
background-position: 96% 50%;
911911
}
912912
option {
913913
font-weight: 600;
@@ -3338,6 +3338,7 @@ ul.popup-todo__tab li label {
33383338

33393339
.casl__tabcontent {
33403340
position: relative;
3341+
font-weight: 200;
33413342
}
33423343

33433344
.schedule .casl__tabcontent {
@@ -3423,3 +3424,271 @@ ul.popup-todo__tab li label {
34233424
background: #39b54a;
34243425
}
34253426

3427+
.casl-intro {
3428+
text-align: center;
3429+
color: #5a8259;
3430+
font-weight: 200;
3431+
}
3432+
3433+
.casl-status {
3434+
margin: 50px 0 35px;
3435+
display: flex;
3436+
justify-content: space-between;
3437+
align-items: center;
3438+
font-size: 12px;
3439+
}
3440+
3441+
.casl-status span:first-child {
3442+
font-weight: 200;
3443+
}
3444+
3445+
.consent-options {
3446+
margin-top: 40px;
3447+
margin-bottom: 30px;
3448+
}
3449+
3450+
.consent-options-list {
3451+
margin: 50px 0 0;
3452+
padding: 0;
3453+
list-style: none;
3454+
}
3455+
3456+
.consent-options-list li:not(:last-child) {
3457+
margin-bottom: 20px;
3458+
}
3459+
3460+
.consent-options-list input[type="radio"],
3461+
.custom-radio input[type="radio"] {
3462+
display: none
3463+
}
3464+
3465+
.consent-options-list input[type="radio"] + label,
3466+
.custom-radio input[type="radio"] + label {
3467+
margin: 0;
3468+
width: 100%;
3469+
position: relative;
3470+
padding-left: 40px;
3471+
font-size: 12px;
3472+
text-align: left;
3473+
}
3474+
3475+
.consent-options-list input[type="radio"] + label:before,
3476+
.custom-radio input[type="radio"] + label:before {
3477+
content: '';
3478+
width: 30px;
3479+
height: 30px;
3480+
border-radius: 50%;
3481+
background-color: #E1E1E1;
3482+
position: absolute;
3483+
left: 0;
3484+
top: -5px;
3485+
}
3486+
3487+
.consent-options-list input[type="radio"]:checked + label:after,
3488+
.custom-radio input[type="radio"]:checked + label:after {
3489+
content: '';
3490+
width: 20px;
3491+
height: 20px;
3492+
border-radius: 50%;
3493+
background-color: #127BC0;
3494+
position: absolute;
3495+
left: 5px;
3496+
top: 0;
3497+
}
3498+
3499+
.casl__options-btn {
3500+
background-color: #127BC0;
3501+
color: #ffffff;
3502+
height: 50px;
3503+
line-height: 50px;
3504+
border-radius: 53px;
3505+
}
3506+
3507+
.casl__cancel-btn {
3508+
background-color: #ffffff;
3509+
color: #c9060d;
3510+
border: 1px solid #c9060d;
3511+
height: 50px;
3512+
line-height: 50px;
3513+
border-radius: 53px;
3514+
}
3515+
3516+
.casl__button + .casl__button {
3517+
margin-top: 12px;
3518+
}
3519+
3520+
.expressed-pane {
3521+
display: none;
3522+
padding: 24px 22px 40px;
3523+
margin-top: 40px;
3524+
background-color: #FEF3E3;
3525+
color: #4a4a4a;
3526+
text-align: center;
3527+
border-radius: 5px;
3528+
}
3529+
3530+
.expressed-pane--clear {
3531+
margin-top: 60px;
3532+
padding: 0;
3533+
background-color: #ffffff;
3534+
text-align: left;
3535+
}
3536+
3537+
.expressed-pane--clear label {
3538+
display: flex;
3539+
}
3540+
3541+
.expressed-pane--clear .custom-checkbox label:before {
3542+
top: 50%;
3543+
margin-top: -15px;
3544+
}
3545+
3546+
.expressed-pane--clear .custom-checkbox input[type="checkbox"]:checked + label:after {
3547+
top: 50%;
3548+
margin-top: -12px;
3549+
}
3550+
3551+
.expressed-pane .form-row:not(:last-child) {
3552+
margin-bottom: 60px;
3553+
}
3554+
3555+
.expressed-pane .form-control {
3556+
padding: 5px;
3557+
width: 100%;
3558+
border: 1px solid #55CEF3;
3559+
border-radius: 5px;
3560+
}
3561+
3562+
.expressed-pane textarea {
3563+
margin: 0;
3564+
}
3565+
3566+
.expressed-pane label {
3567+
display: block;
3568+
margin-bottom: 20px;
3569+
margin-left: 0;
3570+
margin-right: 0;
3571+
width: 100%;
3572+
}
3573+
3574+
.btn--expressed {
3575+
margin-top: 30px;
3576+
width: 234px;
3577+
height: 50px;
3578+
background-color: #1DAFEC;
3579+
color: #ffffff;
3580+
border-radius: 53px;
3581+
}
3582+
3583+
.expressed-pane select {
3584+
border-color: #55CEF3;
3585+
border-radius: 5px;
3586+
background: url('../images/select-consent-arrow.png') no-repeat right #fff;
3587+
-webkit-background-size: 6%;
3588+
background-size: 6%;
3589+
background-position: 98% 50%;
3590+
}
3591+
3592+
.custom-checkbox label {
3593+
position: relative;
3594+
padding-left: 60px;
3595+
margin: 0;
3596+
width: 100%;
3597+
}
3598+
3599+
.custom-checkbox label:before {
3600+
content: '';
3601+
width: 30px;
3602+
height: 30px;
3603+
border-radius: 8px;
3604+
background-color: #28BFF0;
3605+
position: absolute;
3606+
left: 0;
3607+
top: 0;
3608+
}
3609+
3610+
.custom-checkbox input[type="checkbox"]:checked + label:after {
3611+
content: '';
3612+
width: 20px;
3613+
height: 15px;
3614+
border-left: 1px solid #ffffff;
3615+
border-bottom: 1px solid #ffffff;
3616+
transform: rotate(-45deg);
3617+
position: absolute;
3618+
left: 5px;
3619+
top: 2px;
3620+
}
3621+
3622+
.expressed-options {
3623+
display: flex;
3624+
justify-content: space-between;
3625+
max-width: 200px;
3626+
margin: 0 auto;
3627+
}
3628+
3629+
.awesomplete {
3630+
width: 100%;
3631+
}
3632+
3633+
.awesomplete > input {
3634+
height: 30px;
3635+
padding: 10px;
3636+
border: 1px solid #84DCF7;
3637+
border-radius: 5px;
3638+
}
3639+
3640+
.awesomplete > ul {
3641+
top: calc(100% + 1px);
3642+
text-align: left;
3643+
font-weight: 200;
3644+
border: 1px solid #C9C9C9;
3645+
border-radius: 5px;
3646+
}
3647+
3648+
.awesomplete > ul li {
3649+
padding: 10px;
3650+
}
3651+
3652+
.awesomplete > ul li:nth-child(even) {
3653+
background-color: #E6F7FD;
3654+
}
3655+
3656+
.casl__back-link {
3657+
padding: 12px;
3658+
}
3659+
3660+
.casl__back-link a {
3661+
position: relative;
3662+
padding-left: 20px;
3663+
color: #505050;
3664+
text-decoration: none;
3665+
}
3666+
3667+
.casl__back-link a:before {
3668+
content: '';
3669+
width: 0.8em;
3670+
height: 0.8em;
3671+
border-left: 1px solid #505050;
3672+
border-bottom: 1px solid #505050;
3673+
position: absolute;
3674+
left: 0;
3675+
top: 4px;
3676+
transform: rotate(45deg)
3677+
}
3678+
3679+
.pane-info {
3680+
color: #5a8259;
3681+
}
3682+
3683+
input[type="file"] {
3684+
width: 0.1px;
3685+
height: 0.1px;
3686+
opacity: 0;
3687+
overflow: hidden;
3688+
position: absolute;
3689+
z-index: -1;
3690+
}
3691+
3692+
input[type="file"] + label {
3693+
line-height: 50px;
3694+
}

‎images/select-consent-arrow.png

720 Bytes
Loading

0 commit comments

Comments
 (0)