suwako
/
kikikan
アーカイブ
1
0
フォーク 0
コード イシュー プルリクエスト プロジェクト リリース Wiki アクティビティ

add contact.js

このコミットが含まれているのは:
dragon1211 2021-09-30 04:54:09 -07:00
親 3dd7433efc
コミット ee218186d1
17個のファイルの変更、1440行の追加、36行の削除
統計情報を表示 Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む

281
backend/public/css/app.css vendored
ファイルの表示

@ -1,5 +1,7 @@
@import url(https://fonts.googleapis.com/css?family=Nunito);
@charset "UTF-8";
/* border color */
/* input color */
.bg-color-1 {
background-color: #F5F7F8 !important;
}
@ -4831,7 +4833,7 @@ a.badge-dark:focus, a.badge-dark.focus {
border-radius: 0;
}
.alert {
.alert, .alert-success, .alert-danger {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
@ -10599,3 +10601,280 @@ input[type=date].hide-calender::-webkit-inner-spin-button, input[type=date].hide
font-size: 2.8rem;
}
}
/*
モーダルエラー
*/
.alert, .alert-success, .alert-danger {
position: fixed;
top: 0;
right: 0;
left: 0;
width: 100%;
padding: 24px 16px;
text-align: center;
color: #fff;
font-weight: 700;
-webkit-animation: 0.5s ease-out 1.8s 1 normal forwards running fadeOut;
animation: 0.5s ease-out 1.8s 1 normal forwards running fadeOut;
}
.alert-danger {
background: rgba(175, 6, 6, 0.95);
}
.alert-success {
background: rgba(46, 153, 232, 0.95);
}
/*
テキストエラー
*/
.l-alert__text--red {
display: block;
margin-top: 8px;
width: 100%;
padding: 8px;
color: #ff4747;
background: #ffeaea;
}
.c-button {
text-align: center;
margin: auto;
}
.c-button__target, .c-button__target--outlined, .c-button__target--contained {
border-radius: 7px;
display: inline-block;
width: auto;
height: auto;
}
/* top emphasis */
/* high emphasis */
.c-button__target--contained {
background: #000000;
color: #fff;
padding: 10px 16px;
font-weight: 700;
}
/* medium emphasis */
.c-button__target--outlined {
border: 1px solid #D8D8D8;
padding: 10px 16px;
font-weight: 700;
}
/* low emphasis */
.c-button__target--text {
color: #004DC7;
}
/* bottom emphasis */
.c-button--long {
max-width: 300px;
width: 100%;
margin: auto;
}
.c-img--cover {
position: relative;
display: block;
}
.c-img--cover:before {
content: "";
padding-top: 100%;
display: block;
}
.c-img--cover img {
position: absolute;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
height: 100%;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.c-img--contain {
position: relative;
display: block;
}
.c-img--contain img {
position: absolute;
-o-object-fit: contain;
object-fit: contain;
font-family: "object-fit: contain;";
height: 100%;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*
画像サークル
*/
.c-img__circle {
border-radius: 50%;
overflow: hidden;
}
/*
アイコン画像
*/
.c-img--icon {
width: 45px;
height: 45px;
border-radius: 50%;
overflow: hidden;
}
.c-input {
position: relative;
}
.c-input textarea {
resize: none;
}
.c-input__edit {
padding: 9px 15px;
border-radius: 15px;
border: 1px solid gainsboro;
}
.c-input__edit:focus {
border: 2px solid #3490dc !important;
box-shadow: none !important;
}
/*
label
*/
.c-input__label {
display: block;
position: absolute;
pointer-events: none;
padding: 3px 10px;
background: #fff;
top: -12px;
left: 15px;
font-size: 13px;
color: #B2B2B2;
}
.c-input__target.is-invalid {
border: 1px solid #ff9999;
}
/*
checkbox
*/
.c-input__checkbox {
display: block;
position: relative;
padding-left: 20px;
padding-top: 3px;
}
.c-input__checkbox input[type=checkbox],
.c-input__checkbox input[type=radio] {
position: absolute;
z-index: -1;
opacity: 0;
left: 0;
}
.c-input__checkbox label {
padding-top: 5px;
padding-left: 10px;
}
.c-input__checkbox .color-box {
position: absolute;
top: 9px;
left: 0;
height: 20px;
width: 20px;
border-radius: 5px;
background: #fff;
border: 1px solid #C3C3C3;
}
.c-input__checkbox .color-box.circle {
border-radius: 50%;
}
.c-input__checkbox .color-box:after {
content: "";
position: absolute;
display: none;
left: 7px;
top: 4px;
width: 4px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.c-input__checkbox input:checked ~ .color-box {
background: #000;
border: 1px solid #000;
}
.c-input__checkbox input:checked ~ .color-box:after {
display: block;
}
/*
list
*/
.c-input__lists {
display: flex;
/* 横幅いっぱい */
justify-content: space-between;
/* 横並び */
flex-wrap: wrap;
justify-content: flex-start;
}
.c-input__lists .c-input__list {
position: relative;
margin-right: 10px;
margin-bottom: 10px;
}
.c-input__lists .c-input__list label {
cursor: pointer;
color: #cccccc;
padding: 5px 20px;
border: 1px solid #C3C3C3;
display: inline-block;
border-radius: 30px;
transition: 0.2s;
}
.c-input__lists .c-input__list input {
position: absolute;
z-index: 1;
opacity: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.c-input__lists .c-input__list input:checked ~ label {
color: #fff;
background: #000;
border: 1px solid #000;
}
.c-input__lists .c-input__list input.non-check + label {
background: #ddd !important;
}
.c-input__lists .c-input__list input:disabled + label {
background: #eee;
}
.c-lists .c-list {
margin-bottom: 16px;
}
.c-lists .c-list:last-child {
margin-bottom: 0;
}

685
backend/public/js/app.js vendored
ファイルの表示

@ -3493,6 +3493,328 @@ const buttonClasses = (0,_material_ui_unstyled__WEBPACK_IMPORTED_MODULE_1__.defa
/***/ }),
/***/ "./node_modules/@material-ui/core/CircularProgress/CircularProgress.js":
/*!*****************************************************************************!*\
!*** ./node_modules/@material-ui/core/CircularProgress/CircularProgress.js ***!
\*****************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/objectWithoutPropertiesLoose */ "./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js");
/* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/esm/extends */ "./node_modules/@babel/runtime/helpers/esm/extends.js");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! prop-types */ "./node_modules/prop-types/index.js");
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.m.js");
/* harmony import */ var _material_ui_utils__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @material-ui/utils */ "./node_modules/@material-ui/core/node_modules/@material-ui/utils/esm/chainPropTypes.js");
/* harmony import */ var _material_ui_unstyled__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @material-ui/unstyled */ "./node_modules/@material-ui/unstyled/composeClasses/composeClasses.js");
/* harmony import */ var _material_ui_system__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @material-ui/system */ "./node_modules/@emotion/react/dist/emotion-react.browser.esm.js");
/* harmony import */ var _utils_capitalize__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils/capitalize */ "./node_modules/@material-ui/core/utils/capitalize.js");
/* harmony import */ var _styles_useThemeProps__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../styles/useThemeProps */ "./node_modules/@material-ui/core/styles/useThemeProps.js");
/* harmony import */ var _styles_styled__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../styles/styled */ "./node_modules/@material-ui/core/styles/styled.js");
/* harmony import */ var _circularProgressClasses__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./circularProgressClasses */ "./node_modules/@material-ui/core/CircularProgress/circularProgressClasses.js");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
const _excluded = ["className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"];
let _ = t => t,
_t,
_t2,
_t3,
_t4;
const SIZE = 44;
const circularRotateKeyframe = (0,_material_ui_system__WEBPACK_IMPORTED_MODULE_6__.keyframes)(_t || (_t = _`
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
`));
const circularDashKeyframe = (0,_material_ui_system__WEBPACK_IMPORTED_MODULE_6__.keyframes)(_t2 || (_t2 = _`
0% {
stroke-dasharray: 1px, 200px;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 100px, 200px;
stroke-dashoffset: -15px;
}
100% {
stroke-dasharray: 100px, 200px;
stroke-dashoffset: -125px;
}
`));
const useUtilityClasses = styleProps => {
const {
classes,
variant,
color,
disableShrink
} = styleProps;
const slots = {
root: ['root', variant, `color${(0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_7__.default)(color)}`],
svg: ['svg'],
circle: ['circle', `circle${(0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_7__.default)(variant)}`, disableShrink && 'circleDisableShrink']
};
return (0,_material_ui_unstyled__WEBPACK_IMPORTED_MODULE_8__.default)(slots, _circularProgressClasses__WEBPACK_IMPORTED_MODULE_9__.getCircularProgressUtilityClass, classes);
};
const CircularProgressRoot = (0,_styles_styled__WEBPACK_IMPORTED_MODULE_10__.default)('span', {
name: 'MuiCircularProgress',
slot: 'Root',
overridesResolver: (props, styles) => {
const {
styleProps
} = props;
return [styles.root, styles[styleProps.variant], styles[`color${(0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_7__.default)(styleProps.color)}`]];
}
})(({
styleProps,
theme
}) => (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__.default)({
display: 'inline-block'
}, styleProps.variant === 'determinate' && {
transition: theme.transitions.create('transform')
}, styleProps.color !== 'inherit' && {
color: theme.palette[styleProps.color].main
}), ({
styleProps
}) => styleProps.variant === 'indeterminate' && (0,_material_ui_system__WEBPACK_IMPORTED_MODULE_6__.css)(_t3 || (_t3 = _`
animation: ${0} 1.4s linear infinite;
`), circularRotateKeyframe));
const CircularProgressSVG = (0,_styles_styled__WEBPACK_IMPORTED_MODULE_10__.default)('svg', {
name: 'MuiCircularProgress',
slot: 'Svg',
overridesResolver: (props, styles) => styles.svg
})({
display: 'block' // Keeps the progress centered
});
const CircularProgressCircle = (0,_styles_styled__WEBPACK_IMPORTED_MODULE_10__.default)('circle', {
name: 'MuiCircularProgress',
slot: 'Circle',
overridesResolver: (props, styles) => {
const {
styleProps
} = props;
return [styles.circle, styles[`circle${(0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_7__.default)(styleProps.variant)}`], styleProps.disableShrink && styles.circleDisableShrink];
}
})(({
styleProps,
theme
}) => (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__.default)({
stroke: 'currentColor'
}, styleProps.variant === 'determinate' && {
transition: theme.transitions.create('stroke-dashoffset')
}, styleProps.variant === 'indeterminate' && {
// Some default value that looks fine waiting for the animation to kicks in.
strokeDasharray: '80px, 200px',
strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
}), ({
styleProps
}) => styleProps.variant === 'indeterminate' && !styleProps.disableShrink && (0,_material_ui_system__WEBPACK_IMPORTED_MODULE_6__.css)(_t4 || (_t4 = _`
animation: ${0} 1.4s ease-in-out infinite;
`), circularDashKeyframe));
/**
* ## ARIA
*
* If the progress bar is describing the loading progress of a particular region of a page,
* you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
* attribute to `true` on that region until it has finished loading.
*/
const CircularProgress = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.forwardRef(function CircularProgress(inProps, ref) {
const props = (0,_styles_useThemeProps__WEBPACK_IMPORTED_MODULE_11__.default)({
props: inProps,
name: 'MuiCircularProgress'
});
const {
className,
color = 'primary',
disableShrink = false,
size = 40,
style,
thickness = 3.6,
value = 0,
variant = 'indeterminate'
} = props,
other = (0,_babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0__.default)(props, _excluded);
const styleProps = (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__.default)({}, props, {
color,
disableShrink,
size,
thickness,
value,
variant
});
const classes = useUtilityClasses(styleProps);
const circleStyle = {};
const rootStyle = {};
const rootProps = {};
if (variant === 'determinate') {
const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
circleStyle.strokeDasharray = circumference.toFixed(3);
rootProps['aria-valuenow'] = Math.round(value);
circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
rootStyle.transform = 'rotate(-90deg)';
}
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(CircularProgressRoot, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__.default)({
className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__.default)(classes.root, className),
style: (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__.default)({
width: size,
height: size
}, rootStyle, style),
styleProps: styleProps,
ref: ref,
role: "progressbar"
}, rootProps, other, {
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(CircularProgressSVG, {
className: classes.svg,
styleProps: styleProps,
viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(CircularProgressCircle, {
className: classes.circle,
style: circleStyle,
styleProps: styleProps,
cx: SIZE,
cy: SIZE,
r: (SIZE - thickness) / 2,
fill: "none",
strokeWidth: thickness
})
})
}));
});
true ? CircularProgress.propTypes
/* remove-proptypes */
= {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* Override or extend the styles applied to the component.
*/
classes: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().object),
/**
* @ignore
*/
className: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().string),
/**
* The color of the component. It supports those theme colors that make sense for this component.
* @default 'primary'
*/
color: prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), (prop_types__WEBPACK_IMPORTED_MODULE_3___default().string)]),
/**
* If `true`, the shrink animation is disabled.
* This only works if variant is `indeterminate`.
* @default false
*/
disableShrink: (0,_material_ui_utils__WEBPACK_IMPORTED_MODULE_12__.default)((prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool), props => {
if (props.disableShrink && props.variant && props.variant !== 'indeterminate') {
return new Error('Material-UI: You have provided the `disableShrink` prop ' + 'with a variant other than `indeterminate`. This will have no effect.');
}
return null;
}),
/**
* The size of the component.
* If using a number, the pixel unit is assumed.
* If using a string, you need to provide the CSS unit, e.g '3rem'.
* @default 40
*/
size: prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_3___default().number), (prop_types__WEBPACK_IMPORTED_MODULE_3___default().string)]),
/**
* @ignore
*/
style: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().object),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().object),
/**
* The thickness of the circle.
* @default 3.6
*/
thickness: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().number),
/**
* The value of the progress indicator for the determinate variant.
* Value between 0 and 100.
* @default 0
*/
value: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().number),
/**
* The variant to use.
* Use indeterminate when there is no progress value.
* @default 'indeterminate'
*/
variant: prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOf(['determinate', 'indeterminate'])
} : 0;
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CircularProgress);
/***/ }),
/***/ "./node_modules/@material-ui/core/CircularProgress/circularProgressClasses.js":
/*!************************************************************************************!*\
!*** ./node_modules/@material-ui/core/CircularProgress/circularProgressClasses.js ***!
\************************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "getCircularProgressUtilityClass": () => (/* binding */ getCircularProgressUtilityClass),
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _material_ui_unstyled__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @material-ui/unstyled */ "./node_modules/@material-ui/unstyled/generateUtilityClass/generateUtilityClass.js");
/* harmony import */ var _material_ui_unstyled__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @material-ui/unstyled */ "./node_modules/@material-ui/unstyled/generateUtilityClasses/generateUtilityClasses.js");
function getCircularProgressUtilityClass(slot) {
return (0,_material_ui_unstyled__WEBPACK_IMPORTED_MODULE_0__.default)('MuiCircularProgress', slot);
}
const circularProgressClasses = (0,_material_ui_unstyled__WEBPACK_IMPORTED_MODULE_1__.default)('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (circularProgressClasses);
/***/ }),
/***/ "./node_modules/@material-ui/core/colors/blue.js":
/*!*******************************************************!*\
!*** ./node_modules/@material-ui/core/colors/blue.js ***!
@ -5130,6 +5452,266 @@ __webpack_require__.r(__webpack_exports__);
/***/ }),
/***/ "./node_modules/@material-ui/lab/LoadingButton/LoadingButton.js":
/*!**********************************************************************!*\
!*** ./node_modules/@material-ui/lab/LoadingButton/LoadingButton.js ***!
\**********************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/objectWithoutPropertiesLoose */ "./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js");
/* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/esm/extends */ "./node_modules/@babel/runtime/helpers/esm/extends.js");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! prop-types */ "./node_modules/prop-types/index.js");
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _material_ui_utils__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @material-ui/utils */ "./node_modules/@material-ui/lab/node_modules/@material-ui/utils/esm/chainPropTypes.js");
/* harmony import */ var _material_ui_core_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @material-ui/core/utils */ "./node_modules/@material-ui/core/utils/capitalize.js");
/* harmony import */ var _material_ui_unstyled__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @material-ui/unstyled */ "./node_modules/@material-ui/unstyled/composeClasses/composeClasses.js");
/* harmony import */ var _material_ui_core_styles__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @material-ui/core/styles */ "./node_modules/@material-ui/core/styles/styled.js");
/* harmony import */ var _material_ui_core_styles__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @material-ui/core/styles */ "./node_modules/@material-ui/core/styles/useThemeProps.js");
/* harmony import */ var _material_ui_core_Button__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @material-ui/core/Button */ "./node_modules/@material-ui/core/Button/Button.js");
/* harmony import */ var _material_ui_core_CircularProgress__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @material-ui/core/CircularProgress */ "./node_modules/@material-ui/core/CircularProgress/CircularProgress.js");
/* harmony import */ var _loadingButtonClasses__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./loadingButtonClasses */ "./node_modules/@material-ui/lab/LoadingButton/loadingButtonClasses.js");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
const _excluded = ["children", "disabled", "loading", "loadingIndicator", "loadingPosition"];
const useUtilityClasses = styleProps => {
const {
loading,
loadingPosition,
classes
} = styleProps;
const slots = {
root: ['root', loading && 'loading'],
startIcon: [loading && `startIconLoading${(0,_material_ui_core_utils__WEBPACK_IMPORTED_MODULE_5__.default)(loadingPosition)}`],
endIcon: [loading && `endIconLoading${(0,_material_ui_core_utils__WEBPACK_IMPORTED_MODULE_5__.default)(loadingPosition)}`],
loadingIndicator: ['loadingIndicator', loading && `loadingIndicator${(0,_material_ui_core_utils__WEBPACK_IMPORTED_MODULE_5__.default)(loadingPosition)}`]
};
const composedClasses = (0,_material_ui_unstyled__WEBPACK_IMPORTED_MODULE_6__.default)(slots, _loadingButtonClasses__WEBPACK_IMPORTED_MODULE_7__.getLoadingButtonUtilityClass, classes);
return (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__.default)({}, classes, composedClasses);
}; // TODO use `import { rootShouldForwardProp } from '../styles/styled';` once move to core
const rootShouldForwardProp = prop => prop !== 'styleProps' && prop !== 'theme' && prop !== 'sx' && prop !== 'as' && prop !== 'classes';
const LoadingButtonRoot = (0,_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_8__.default)(_material_ui_core_Button__WEBPACK_IMPORTED_MODULE_9__.default, {
shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
name: 'MuiLoadingButton',
slot: 'Root',
overridesResolver: (props, styles) => {
return [styles.root, styles.startIconLoadingStart && {
[`& .${_loadingButtonClasses__WEBPACK_IMPORTED_MODULE_7__.default.startIconLoadingStart}`]: styles.startIconLoadingStart
}, styles.endIconLoadingEnd && {
[`& .${_loadingButtonClasses__WEBPACK_IMPORTED_MODULE_7__.default.endIconLoadingEnd}`]: styles.endIconLoadingEnd
}];
}
})(({
styleProps,
theme
}) => (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__.default)({
[`& .${_loadingButtonClasses__WEBPACK_IMPORTED_MODULE_7__.default.startIconLoadingStart}, & .${_loadingButtonClasses__WEBPACK_IMPORTED_MODULE_7__.default.endIconLoadingEnd}`]: {
transition: theme.transitions.create(['opacity'], {
duration: theme.transitions.duration.short
}),
opacity: 0
}
}, styleProps.loadingPosition === 'center' && {
transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
duration: theme.transitions.duration.short
}),
[`&.${_loadingButtonClasses__WEBPACK_IMPORTED_MODULE_7__.default.loading}`]: {
color: 'transparent'
}
}));
const LoadingButtonLoadingIndicator = (0,_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_8__.default)('div', {
name: 'MuiLoadingButton',
slot: 'LoadingIndicator',
overridesResolver: (props, styles) => {
const {
styleProps
} = props;
return [styles.loadingIndicator, styles[`loadingIndicator${(0,_material_ui_core_utils__WEBPACK_IMPORTED_MODULE_5__.default)(styleProps.loadingPosition)}`]];
}
})(({
theme,
styleProps
}) => (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__.default)({
position: 'absolute',
visibility: 'visible',
display: 'flex'
}, styleProps.loadingPosition === 'start' && {
left: 14
}, styleProps.loadingPosition === 'center' && {
left: '50%',
transform: 'translate(-50%)',
color: theme.palette.action.disabled
}, styleProps.loadingPosition === 'end' && {
right: 14
}));
const LoadingIndicator = /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_material_ui_core_CircularProgress__WEBPACK_IMPORTED_MODULE_10__.default, {
color: "inherit",
size: 16
});
const LoadingButton = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.forwardRef(function LoadingButton(inProps, ref) {
const props = (0,_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_11__.default)({
props: inProps,
name: 'MuiLoadingButton'
});
const {
children,
disabled = false,
loading = false,
loadingIndicator = LoadingIndicator,
loadingPosition = 'center'
} = props,
other = (0,_babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0__.default)(props, _excluded);
const styleProps = (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__.default)({}, props, {
disabled,
loading,
loadingIndicator,
loadingPosition
});
const classes = useUtilityClasses(styleProps);
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(LoadingButtonRoot, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__.default)({
disabled: disabled || loading,
ref: ref
}, other, {
classes: classes,
styleProps: styleProps,
children: [loading && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(LoadingButtonLoadingIndicator, {
className: classes.loadingIndicator,
styleProps: styleProps,
children: loadingIndicator
}), children]
}));
});
true ? LoadingButton.propTypes
/* remove-proptypes */
= {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the component.
*/
children: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().node),
/**
* Override or extend the styles applied to the component.
*/
classes: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().object),
/**
* If `true`, the component is disabled.
* @default false
*/
disabled: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool),
/**
* If `true`, the loading indicator is shown.
* @default false
*/
loading: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool),
/**
* Element placed before the children if the button is in loading state.
* @default <CircularProgress color="inherit" size={16} />
*/
loadingIndicator: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().node),
/**
* The loading indicator can be positioned on the start, end, or the center of the button.
* @default 'center'
*/
loadingPosition: (0,_material_ui_utils__WEBPACK_IMPORTED_MODULE_12__.default)(prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOf(['start', 'end', 'center']), props => {
if (props.loadingPosition === 'start' && !props.startIcon) {
return new Error(`Material-UI: The loadingPosition="start" should be used in combination with startIcon.`);
}
if (props.loadingPosition === 'end' && !props.endIcon) {
return new Error(`Material-UI: The loadingPosition="end" should be used in combination with endIcon.`);
}
return null;
}),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().object)
} : 0;
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (LoadingButton);
/***/ }),
/***/ "./node_modules/@material-ui/lab/LoadingButton/loadingButtonClasses.js":
/*!*****************************************************************************!*\
!*** ./node_modules/@material-ui/lab/LoadingButton/loadingButtonClasses.js ***!
\*****************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "getLoadingButtonUtilityClass": () => (/* binding */ getLoadingButtonUtilityClass),
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _material_ui_unstyled__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @material-ui/unstyled */ "./node_modules/@material-ui/unstyled/generateUtilityClass/generateUtilityClass.js");
/* harmony import */ var _material_ui_unstyled__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @material-ui/unstyled */ "./node_modules/@material-ui/unstyled/generateUtilityClasses/generateUtilityClasses.js");
function getLoadingButtonUtilityClass(slot) {
return (0,_material_ui_unstyled__WEBPACK_IMPORTED_MODULE_0__.default)('MuiLoadingButton', slot);
}
const loadingButtonClasses = (0,_material_ui_unstyled__WEBPACK_IMPORTED_MODULE_1__.default)('MuiLoadingButton', ['root', 'loading', 'loadingIndicator', 'loadingIndicatorCenter', 'loadingIndicatorStart', 'loadingIndicatorEnd', 'endIconLoadingEnd', 'startIconLoadingStart']);
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (loadingButtonClasses);
/***/ }),
/***/ "./node_modules/@material-ui/lab/node_modules/@material-ui/utils/esm/chainPropTypes.js":
/*!*********************************************************************************************!*\
!*** ./node_modules/@material-ui/lab/node_modules/@material-ui/utils/esm/chainPropTypes.js ***!
\*********************************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ chainPropTypes)
/* harmony export */ });
function chainPropTypes(propType1, propType2) {
if (false) {}
return function validate(...args) {
return propType1(...args) || propType2(...args);
};
}
/***/ }),
/***/ "./node_modules/@material-ui/private-theming/useTheme/ThemeContext.js":
/*!****************************************************************************!*\
!*** ./node_modules/@material-ui/private-theming/useTheme/ThemeContext.js ***!
@ -9837,6 +10419,8 @@ module.exports = {
__webpack_require__(/*! ./bootstrap */ "./resources/js/bootstrap.js");
__webpack_require__(/*! ./pages/contact */ "./resources/js/pages/contact/index.jsx");
__webpack_require__(/*! ./pages/contact/complete */ "./resources/js/pages/contact/complete.jsx");
/***/ }),
@ -9904,7 +10488,7 @@ var Contact_Complete = function Contact_Complete() {
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div", {
className: "d-flex justify-content-between ft-13",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
className: "w-50 pr-1 rounded-20",
className: "w-50 pr-1",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_material_ui_core__WEBPACK_IMPORTED_MODULE_3__.default, {
fullWidth: true,
className: "p-3 rounded-20 ft-13 font-weight-bold text-black bg-color-2",
@ -9934,6 +10518,105 @@ if (document.getElementById('contact-complete')) {
/***/ }),
/***/ "./resources/js/pages/contact/index.jsx":
/*!**********************************************!*\
!*** ./resources/js/pages/contact/index.jsx ***!
\**********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "./node_modules/react-dom/index.js");
/* harmony import */ var _material_ui_lab__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @material-ui/lab */ "./node_modules/@material-ui/lab/LoadingButton/LoadingButton.js");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var Contact = function Contact() {
var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(''),
_useState2 = _slicedToArray(_useState, 2),
email = _useState2[0],
setEmail = _useState2[1];
var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(''),
_useState4 = _slicedToArray(_useState3, 2),
content = _useState4[0],
setContent = _useState4[1];
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("form", {
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("p", {
className: "text-center font-weight-bold ft-20",
children: "\u304A\u554F\u3044\u5408\u308F\u305B"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div", {
className: "c-input mt-4",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("label", {
htmlFor: "email",
className: "c-input__label",
children: " \u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9 "
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("input", {
type: "email",
name: "email",
id: "email",
className: "w-100 c-input__edit is-invalid",
value: email,
onChange: function onChange(e) {
return setEmail(e.target.value);
},
required: true,
autoFocus: true
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div", {
className: "c-input mt-4",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("label", {
htmlFor: "content",
className: "c-input__label",
children: " \u304A\u554F\u5408\u305B\u5185\u5BB9 "
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("textarea", {
name: "content",
id: "content",
rows: "7",
className: "w-100 c-input__edit is-invalid",
value: content,
onChange: function onChange(e) {
return setContent(e.target.value);
},
required: true
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
className: "mt-4",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_material_ui_lab__WEBPACK_IMPORTED_MODULE_3__.default, {
type: "submit",
fullWidth: true,
className: "p-3 rounded-20 ft-15 font-weight-bold text-black bg-color-2",
children: "\u9001\u4FE1"
})
})]
});
};
if (document.getElementById('contact')) {
react_dom__WEBPACK_IMPORTED_MODULE_1__.render( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Contact, {}), document.getElementById('contact'));
}
/***/ }),
/***/ "./node_modules/clsx/dist/clsx.m.js":
/*!******************************************!*\
!*** ./node_modules/clsx/dist/clsx.m.js ***!

2
backend/resources/js/app.js vendored
ファイルの表示

@ -1,2 +1,4 @@
require('./bootstrap');
require('./pages/contact');
require('./pages/contact/complete');

2
backend/resources/js/pages/contact/complete.jsx
ファイルの表示

@ -16,7 +16,7 @@ const Contact_Complete = () => {
<div className="p-2 my-4 border text-center font-weight-bold">sample@gmail.com</div>
<div className="d-flex justify-content-between ft-13">
<div className="w-50 pr-1 rounded-20">
<div className="w-50 pr-1">
<Button fullWidth className="p-3 rounded-20 ft-13 font-weight-bold text-black bg-color-2" onClick={()=>{window.location.href="/login/p-account/"}}>親ログイン画面へ</Button>
</div>
<div className="w-50 pl-1">

36
backend/resources/js/pages/contact/index.jsx ノーマルファイル
ファイルの表示

@ -0,0 +1,36 @@
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@material-ui/core';
import { LoadingButton } from '@material-ui/lab';
const Contact = () => {
const [email, setEmail] = useState('');
const [content, setContent] = useState('');
return (
<form>
<p className="text-center font-weight-bold ft-20">お問い合わせ</p>
<div className="c-input mt-4">
<label htmlFor="email" className="c-input__label"> メールアドレス </label>
<input type="email" name="email" id="email" className="w-100 c-input__edit is-invalid" value={email} onChange={e=>setEmail(e.target.value)} required autoFocus/>
</div>
<div className="c-input mt-4">
<label htmlFor="content" className="c-input__label"> お問合せ内容 </label>
<textarea name="content" id="content" rows="7" className="w-100 c-input__edit is-invalid" value={content} onChange={e=>setContent(e.target.value)} required/>
</div>
<div className="mt-4">
<LoadingButton type="submit" fullWidth className="p-3 rounded-20 ft-15 font-weight-bold text-black bg-color-2">送信</LoadingButton>
</div>
</form>
)
}
if(document.getElementById('contact')){
ReactDOM.render(
<Contact />,
document.getElementById('contact')
)
}

9
backend/resources/sass/_variables.scss vendored
ファイルの表示

@ -22,6 +22,15 @@ $cyan: #6cb2eb;
$color1: #F5F7F8;
$color2: #F0DE00;
$colorRed: #af0606;
$colorBlue: #004DC7;
$colorBlack: #000000;
$colorGray: #B2B2B2;
/* border color */
$borderColorGray: #eeeeee;
/* input color */
$inputBorderGray: #D8D8D8;
.bg-color-1{
background-color: $color1 !important;

7
backend/resources/sass/app.scss vendored
ファイルの表示

@ -43,3 +43,10 @@ $breakpoint-down: (
@import './layouts/main';
@import './component/alert';
@import './component/button';
@import './component/flex';
@import './component/img';
@import './component/input';
@import './component/list';

36
backend/resources/sass/component/_alert.scss vendored ノーマルファイル
ファイルの表示

@ -0,0 +1,36 @@
/*
モーダルエラー
*/
.alert {
position: fixed;
top: 0;
right: 0;
left: 0;
width: 100%;
padding: 24px 16px;
text-align: center;
color: #fff;
font-weight: 700;
// duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name
animation: .5s ease-out 1.8s 1 normal forwards running fadeOut;
}
.alert-danger {
@extend .alert;
background: rgba(175, 6, 6, .95);
}
.alert-success {
@extend .alert;
background: rgba(46, 153, 232, .95);
}
/*
テキストエラー
*/
.l-alert__text--red {
display: block;
margin-top: 8px;
width: 100%;
padding: 8px;
color: #ff4747;
background: #ffeaea;
}

45
backend/resources/sass/component/_button.scss vendored ノーマルファイル
ファイルの表示

@ -0,0 +1,45 @@
.c-button {
text-align: center;
margin: auto;
}
.c-button__target {
border-radius: 7px;
display: inline-block;
width: auto;
height: auto;
}
/* top emphasis */
.c-button__target--fab {}
/* high emphasis */
.c-button__target--contained {
@extend .c-button__target;
background: $colorBlack;
color: #fff;
padding: 10px 16px;
font-weight: 700;
}
/* medium emphasis */
.c-button__target--outlined {
@extend .c-button__target;
border: 1px solid $inputBorderGray;
padding: 10px 16px;
font-weight: 700;
}
/* low emphasis */
.c-button__target--text {
color: $colorBlue;
}
/* bottom emphasis */
.c-button__target--toggle {}
.c-button--long {
max-width: 300px;
width: 100%;
margin: auto;
}

76
backend/resources/sass/component/_flex.scss vendored ノーマルファイル
ファイルの表示

@ -0,0 +1,76 @@
// .c-flex {
// display:-webkit-box;
// display:-ms-flexbox;
// display:flex;
// -ms-flex-wrap: wrap;
// flex-wrap: wrap;
// }
// .c-flex__sp {
// @include mq_down(md) {
// display:-webkit-box;
// display:-ms-flexbox;
// display:flex;
// -ms-flex-wrap: wrap;
// flex-wrap: wrap;
// }
// }
// .c-flex__pc {
// @include mq_up(md) {
// display:-webkit-box;
// display:-ms-flexbox;
// display:flex;
// -ms-flex-wrap: wrap;
// flex-wrap: wrap;
// }
// }
// .c-flex,
// .c-flex__sp,
// .c-flex__pc {
// &.v-center {
// // 高さ：中央揃え
// -webkit-box-align: center;
// -ms-flex-align: center;
// align-items: center;
// }
// &.v-top {
// // 高さ：上揃え
// -webkit-box-align: start;
// -ms-flex-align: start;
// align-items: flex-start;
// }
// &.v-center__sp {
// @include mq_down(md) {
// // 高さ：中央揃え
// -webkit-box-align: center;
// -ms-flex-align: center;
// align-items: center;
// }
// }
// &.v-center__pc {
// @include mq_up(md) {
// // 高さ：中央揃え
// -webkit-box-align: center;
// -ms-flex-align: center;
// align-items: center;
// }
// }
// &.h-center {
// // 横：中央揃え
// -webkit-box-pack: center;
// -ms-flex-pack: center;
// justify-content: center;
// }
// &.h-between {
// // 横：左右揃え
// -webkit-box-pack: center;
// -ms-flex-pack: justify;
// justify-content: space-between;
// }
// &.h-left {
// // 横：左寄せ
// -webkit-box-pack: start;
// -ms-flex-pack: start;
// justify-content: flex-start;
// }
// }

53
backend/resources/sass/component/_img.scss vendored ノーマルファイル
ファイルの表示

@ -0,0 +1,53 @@
.c-img--cover {
position: relative;
display: block;
&:before {
content: "";
padding-top: 100%;
display: block;
}
img {
position: absolute;
object-fit: cover;
font-family: 'object-fit: cover;';
height: 100%;
width: 100%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
}
.c-img--contain {
position: relative;
display: block;
img {
position: absolute;
object-fit: contain;
font-family: 'object-fit: contain;';
height: 100%;
width: 100%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
}
/*
画像サークル
*/
.c-img__circle {
border-radius: 50%;
overflow: hidden;
}
/*
アイコン画像
*/
.c-img--icon {
width: 45px;
height: 45px;
border-radius: 50%;
overflow: hidden;
}

156
backend/resources/sass/component/_input.scss vendored ノーマルファイル
ファイルの表示

@ -0,0 +1,156 @@
.c-input {
position: relative;
textarea{
resize: none;
}
}
.c-input__edit{
padding: 9px 15px;
border-radius: 15px;
border: 1px solid gainsboro;
&:focus{
border: 2px solid #3490dc !important;
box-shadow: none !important;
}
}
/*
label
*/
.c-input__label {
display: block;
position: absolute;
pointer-events: none;
padding: 3px 10px;
background: #fff;
top: -12px;
left: 15px;
font-size: 13px;
color: #B2B2B2;
// transition: .3s;
// transform: translate(10px, 12px) scale(1);
// &.is-active, &.is-text {
// transform: translate(6px, -10px);
// font-size: 10px;
// color: $colorBlack;
// }
}
.c-input__target {
&.is-invalid {
border: 1px solid #ff9999;
}
}
/*
checkbox
*/
.c-input__checkbox {
display: block;
position: relative;
padding-left: 20px;
padding-top: 3px;
input[type=checkbox],
input[type=radio] {
position: absolute;
z-index: -1;
opacity: 0;
left: 0;
}
label {
padding-top: 5px;
padding-left: 10px;
}
.color-box {
position: absolute;
// top: 2px;
top: 9px;
left: 0;
height: 20px;
width: 20px;
border-radius: 5px;
background: #fff;
border: 1px solid #C3C3C3;
&.circle {
border-radius: 50%;
}
&:after {
content: '';
position: absolute;
display: none;
left: 7px;
top: 4px;
width: 4px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
}
}
.c-input__checkbox input:checked ~ .color-box {
background: #000;
border: 1px solid #000;
&:after {
display: block;
}
}
/*
list
*/
.c-input__lists {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
/* 横幅いっぱい */
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
/* 横並び */
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
.c-input__list {
position: relative;
margin-right: 10px;
margin-bottom: 10px;
label {
cursor: pointer;
color: #cccccc;
padding: 5px 20px;
border: 1px solid #C3C3C3;
display: inline-block;
border-radius: 30px;
transition: .2s;
}
input {
position: absolute;
z-index: 1;
opacity: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
&:checked ~ label {
color: #fff;
background: #000;
border: 1px solid #000;
}
&.non-check + label {
background: #ddd !important;
}
&:disabled + label {
background: #eee;
}
}
}
}

9
backend/resources/sass/component/_list.scss vendored ノーマルファイル
ファイルの表示

@ -0,0 +1,9 @@
.c-lists {
.c-list {
margin-bottom: 16px;
&:last-child {
margin-bottom: 0;
}
.c-list__target {}
}
}

35
backend/resources/views/contact/complete.blade.php
ファイルの表示

@ -1,32 +1,7 @@
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@extends('contact.layout')
<meta name="csrf-token" content="{{ csrf_token() }}">
@section('title', 'Contact us')
<title>Contact us</title>
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel = "stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="">
<main class="l-container">
<div class="l-content">
<div id="contact-complete"></div>
</div>
</main>
</body>
<script src="{{ asset('js/app.js') }}"></script>
</html>
@section('content')
<div id="contact-complete"></div>
@endsection

7
backend/resources/views/contact/index.blade.php ノーマルファイル
ファイルの表示

@ -0,0 +1,7 @@
@extends('contact.layout')
@section('title', 'Contact us')
@section('content')
<div id="contact"></div>
@endsection

32
backend/resources/views/contact/layout.blade.php ノーマルファイル
ファイルの表示

@ -0,0 +1,32 @@
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>@yield('title')</title>
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel = "stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="">
<main class="l-container">
<div class="l-content">
@yield('content')
</div>
</main>
</body>
<script src="{{ asset('js/app.js') }}"></script>
</html>

5
backend/routes/web.php
ファイルの表示

@ -17,6 +17,5 @@ Route::get('/', function () {
return view('welcome');
});
Route::get('/contact-us/complete/', function () {
return view('contact.complete');
});
Route::get('/contact-us', function () {return view('contact.index');});
Route::get('/contact-us/complete/', function () {return view('contact.complete');});