fixed checkbox css

このコミットが含まれているのは:
dragon1211 2021-11-25 07:27:43 -08:00
コミット c1bb1fb6fa
12個のファイルの変更305行の追加105行の削除

ファイルの表示

@ -16034,25 +16034,120 @@ input[type=number] {
background-color: #a8bbbf;
}
input[type=checkbox] {
border-radius: 0px;
border-color: #707070;
}
input[type=checkbox]:checked {
border-color: #707070;
background-image: url(/images/icon-checked.svg);
background-color: white;
background-size: 14px;
}
input[type=checkbox]:focus {
box-shadow: none;
}
input[type=date].hide-calender::-webkit-inner-spin-button, input[type=date].hide-calender::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
input[type=checkbox],
input[type=radio] {
opacity: 0;
position: absolute;
z-index: 1;
width: 20px;
height: 20px;
}
input[type=checkbox]:checked,
input[type=radio]:checked,
input[type=checkbox]:focus,
input[type=radio]:focus {
outline: none !important;
}
input[type=checkbox] + .lbl,
input[type=radio] + .lbl {
position: relative;
z-index: 2;
display: inline-block;
margin: 0;
line-height: 20px;
min-height: 20px;
min-width: 20px;
font-weight: normal;
}
input[type=checkbox] + .lbl.padding-16::before,
input[type=radio] + .lbl.padding-16::before {
margin-right: 16px;
}
input[type=checkbox] + .lbl.padding-12::before,
input[type=radio] + .lbl.padding-12::before {
margin-right: 12px;
}
input[type=checkbox] + .lbl.padding-8::before,
input[type=radio] + .lbl.padding-8::before {
margin-right: 8px;
}
input[type=checkbox] + .lbl.padding-4::before,
input[type=radio] + .lbl.padding-4::before {
margin-right: 4px;
}
input[type=checkbox] + .lbl.padding-0::before,
input[type=radio] + .lbl.padding-0::before {
margin-right: 0px;
}
input[type=checkbox] + .lbl::before,
input[type=radio] + .lbl::before {
font-family: fontAwesome;
font-weight: normal;
font-size: 11px;
color: #2091cf;
content: " ";
background-color: #fff;
border: 1px solid #C3C3C3;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
border-radius: 7px;
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: 13px;
min-width: 13px;
margin-right: 1px;
margin-top: -5px;
width: 27px;
height: 27px;
}
input[type=checkbox]:checked + .lbl::before,
input[type=radio]:checked + .lbl::before {
display: inline-block;
content: "";
background-color: #000;
border-color: #adb8c0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
}
input[type=checkbox]:checked + .lbl::after,
input[type=radio]:checked + .lbl::after {
content: "";
position: absolute;
left: 10px;
top: 1px;
width: 7px;
height: 14px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
input[type=checkbox]:disabled + .lbl::before,
input[type=radio]:disabled + .lbl::before,
input[type=checkbox][disabled] + .lbl::before,
input[type=radio][disabled] + .lbl::before,
input[type=checkbox].disabled + .lbl::before,
input[type=radio].disabled + .lbl::before {
background-color: #DDD !important;
border-color: #CCC !important;
box-shadow: none !important;
color: #BBB;
}
.loader2-wrap {
display: none;
width: 100vw;

ファイルの表示

@ -35944,7 +35944,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var MeetingDetail = function MeetingDetail(props) {
var _meeting$approval, _props$match$params2, _meeting$meeting_imag, _meeting$pdf;
var _meeting$approval, _props$match$params2, _meeting$meeting_imag;
var history = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_9__.useHistory)();
@ -36223,7 +36223,7 @@ var MeetingDetail = function MeetingDetail(props) {
}
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_component_pdf_modal_pdf__WEBPACK_IMPORTED_MODULE_5__.default, {
show: show_pdf_modal,
pdfPath: (_meeting$pdf = meeting.pdf) !== null && _meeting$pdf !== void 0 ? _meeting$pdf : '/pdf/test.pdf',
pdfPath: meeting.pdf,
handleClose: function handleClose() {
return setShowPDFModal(false);
}
@ -36831,6 +36831,7 @@ var MeetingEdit = function MeetingEdit(props) {
return setCheckRadio(e.target.value);
}
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span", {
className: "lbl padding-16",
children: "\u5168\u54E1\u306B\u9001\u4FE1"
})]
})
@ -36848,6 +36849,7 @@ var MeetingEdit = function MeetingEdit(props) {
return setCheckRadio(e.target.value);
}
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span", {
className: "lbl padding-16",
children: "\u9078\u3093\u3067\u9001\u4FE1"
})]
})
@ -36866,7 +36868,10 @@ var MeetingEdit = function MeetingEdit(props) {
onChange: function onChange(e) {
return handleCheck(e, k);
}
}), "".concat(item.first_name, " ").concat(item.last_name)]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span", {
className: "lbl padding-16",
children: "".concat(item.first_name, " ").concat(item.last_name)
})]
})
}, k);
}) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("p", {
@ -39453,23 +39458,18 @@ var ChildLogin = function ChildLogin() {
children: _422errors.password
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
className: "edit-set mt-5",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
className: "c-input__checkbox text-center",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("label", {
htmlFor: "remember_me",
className: "m-0 ft-18 ft-md-16",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span", {
children: "\u30ED\u30B0\u30A4\u30F3\u60C5\u5831\u3092\u4FDD\u6301\u3059\u308B"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("input", {
id: "remember_me",
name: "remember",
type: "checkbox",
value: "remember"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
className: "color-box"
})]
})
className: "edit-set text-center mt-5",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("label", {
htmlFor: "remember_me",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("input", {
id: "remember_me",
name: "remember",
type: "checkbox",
value: "remember"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span", {
className: "lbl padding-16",
children: "\u30ED\u30B0\u30A4\u30F3\u60C5\u5831\u3092\u4FDD\u6301\u3059\u308B"
})]
})
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
className: "mt-5",
@ -40355,8 +40355,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var MeetingDetail = function MeetingDetail(props) {
var _meeting$pdf;
var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(localStorage.getItem('notice')),
_useState2 = _slicedToArray(_useState, 2),
notice = _useState2[0],
@ -40615,7 +40613,7 @@ var MeetingDetail = function MeetingDetail(props) {
}
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_component_pdf_modal_pdf__WEBPACK_IMPORTED_MODULE_5__.default, {
show: show_pdf_modal,
pdfPath: (_meeting$pdf = meeting.pdf) !== null && _meeting$pdf !== void 0 ? _meeting$pdf : '/pdf/test.pdf',
pdfPath: meeting.pdf,
handleClose: function handleClose() {
return setShowPDFMoal(false);
}
@ -45143,23 +45141,18 @@ var ParentLogin = function ParentLogin() {
children: _422errors.password
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
className: "edit-set mt-5",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
className: "c-input__checkbox text-center",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("label", {
htmlFor: "remember_me",
className: "m-0 ft-18 ft-md-16",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span", {
children: "\u30ED\u30B0\u30A4\u30F3\u60C5\u5831\u3092\u4FDD\u6301\u3059\u308B"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("input", {
id: "remember_me",
name: "remember",
type: "checkbox",
value: "remember"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
className: "color-box"
})]
})
className: "edit-set text-center mt-5",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("label", {
htmlFor: "remember_me",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("input", {
id: "remember_me",
name: "remember",
type: "checkbox",
value: "remember"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span", {
className: "lbl padding-16",
children: "\u30ED\u30B0\u30A4\u30F3\u60C5\u5831\u3092\u4FDD\u6301\u3059\u308B"
})]
})
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
className: "mt-5",
@ -47672,6 +47665,7 @@ var MeetingAdd = function MeetingAdd(props) {
return setCheckRadio(e.target.value);
}
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("span", {
className: "lbl padding-16",
children: "\u5168\u54E1\u306B\u9001\u4FE1"
})]
})
@ -47689,6 +47683,7 @@ var MeetingAdd = function MeetingAdd(props) {
return setCheckRadio(e.target.value);
}
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("span", {
className: "lbl padding-16",
children: "\u9078\u3093\u3067\u9001\u4FE1"
})]
})
@ -47707,7 +47702,10 @@ var MeetingAdd = function MeetingAdd(props) {
onChange: function onChange(e) {
return handleCheck(e, k);
}
}), "".concat(item.first_name, " ").concat(item.last_name)]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("span", {
className: "lbl padding-16",
children: "".concat(item.first_name, " ").concat(item.last_name)
})]
})
}, k);
}) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("p", {
@ -47814,7 +47812,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var MeetingDetail = function MeetingDetail(props) {
var _meeting$approval, _props$match$params4, _meeting$pdf;
var _meeting$approval, _props$match$params4;
var history = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_12__.useHistory)();
@ -48240,7 +48238,7 @@ var MeetingDetail = function MeetingDetail(props) {
loading: submit_notify
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_component_pdf_modal_pdf__WEBPACK_IMPORTED_MODULE_7__.default, {
show: showPdf,
pdfPath: (_meeting$pdf = meeting.pdf) !== null && _meeting$pdf !== void 0 ? _meeting$pdf : '/pdf/test.pdf',
pdfPath: meeting.pdf,
handleClose: function handleClose() {
return setShowPdf(false);
}
@ -48854,6 +48852,7 @@ var MeetingEdit = function MeetingEdit(props) {
return setCheckRadio(e.target.value);
}
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
className: "lbl padding-16",
children: "\u5168\u54E1\u306B\u9001\u4FE1"
})]
})
@ -48871,6 +48870,7 @@ var MeetingEdit = function MeetingEdit(props) {
return setCheckRadio(e.target.value);
}
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
className: "lbl padding-16",
children: "\u9078\u3093\u3067\u9001\u4FE1"
})]
})
@ -48889,7 +48889,10 @@ var MeetingEdit = function MeetingEdit(props) {
onChange: function onChange(e) {
return handleCheck(e, k);
}
}), "".concat(item.first_name, " ").concat(item.last_name)]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
className: "lbl padding-16",
children: "".concat(item.first_name, " ").concat(item.last_name)
})]
})
}, k);
}) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("p", {

ファイルの表示

@ -175,7 +175,7 @@ const MeetingDetail = (props) => {
/>
<ModalPdf
show={show_pdf_modal}
pdfPath={meeting.pdf ?? '/pdf/test.pdf'}
pdfPath={meeting.pdf}
handleClose={()=>setShowPDFModal(false)}
/>
</article>

ファイルの表示

@ -319,7 +319,7 @@ const MeetingEdit = (props) => {
value={false}
onClick={e=>setCheckRadio(e.target.value)}
/>
<span>全員に送信</span>
<span className="lbl padding-16">全員に送信</span>
</label>
</div>
@ -332,10 +332,10 @@ const MeetingEdit = (props) => {
value={true}
onClick={e=>setCheckRadio(e.target.value)}
/>
<span>選んで送信</span>
<span className="lbl padding-16">選んで送信</span>
</label>
</div>
<div className={`checkbox-wrap edit-bg ${check_radio!="true" && 'd-none'}`}>
{
children_list.length != 0 ?
@ -347,7 +347,7 @@ const MeetingEdit = (props) => {
id={`user_name${k}`}
checked = {item.checked}
onChange={e=>handleCheck(e, k)}/>
{`${item.first_name} ${item.last_name}`}
<span className="lbl padding-16">{`${item.first_name} ${item.last_name}`}</span>
</label>
</div>
)

ファイルの表示

@ -66,14 +66,11 @@ const ChildLogin = () => {
}
</div>
<div className="edit-set mt-5">
<div className="c-input__checkbox text-center">
<label htmlFor="remember_me" className="m-0 ft-18 ft-md-16">
<span>ログイン情報を保持する</span>
<input id="remember_me" name="remember" type="checkbox" value="remember"/>
<div className="color-box"></div>
</label>
</div>
<div className="edit-set text-center mt-5">
<label htmlFor="remember_me">
<input id="remember_me" name="remember" type="checkbox" value="remember"/>
<span className="lbl padding-16">ログイン情報を保持する</span>
</label>
</div>
<div className="mt-5">

ファイルの表示

@ -180,7 +180,7 @@ const MeetingDetail = (props) => {
handleClose={()=>setShowMemoModal(false)} />
<ModalPdf
show={show_pdf_modal}
pdfPath={meeting.pdf ?? '/pdf/test.pdf'}
pdfPath={meeting.pdf}
handleClose={()=>setShowPDFMoal(false)} />
</div>
</div>

ファイルの表示

@ -67,14 +67,11 @@ const ParentLogin = () => {
}
</div>
<div className="edit-set mt-5">
<div className="c-input__checkbox text-center">
<label htmlFor="remember_me" className="m-0 ft-18 ft-md-16">
<span>ログイン情報を保持する</span>
<input id="remember_me" name="remember" type="checkbox" value="remember"/>
<div className="color-box"></div>
</label>
</div>
<div className="edit-set text-center mt-5">
<label htmlFor="remember_me">
<input id="remember_me" name="remember" type="checkbox" value="remember"/>
<span className="lbl padding-16">ログイン情報を保持する</span>
</label>
</div>
<div className="mt-5">

ファイルの表示

@ -304,7 +304,7 @@ const MeetingAdd = (props) => {
value={false}
onClick={e=>setCheckRadio(e.target.value)}
/>
<span>全員に送信</span>
<span className="lbl padding-16">全員に送信</span>
</label>
</div>
@ -317,7 +317,7 @@ const MeetingAdd = (props) => {
value={true}
onClick={e=>setCheckRadio(e.target.value)}
/>
<span>選んで送信</span>
<span className="lbl padding-16">選んで送信</span>
</label>
</div>
@ -332,7 +332,9 @@ const MeetingAdd = (props) => {
id={`user_name${k}`}
checked = {item.checked}
onChange={e=>handleCheck(e, k)}/>
{`${item.first_name} ${item.last_name}`}
<span className="lbl padding-16">
{`${item.first_name} ${item.last_name}`}
</span>
</label>
</div>
)

ファイルの表示

@ -260,7 +260,7 @@ const MeetingDetail = (props) => {
/>
<ModalPdf
show={showPdf}
pdfPath={meeting.pdf ?? '/pdf/test.pdf'}
pdfPath={meeting.pdf}
handleClose={()=>setShowPdf(false)}
/>
</div>

ファイルの表示

@ -341,7 +341,7 @@ useEffect(()=>{
value={false}
onClick={e=>setCheckRadio(e.target.value)}
/>
<span>全員に送信</span>
<span className="lbl padding-16">全員に送信</span>
</label>
</div>
@ -354,7 +354,7 @@ useEffect(()=>{
value={true}
onClick={e=>setCheckRadio(e.target.value)}
/>
<span>選んで送信</span>
<span className="lbl padding-16">選んで送信</span>
</label>
</div>
@ -369,7 +369,9 @@ useEffect(()=>{
id={`user_name${k}`}
checked = {item.checked}
onChange={e=>handleCheck(e, k)}/>
{`${item.first_name} ${item.last_name}`}
<span className="lbl padding-16">
{`${item.first_name} ${item.last_name}`}
</span>
</label>
</div>
)

ファイルの表示

@ -27,23 +27,6 @@ input[type=number] {
}
input[type='checkbox']{
border-radius: 0px;
// background-color: white;
border-color: #707070;
&:checked{
border-color: #707070;
background-image: url(/images/icon-checked.svg);
background-color: white;
background-size: 14px;
}
&:focus{
box-shadow: none;
}
}
input[type="date"].hide-calender{
&::-webkit-inner-spin-button,&::-webkit-calendar-picker-indicator{
@ -53,3 +36,121 @@ input[type="date"].hide-calender{
}
input[type=checkbox],
input[type=radio] {
opacity: 0;
position: absolute;
z-index: 1;
width: 20px;
height: 20px;
}
input[type=checkbox]:checked,
input[type=radio]:checked,
input[type=checkbox]:focus,
input[type=radio]:focus {
outline: none !important;
}
input[type=checkbox]+.lbl,
input[type=radio]+.lbl {
position: relative;
z-index: 2;
display: inline-block;
margin: 0;
line-height: 20px;
min-height: 20px;
min-width: 20px;
font-weight: normal;
}
input[type=checkbox]+.lbl.padding-16::before,
input[type=radio]+.lbl.padding-16::before {
margin-right: 16px;
}
input[type=checkbox]+.lbl.padding-12::before,
input[type=radio]+.lbl.padding-12::before {
margin-right: 12px;
}
input[type=checkbox]+.lbl.padding-8::before,
input[type=radio]+.lbl.padding-8::before {
margin-right: 8px;
}
input[type=checkbox]+.lbl.padding-4::before,
input[type=radio]+.lbl.padding-4::before {
margin-right: 4px;
}
input[type=checkbox]+.lbl.padding-0::before,
input[type=radio]+.lbl.padding-0::before {
margin-right: 0px;
}
input[type=checkbox]+.lbl::before,
input[type=radio]+.lbl::before {
font-family: fontAwesome;
font-weight: normal;
font-size: 11px;
color: #2091cf;
content: "\a0";
background-color: #fff;
border: 1px solid #C3C3C3;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
border-radius: 7px;
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: 13px;
min-width: 13px;
margin-right: 1px;
margin-top: -5px;
width: 27px;
height: 27px;
}
input[type=checkbox]:checked+.lbl::before,
input[type=radio]:checked+.lbl::before {
display: inline-block;
content: '';
background-color: #000;
border-color: #adb8c0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
}
input[type=checkbox]:checked+.lbl::after,
input[type=radio]:checked+.lbl::after {
content: "";
position: absolute;
left: 10px;
top: 1px;
width: 7px;
height: 14px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
// input[type=checkbox]:active+.lbl::before,
// input[type=radio]:active+.lbl::before,
// input[type=checkbox]:checked:active+.lbl::before,
// input[type=radio]:checked:active+.lbl::before {
// box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
// }
input[type=checkbox]:disabled+.lbl::before,
input[type=radio]:disabled+.lbl::before,
input[type=checkbox][disabled]+.lbl::before,
input[type=radio][disabled]+.lbl::before,
input[type=checkbox].disabled+.lbl::before,
input[type=radio].disabled+.lbl::before {
background-color: #DDD !important;
border-color: #CCC !important;
box-shadow: none !important;
color: #BBB;
}

ファイルの表示

@ -270,4 +270,7 @@ a{
.numerator, .denominator{
font-size: 16px !important;
}
}
}