388 lines
7.2 KiB
CSS
388 lines
7.2 KiB
CSS
.modal-dialog, .modal-content {
|
|
max-width: 840px;
|
|
}
|
|
|
|
.form-section {
|
|
display: none;
|
|
}
|
|
|
|
label {
|
|
color: #5C5C5C;
|
|
font-size: 12px;
|
|
display: inline;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.createrAccountSetting {
|
|
margin: 10px 120px;
|
|
}
|
|
|
|
.errored {
|
|
animation: shake 300ms;
|
|
color: #eb3434 !important;
|
|
background-color: #fef2f2 !important;
|
|
border: 1px solid #eb3434 !important;
|
|
}
|
|
|
|
.selectTextNone * {
|
|
-webkit-user-select: none; /* Chrome, Safari */
|
|
-moz-user-select: none; /* Firefox */
|
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
|
user-select: none; /* Standard */
|
|
}
|
|
|
|
.borderBottomHeader {
|
|
border-bottom: 1px solid #D9D9D9;
|
|
}
|
|
|
|
.titleHead {
|
|
color: #444444;
|
|
font-weight: 600;
|
|
padding: 10px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.sidebarRollCallMenu {
|
|
padding: 0;
|
|
border-left: 1px solid #D9D9D9;
|
|
/* height: 70vh; */
|
|
width: 25%;
|
|
transition: all ease-in .4s;
|
|
}
|
|
|
|
.sidebarRollCallForm {
|
|
padding: 0;
|
|
/* height: 70vh; */
|
|
width: 75%;
|
|
transition: all ease-in .4s;
|
|
}
|
|
|
|
.sidebarRollCallMenu ul {
|
|
padding: 0;
|
|
}
|
|
|
|
.sidebarRollCallMenu ul li {
|
|
color: #444444;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
padding: 6px;
|
|
cursor: pointer;
|
|
transition: all ease-in .4s;
|
|
}
|
|
|
|
.sidebarRollCallMenu ul li:hover {
|
|
background-color: #EAFFFF;
|
|
}
|
|
|
|
.sidebarRollCallMenu ul li.complete {
|
|
background-color: #F7FEE7;
|
|
border-left: 2px solid #84CC16;
|
|
}
|
|
|
|
.sidebarRollCallMenu ul li.current {
|
|
background-color: #EAFFFF;
|
|
border-left: 2px solid #23A8A8;
|
|
}
|
|
|
|
.sidebarRollCallMenu ul li span {
|
|
margin: auto 5px;
|
|
transition: all ease-in .4s;
|
|
}
|
|
|
|
.btn-header-close {
|
|
margin: 0 0 0 15px;
|
|
right: 0px;
|
|
padding: 5px;
|
|
background-size: 10px;
|
|
border-radius: 50%;
|
|
background-color: transparent;
|
|
z-index: 25;
|
|
}
|
|
|
|
.btn-header-close:hover {
|
|
color: var(--bs-btn-close-color);
|
|
text-decoration: none;
|
|
opacity: var(--bs-btn-close-hover-opacity);
|
|
}
|
|
|
|
.rollCallFormBox
|
|
{
|
|
padding: 6px 15px;
|
|
height: 520px;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.rollCallInfo {
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1px solid #FF9A9A;
|
|
border-radius: 10px;
|
|
color: #2D2D2D;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
background-color: #FFE2E2;
|
|
padding: 4px;
|
|
box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.rollCallInfoSec {
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1px solid #D7ECCE;
|
|
border-radius: 10px;
|
|
color: #2D2D2D;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
background-color: #E8F9E1;
|
|
padding: 4px;
|
|
box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.btn-primary,
|
|
.btn-secondary {
|
|
border-radius: 5px;
|
|
padding: 6px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.titleSettingRollCall {
|
|
font-size: 14px;
|
|
color: #000000;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.titleSettingRollCallCheckbox {
|
|
font-size: 11px;
|
|
color: #646464;
|
|
font-weight: 500;
|
|
}
|
|
.titleSettingRollCallCheckboxSubtitle {
|
|
font-size: 10px;
|
|
color: #9E9C9C;
|
|
font-weight: 500;
|
|
margin-right: 28px;
|
|
}
|
|
|
|
.titleSettingRollCallInfo {
|
|
font-size: 12px;
|
|
color: #494949;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.titleSettingRollCallInfoSub {
|
|
font-size: 10px;
|
|
color: #9A9A9A;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.lineHr {
|
|
border-bottom: 1px solid #DEDEDE;
|
|
}
|
|
|
|
.lineMinHr {
|
|
background: linear-gradient(-90deg, rgba(222, 222, 222, 1) 0%, rgba(255, 255, 255, 1) 60%);
|
|
width: 100%;
|
|
height: 1px;
|
|
}
|
|
|
|
.form-control-percent {
|
|
border: 1px solid #C6C6C6;
|
|
border-radius: 6px;
|
|
width: 40px;
|
|
}
|
|
|
|
.form-control-currency {
|
|
border: 1px solid #C6C6C6;
|
|
border-radius: 6px;
|
|
width: 120px;
|
|
}
|
|
|
|
.form-control-select {
|
|
border: 1px solid #C6C6C6;
|
|
border-radius: 6px;
|
|
width: 80px;
|
|
}
|
|
|
|
/************************ Radio Button Input (Like Checkbox appearance) ************************/
|
|
.form-check-input[type="radio"],
|
|
.form-check-input[type="checkbox"] {
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 6px;
|
|
padding: 8px;
|
|
border: 1px solid #CFD3D4;
|
|
background-color: white;
|
|
background-position: center;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
margin-right: 8px;
|
|
appearance: none;
|
|
}
|
|
|
|
.form-check-input[type="radio"]:checked,
|
|
.form-check-input[type="checkbox"]:checked{
|
|
background-color: #148989;
|
|
border: 1px solid #ffffff !important;
|
|
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="3"%3E%3Cpath stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /%3E%3C/svg%3E');
|
|
background-size: 75%;
|
|
}
|
|
|
|
.form-check-input[type="radio"]:focus,
|
|
.form-check-input[type="checkbox"]:focus{
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.form-check-input[type="radio"] + label,
|
|
.form-check-input[type="checkbox"] + label {
|
|
color: #83898C;
|
|
}
|
|
|
|
.form-check-input[type="radio"]:checked + label,
|
|
.form-check-input[type="checkbox"]:checked + label {
|
|
color: #2B2F32;
|
|
}
|
|
|
|
|
|
|
|
.checkBox {
|
|
display: none;
|
|
}
|
|
|
|
.labelDays {
|
|
display: inline-block;
|
|
padding: 2px 6px;
|
|
margin: 3px;
|
|
border: 1px solid #E6E6E6;
|
|
border-radius: 6px;
|
|
background-color: #F6F6F6;
|
|
color: #4D4D4D;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s, color 0.3s;
|
|
width: 70px;
|
|
text-align: center;
|
|
font-size: 11px;
|
|
-webkit-user-select: none; /* Chrome, Safari */
|
|
-moz-user-select: none; /* Firefox */
|
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
|
user-select: none; /* Standard */
|
|
}
|
|
|
|
.checkBox:checked + .labelDays {
|
|
background-color: #148989;
|
|
color: white !important;
|
|
}
|
|
|
|
input[type="text"] {
|
|
color: #2B2F32;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.labelDays:hover {
|
|
background-color: #EBEBEB;
|
|
}
|
|
|
|
/************************ Radio Button Input (Like Checkbox appearance) ************************/
|
|
|
|
|
|
|
|
@media (max-width:1366px) {
|
|
.modal-dialog, .modal-content {
|
|
max-width: 780px;
|
|
}
|
|
|
|
.sidebarRollCallMenu ul li {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.rollCallFormBox {
|
|
height: 440px;
|
|
}
|
|
|
|
.titleSettingRollCall {
|
|
font-size: 13px;
|
|
}
|
|
.createrAccountSetting {
|
|
margin: 10px 100px;
|
|
}
|
|
}
|
|
|
|
@media (max-width:992px) {
|
|
#rollCallSettingModalLabel {
|
|
display: none;
|
|
}
|
|
|
|
.sidebarRollCallMenu {
|
|
width: 7%;
|
|
}
|
|
|
|
.sidebarRollCallMenu ul li span {
|
|
display: none;
|
|
}
|
|
|
|
.sidebarRollCallMenu ul li svg {
|
|
width: 27px;
|
|
height: 27px;
|
|
}
|
|
|
|
.sidebarRollCallForm {
|
|
width: 93%;
|
|
}
|
|
|
|
.titleSettingRollCall {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media (max-width:768px) {
|
|
.rollCallFormBox {
|
|
padding: 3px 6px;
|
|
height: 500px;
|
|
overflow-x: hidden;
|
|
}
|
|
label {
|
|
font-size: 11px;
|
|
}
|
|
.form-check-input[type="radio"] {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.createrAccountSetting {
|
|
margin: 10px 100px;
|
|
}
|
|
}
|
|
|
|
@media (max-width:550px) {
|
|
.sidebarRollCallMenu {
|
|
width: 8%;
|
|
}
|
|
|
|
.sidebarRollCallForm {
|
|
width: 92%;
|
|
}
|
|
|
|
.createrAccountSetting {
|
|
margin: 3px 10px;
|
|
}
|
|
}
|
|
|
|
@media (max-width:466px) {
|
|
.sidebarRollCallMenu {
|
|
width: 9%;
|
|
}
|
|
|
|
.sidebarRollCallForm {
|
|
width: 91%;
|
|
}
|
|
}
|
|
|
|
@media (max-width:395px) {
|
|
.sidebarRollCallMenu {
|
|
width: 10%;
|
|
}
|
|
|
|
.sidebarRollCallForm {
|
|
width: 90%;
|
|
}
|
|
} |