add contact-complete page
このコミットが含まれているのは:
dragon1211
コミット
3dd7433efc
|
|
@ -1,5 +1,13 @@
|
|||
@import url(https://fonts.googleapis.com/css?family=Nunito);
|
||||
@charset "UTF-8";
|
||||
.bg-color-1 {
|
||||
background-color: #F5F7F8 !important;
|
||||
}
|
||||
|
||||
.bg-color-2 {
|
||||
background-color: #F0DE00 !important;
|
||||
}
|
||||
|
||||
/*!
|
||||
* Bootstrap v4.6.0 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
|
|
@ -3535,7 +3543,7 @@ input[type=button].btn-block {
|
|||
width: 1rem;
|
||||
height: 1rem;
|
||||
content: "";
|
||||
background: 50%/50% 50% no-repeat;
|
||||
background: 50% / 50% 50% no-repeat;
|
||||
}
|
||||
|
||||
.custom-checkbox .custom-control-label::before {
|
||||
|
|
@ -10002,92 +10010,6 @@ h3 {
|
|||
border-color: #dee2e6;
|
||||
}
|
||||
}
|
||||
.bg-red-4 {
|
||||
background-color: rgba(255, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.bg-red-6 {
|
||||
background-color: rgba(255, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.bg-black-4 {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.bg-black-6 {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.bg-black {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background-color: #093100;
|
||||
}
|
||||
|
||||
.bg-green-6 {
|
||||
background-color: #093100;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.bg-none {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bg-white-2 {
|
||||
background-color: rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
box-shadow: 0 0 8px #000 !important;
|
||||
}
|
||||
|
||||
.bg-color-1 {
|
||||
background-color: #F5F7F8;
|
||||
}
|
||||
|
||||
.w-30 {
|
||||
width: 30% !important;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.w-md-25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.w-md-50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.w-md-75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded-right-20 {
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
}
|
||||
|
||||
.rounded-top-15 {
|
||||
border-top-right-radius: 15px;
|
||||
border-top-left-radius: 15px;
|
||||
}
|
||||
|
||||
.rounded-15 {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.rounded-top-20 {
|
||||
border-top-right-radius: 20px;
|
||||
border-top-left-radius: 20px;
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
padding: 5px !important;
|
||||
}
|
||||
|
|
@ -10113,78 +10035,6 @@ span.star {
|
|||
font-size: 0;
|
||||
}
|
||||
|
||||
.ft-15 {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.ft-md-15 {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ft-12 {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.ft-13 {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.ft-30 {
|
||||
font-size: 30px !important;
|
||||
}
|
||||
|
||||
.ft-30 {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.ft-md-20 {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #10580c;
|
||||
padding: 0px 20px;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
.navbar .nav {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
.navbar .nav-link {
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
padding: 10px;
|
||||
}
|
||||
.navbar .nav-link:hover {
|
||||
background-color: #084405;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.navbar .nav-link:focus {
|
||||
background-color: #084405;
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
.navbar .navbar-toggler {
|
||||
border: none;
|
||||
}
|
||||
.navbar .navbar-toggler .navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 255.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
||||
}
|
||||
.navbar.shadow-sm {
|
||||
box-shadow: 0 0.125rem 0.25rem #093100 !important;
|
||||
}
|
||||
.navbar .dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: inherit;
|
||||
white-space: pre-wrap;
|
||||
|
|
@ -10194,19 +10044,6 @@ pre {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.edit {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
padding: 0 10px;
|
||||
}
|
||||
.edit:hover {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.edit:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.count {
|
||||
float: right;
|
||||
position: absolute;
|
||||
|
|
@ -10482,6 +10319,152 @@ input[type=date].hide-calender::-webkit-inner-spin-button, input[type=date].hide
|
|||
}
|
||||
}
|
||||
|
||||
.bg-red-4 {
|
||||
background-color: rgba(255, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.bg-red-6 {
|
||||
background-color: rgba(255, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.bg-black-4 {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.bg-black-6 {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.bg-black {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background-color: #093100;
|
||||
}
|
||||
|
||||
.bg-green-6 {
|
||||
background-color: #093100;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.bg-none {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bg-white-2 {
|
||||
background-color: rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
.ft-12 {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.ft-13 {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.ft-14 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.ft-15 {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
.ft-16 {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.ft-17 {
|
||||
font-size: 17px !important;
|
||||
}
|
||||
|
||||
.ft-18 {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.ft-19 {
|
||||
font-size: 19px !important;
|
||||
}
|
||||
|
||||
.ft-20 {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
.ft-30 {
|
||||
font-size: 30px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.ft-md-15 {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.ft-md-20 {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-black {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
box-shadow: 0 0 8px #000 !important;
|
||||
}
|
||||
|
||||
.w-30 {
|
||||
width: 30% !important;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.w-md-25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.w-md-50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.w-md-75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded-right-20 {
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
}
|
||||
|
||||
.rounded-top-15 {
|
||||
border-top-right-radius: 15px;
|
||||
border-top-left-radius: 15px;
|
||||
}
|
||||
|
||||
.rounded-15 {
|
||||
border-radius: 15px !important;
|
||||
}
|
||||
|
||||
.rounded-20 {
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
|
||||
.rounded-top-20 {
|
||||
border-top-right-radius: 20px;
|
||||
border-top-left-radius: 20px;
|
||||
}
|
||||
|
||||
.mt-80-px {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.l-centeringbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -9896,24 +9896,31 @@ var Contact_Complete = function Contact_Complete() {
|
|||
className: "text-center font-weight-bold ft-20",
|
||||
children: "\u304A\u554F\u3044\u5408\u308F\u305B\u5B8C\u4E86"
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("p", {
|
||||
className: "ft-13 p-2 bg-color-1",
|
||||
className: "p-2 mt-80-px mb-0 ft-13 bg-color-1",
|
||||
children: ["\u304A\u554F\u3044\u5408\u308F\u305B\u304C\u5B8C\u4E86\u3057\u307E\u3057\u305F\u3002", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br", {}), "3\u55B6\u696D\u65E5\u4EE5\u5185\u306B\u304A\u8FD4\u4E8B\u3055\u305B\u3066\u3044\u305F\u3060\u304D\u307E\u3059\u3002", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br", {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br", {}), "\u4E07\u304C\u4E00\u5C4A\u304B\u306A\u3044\u5834\u5408\u306F\u3001\u4EE5\u4E0B\u306E\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9\u306B \u76F4\u63A5\u3054\u9023\u7D61\u304F\u3060\u3055\u3044\u307E\u305B\u3002"]
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
|
||||
className: "p-2 my-4 border text-center font-weight-bold",
|
||||
children: "sample@gmail.com"
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div", {
|
||||
className: "row",
|
||||
className: "d-flex justify-content-between ft-13",
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
|
||||
"class": "col-6",
|
||||
className: "w-50 pr-1 rounded-20",
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_material_ui_core__WEBPACK_IMPORTED_MODULE_3__.default, {
|
||||
fullWidth: true,
|
||||
className: "ft-15",
|
||||
className: "p-3 rounded-20 ft-13 font-weight-bold text-black bg-color-2",
|
||||
onClick: function onClick() {
|
||||
window.location.href = "/login/p-account/";
|
||||
},
|
||||
children: "\u89AA\u30ED\u30B0\u30A4\u30F3\u753B\u9762\u3078"
|
||||
})
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
|
||||
className: "col-6",
|
||||
className: "w-50 pl-1",
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_material_ui_core__WEBPACK_IMPORTED_MODULE_3__.default, {
|
||||
fullWidth: true,
|
||||
className: "ft-15",
|
||||
className: "p-3 rounded-20 ft-13 font-weight-bold text-black bg-color-2",
|
||||
onClick: function onClick() {
|
||||
window.location.href = "/login/c-account/";
|
||||
},
|
||||
children: "\u5B50\u30ED\u30B0\u30A4\u30F3\u753B\u9762\u3078"
|
||||
})
|
||||
})]
|
||||
|
|
@ -27312,9 +27319,12 @@ var __WEBPACK_AMD_DEFINE_RESULT__;/**
|
|||
/*!*********************************!*\
|
||||
!*** ./resources/sass/app.scss ***!
|
||||
\*********************************/
|
||||
/***/ (() => {
|
||||
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
// extracted by mini-css-extract-plugin
|
||||
|
||||
throw new Error("Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):\nModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: There is no module with the namespace \"mixin\".\n ╷\n3 │ ┌ @include mixin.pc{\n4 │ │ .fade {\n5 │ │ transition: opacity 0.3s ease;\n6 │ │ -webkit-backface-visibility: hidden;\n7 │ │ backface-visibility: hidden;\n8 │ │ &:hover{\n9 │ │ opacity: 0.7;\n10 │ │ cursor: pointer;\n11 │ │ }\n12 │ │ }\n13 │ │ .fade02 {\n14 │ │ transition: opacity 0.3s ease;\n15 │ │ -webkit-backface-visibility: hidden;\n16 │ │ backface-visibility: hidden;\n17 │ │ &:hover{\n18 │ │ opacity: 0.5;\n19 │ │ cursor: pointer;\n20 │ │ }\n21 │ │ }\n22 │ └ }\n ╵\n resources\\sass\\foundation\\variable\\_animation.scss 3:1 @import\n E:\\_Workstation\\6_\\2_kikikanri\\backend\\resources\\sass\\app.scss 96:9 root stylesheet\n at processResult (E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\webpack\\lib\\NormalModule.js:707:19)\n at E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\webpack\\lib\\NormalModule.js:813:5\n at E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\loader-runner\\lib\\LoaderRunner.js:399:11\n at E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\loader-runner\\lib\\LoaderRunner.js:251:18\n at context.callback (E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\loader-runner\\lib\\LoaderRunner.js:124:13)\n at E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\sass-loader\\dist\\index.js:73:7\n at Function.call$2 (E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\sass\\sass.dart.js:95825:16)\n at _render_closure1.call$2 (E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\sass\\sass.dart.js:83882:12)\n at _RootZone.runBinary$3$3 (E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\sass\\sass.dart.js:28060:18)\n at _FutureListener.handleError$1 (E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\sass\\sass.dart.js:26590:21)");
|
||||
|
||||
/***/ }),
|
||||
|
||||
|
|
@ -61086,7 +61096,42 @@ function combine (array, callback) {
|
|||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = __webpack_modules__;
|
||||
/******/
|
||||
/************************************************************************/
|
||||
/******/ /* webpack/runtime/chunk loaded */
|
||||
/******/ (() => {
|
||||
/******/ var deferred = [];
|
||||
/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => {
|
||||
/******/ if(chunkIds) {
|
||||
/******/ priority = priority || 0;
|
||||
/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
|
||||
/******/ deferred[i] = [chunkIds, fn, priority];
|
||||
/******/ return;
|
||||
/******/ }
|
||||
/******/ var notFulfilled = Infinity;
|
||||
/******/ for (var i = 0; i < deferred.length; i++) {
|
||||
/******/ var [chunkIds, fn, priority] = deferred[i];
|
||||
/******/ var fulfilled = true;
|
||||
/******/ for (var j = 0; j < chunkIds.length; j++) {
|
||||
/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
|
||||
/******/ chunkIds.splice(j--, 1);
|
||||
/******/ } else {
|
||||
/******/ fulfilled = false;
|
||||
/******/ if(priority < notFulfilled) notFulfilled = priority;
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ if(fulfilled) {
|
||||
/******/ deferred.splice(i--, 1)
|
||||
/******/ var r = fn();
|
||||
/******/ if (r !== undefined) result = r;
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ return result;
|
||||
/******/ };
|
||||
/******/ })();
|
||||
/******/
|
||||
/******/ /* webpack/runtime/compat get default export */
|
||||
/******/ (() => {
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
|
|
@ -61148,13 +61193,66 @@ function combine (array, callback) {
|
|||
/******/ };
|
||||
/******/ })();
|
||||
/******/
|
||||
/******/ /* webpack/runtime/jsonp chunk loading */
|
||||
/******/ (() => {
|
||||
/******/ // no baseURI
|
||||
/******/
|
||||
/******/ // object to store loaded and loading chunks
|
||||
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
|
||||
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
|
||||
/******/ var installedChunks = {
|
||||
/******/ "/js/app": 0,
|
||||
/******/ "css/app": 0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // no chunk on demand loading
|
||||
/******/
|
||||
/******/ // no prefetching
|
||||
/******/
|
||||
/******/ // no preloaded
|
||||
/******/
|
||||
/******/ // no HMR
|
||||
/******/
|
||||
/******/ // no HMR manifest
|
||||
/******/
|
||||
/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
|
||||
/******/
|
||||
/******/ // install a JSONP callback for chunk loading
|
||||
/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
|
||||
/******/ var [chunkIds, moreModules, runtime] = data;
|
||||
/******/ // add "moreModules" to the modules object,
|
||||
/******/ // then flag all "chunkIds" as loaded and fire callback
|
||||
/******/ var moduleId, chunkId, i = 0;
|
||||
/******/ for(moduleId in moreModules) {
|
||||
/******/ if(__webpack_require__.o(moreModules, moduleId)) {
|
||||
/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ if(runtime) var result = runtime(__webpack_require__);
|
||||
/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
|
||||
/******/ for(;i < chunkIds.length; i++) {
|
||||
/******/ chunkId = chunkIds[i];
|
||||
/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
|
||||
/******/ installedChunks[chunkId][0]();
|
||||
/******/ }
|
||||
/******/ installedChunks[chunkIds[i]] = 0;
|
||||
/******/ }
|
||||
/******/ return __webpack_require__.O(result);
|
||||
/******/ }
|
||||
/******/
|
||||
/******/ var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
|
||||
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
|
||||
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
|
||||
/******/ })();
|
||||
/******/
|
||||
/************************************************************************/
|
||||
/******/
|
||||
/******/ // startup
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ __webpack_require__("./resources/js/app.js");
|
||||
/******/ // This entry module doesn't tell about it's top-level declarations so it can't be inlined
|
||||
/******/ var __webpack_exports__ = __webpack_require__("./resources/sass/app.scss");
|
||||
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
|
||||
/******/ __webpack_require__.O(undefined, ["css/app"], () => (__webpack_require__("./resources/js/app.js")))
|
||||
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["css/app"], () => (__webpack_require__("./resources/sass/app.scss")))
|
||||
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
|
||||
/******/
|
||||
/******/ })()
|
||||
;
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
{
|
||||
"/js/app.js": "/js/app.js"
|
||||
"/js/app.js": "/js/app.js",
|
||||
"/css/app.css": "/css/app.css"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,20 +7,20 @@ const Contact_Complete = () => {
|
|||
return (
|
||||
<div>
|
||||
<p className="text-center font-weight-bold ft-20">お問い合わせ完了</p>
|
||||
<p className="ft-13 p-2 bg-color-1">
|
||||
<p className="p-2 mt-80-px mb-0 ft-13 bg-color-1">
|
||||
お問い合わせが完了しました。<br/>
|
||||
3営業日以内にお返事させていただきます。<br/><br/>
|
||||
万が一届かない場合は、以下のメールアドレスに 直接ご連絡くださいませ。
|
||||
</p>
|
||||
<div>
|
||||
sample@gmail.com
|
||||
</div>
|
||||
<div className="row">
|
||||
<div class="col-6">
|
||||
<Button fullWidth className="ft-15">親ログイン画面へ</Button>
|
||||
|
||||
<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">
|
||||
<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="col-6">
|
||||
<Button fullWidth className="ft-15">子ログイン画面へ</Button>
|
||||
<div className="w-50 pl-1">
|
||||
<Button fullWidth className="p-3 rounded-20 ft-13 font-weight-bold text-black bg-color-2" onClick={()=>{window.location.href="/login/c-account/"}}>子ログイン画面へ</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,5 +18,15 @@ $green: #38c172;
|
|||
$teal: #4dc0b5;
|
||||
$cyan: #6cb2eb;
|
||||
|
||||
//------------------------
|
||||
$color1: #F5F7F8;
|
||||
$color2: #F0DE00;
|
||||
|
||||
|
||||
.bg-color-1{
|
||||
background-color: $color1 !important;
|
||||
}
|
||||
|
||||
.bg-color-2{
|
||||
background-color: $color2 !important;
|
||||
}
|
||||
|
|
@ -1,228 +1,45 @@
|
|||
// Fonts
|
||||
@charset "UTF-8";
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito');
|
||||
|
||||
/**
|
||||
* VARIABLE
|
||||
* global...サイト全体に使用するサイズや数値に関する変数です。
|
||||
* breakpoint...メディアクエリで使用するブレイクポイントです。
|
||||
* font-family...font-family指定をまとめています。
|
||||
* color...グローバルに使用する色指定です。
|
||||
* z-index...z-indexの並び順を管理します。
|
||||
* easing...cubic-bezier関数を使用したタイミング関数を定義しています。
|
||||
*
|
||||
* FUNCTION
|
||||
* strip-unit...pxやremなどの単位を取り除きます。
|
||||
* em...pxをemに変換します。
|
||||
* rem...pxをremに変換します。
|
||||
* tint...白色を加えて明度を明るくします。
|
||||
* shade...黒色を加えて明度を暗くします。
|
||||
* z-index...z-indexの並び順を管理します。
|
||||
* tracking...Photoshopのカーニングをemに変換します。
|
||||
*
|
||||
* MIXIN
|
||||
* mq-up...メディアクエリを`min-width`で挿入します。
|
||||
* mq-down...メディアクエリを`max-width`で挿入します。
|
||||
* responsive...レスポンシブ対応クラスを生成します。
|
||||
* clearfix...floatの解除をします。
|
||||
* on-event...:hover, :active, :focusをまとめて指定します。
|
||||
* sr-only...非表示にしてスクリーンリーダーにだけ読み上げさせます。
|
||||
*
|
||||
* BASE
|
||||
* normalize...Normalize.cssをインポートしています。
|
||||
* base...タイプセレクタと属性セレクタのデフォルトスタイルです。
|
||||
*
|
||||
* LAYOUT
|
||||
* header...ヘッダーエリアのコンテナブロックのスタイルです。
|
||||
* footer...フッターエリアのコンテナブロックのスタイルです。
|
||||
* main...コンテンツエリアのコンテナブロックのスタイルです。
|
||||
* side...サイドバーエリアのコンテナブロックのスタイルです。
|
||||
* section...`<section>`要素を使うようなセクションの余白を管理します。
|
||||
*
|
||||
* COMPONENT
|
||||
* wrapper...最大幅を指定します。
|
||||
* layout...汎用的なレイアウトオブジェクトです。グリッドレイアウトなどに使用できます。
|
||||
* media...画像とテキストが横並びになるオブジェクトです。
|
||||
* list-unstyled...`<ul>`と`<ol>`でデフォルトスタイルをリセットします。
|
||||
* embed...Youtubeなどをアスペクト比を固定してレスポンシブ対応させる場合に使用します。
|
||||
* table...tableのレイアウトアルゴリズムの変更、余白の変更をします。
|
||||
*
|
||||
* PROJECT
|
||||
* icon...アイコンフォントです。テンプレートから自動で生成されます。
|
||||
* icon-extend...アイコンフォントを拡張するModifierです。
|
||||
* button...ボタンコンポーネントです。
|
||||
* breadcrumb...パンくずリストコンポーネントです。
|
||||
* label...インラインのラベルコンポーネントです。
|
||||
* badge...投稿数のような数値を表示するバッジコンポーネントです。
|
||||
* card...カードタイプのコンポーネントです。
|
||||
* split...定義リストをブロックからインラインにするコンポーネントです。
|
||||
* notification...お知らせエリアのコンポーネントです。
|
||||
*
|
||||
* SCOPE
|
||||
* blog...ブログページのスタイルです。
|
||||
*
|
||||
* UTILITY
|
||||
* text...テキストのスタイルに関する汎用クラスです。
|
||||
* image...画像のレイアウトに関する汎用クラスです。
|
||||
* margin...マージンで余白の管理をします。常に下方向にだけ余白をとります。
|
||||
* display...要素の表示や改行をコントロールする場合に使用します。
|
||||
* width...おもにグリッドで使用する`width`を指定する汎用クラスです。
|
||||
* offset...おもにグリッドで使用する`margin-right`を指定する汎用クラスです。
|
||||
* percent...`width`プロパティを5%刻みで指定する汎用クラスです。
|
||||
*/
|
||||
/**
|
||||
* このスタイルシートは[FLOCSS](https://github.com/hiloki/flocss)をベースにしています。
|
||||
* 定義されているレイヤー以外にもThemeやTestなどのレイヤーを追加することもできます。
|
||||
* 詳しくは[CSSコーディングルール](https://github.com/manabuyasuda/styleguide/blob/master/css-coding-rule.md#flocss)を参照してください。
|
||||
*/
|
||||
|
||||
/* =============================================================================
|
||||
#Foundation
|
||||
========================================================================== */
|
||||
//
|
||||
// Sassの変数と関数を定義します。
|
||||
// 変数は用途ごとにモジュール化、関数は機能ごとにモジュール化をします。
|
||||
// プレフィックス（接頭辞）として`_`をつけます。
|
||||
|
||||
@import "./foundation/mixin/box";
|
||||
@import "./foundation/mixin/clearfix";
|
||||
@import "./foundation/mixin/layout";
|
||||
@import "./foundation/mixin/on-event";
|
||||
@import "./foundation/mixin/pc";
|
||||
@import "./foundation/mixin/responsive";
|
||||
@import "./foundation/mixin/sp";
|
||||
@import "./foundation/mixin/sr-only";
|
||||
|
||||
// //
|
||||
@import "./foundation/variable/animation";
|
||||
@import "./foundation/variable/breakpoint";
|
||||
@import "./foundation/variable/color";
|
||||
@import "./foundation/variable/easing";
|
||||
@import "./foundation/variable/font-family";
|
||||
@import "./foundation/variable/global";
|
||||
@import "./foundation/variable/z-index";
|
||||
// Variables
|
||||
@import 'variables';
|
||||
|
||||
|
||||
@import "foundation/function/_em";
|
||||
@import "foundation/function/_rem";
|
||||
@import "foundation/function/_tint";
|
||||
@import "foundation/function/_shade";
|
||||
$breakpoint-up: (
|
||||
'pc': 'screen and (min-width: 1068px)',
|
||||
'sp': 'screen and (min-width: 431px)',
|
||||
'sp02': 'screen and (min-width: 375px)',
|
||||
) !default;
|
||||
|
||||
$breakpoint-down: (
|
||||
'sp': 'screen and (max-width: 1067px)',
|
||||
'sp02': 'screen and (max-width: 430px)',
|
||||
'min': 'screen and (max-width: 374px)',
|
||||
) !default;
|
||||
|
||||
@mixin mq_up($breakpoint: md) {
|
||||
@media #{map-get($breakpoint-up, $breakpoint)} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mq_down($breakpoint: md) {
|
||||
@media #{map-get($breakpoint-down, $breakpoint)} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Foundationレイヤーでは`html`や`body`のような広範囲にわたるベーススタイル、
|
||||
* `h2`や`ul`のような基本的なタイプセレクタのデフォルトスタイルを定義します。
|
||||
* 装飾的なスタイルは避けて、できる限り低詳細度に保ちます。idセレクタやclassセレクタは使用しません。
|
||||
*/
|
||||
// @import "foundation/base/normalize";
|
||||
// @import "foundation/base/base";
|
||||
// @import "foundation/base/reset";
|
||||
// Bootstrap
|
||||
@import '~bootstrap/scss/bootstrap';
|
||||
|
||||
/* =============================================================================
|
||||
#Layout
|
||||
========================================================================== */
|
||||
/**
|
||||
* Layoutレイヤーはヘッダーやフッターのような、ページを構成するコンテナブロックのスタイルを定義します。
|
||||
* 目安としてはワイヤーフレームに書かれるような大きな単位のブロックです。
|
||||
* 汎用性のあるグリッドシステムは次のObject/Componentレイヤーで定義します。
|
||||
* グローバルナビゲーションやコピーライトのようなコンポーネントは、Object/Projectレイヤーで定義します。
|
||||
* 基本的にはclass属性を使用しますが、id属性を使用することもできます。
|
||||
* プレフィックス（接頭辞）として`l-`をつけます。
|
||||
*/
|
||||
@import "./layout/content";
|
||||
@import "./layout/footer";
|
||||
@import "./layout/header";
|
||||
@import "./layout/main";
|
||||
@import "./layout/section";
|
||||
@import "./layout/side";
|
||||
@import './base/layout';
|
||||
@import './base/loader';
|
||||
@import './base/color';
|
||||
@import './base/font';
|
||||
@import './base/paragraph';
|
||||
|
||||
/* =============================================================================
|
||||
#Object
|
||||
========================================================================== */
|
||||
/**
|
||||
* Objectレイヤーはプロジェクトにおけるビジュアルパターンです。抽象度や詳細度、
|
||||
* 拡張性などによって、4つのレイヤーにわけられます。
|
||||
* それぞれのレイヤーにはプレフィックス（接頭辞）をつけます。
|
||||
* 1. Component（`c-`）
|
||||
* 2. Project（`p-`）
|
||||
* 3. Scope(`s-`)
|
||||
* 4. Utility（`u-`）
|
||||
*
|
||||
* ランディングページのようにページ特有のスタイルを多く含む場合は、
|
||||
* ページ専用のCSSファイルを作成することもできます。
|
||||
* ページ専用のスタイルは、そのページにだけ読み込ませることでスコープをつくり、
|
||||
* プレフィックス（接頭辞）をつけないことで名前の重複を防ぎます。
|
||||
*/
|
||||
@import './layouts/main';
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
#Component
|
||||
-------------------------------------------------------------------------- */
|
||||
/**
|
||||
* Componentレイヤーは多くのプロジェクトで横断的に再利用のできるような、小さな単位のモジュール（機能）です。
|
||||
* OOCSSの構造（structure）の機能を担うため、装飾的なスタイルをできるだけ含めないようにします。
|
||||
* また、`width`や`margin`といったレイアウトに影響を与えるプロパティもできるだけ含めないようにします。
|
||||
* 例えばgridやmediaといったレイアウトパターンが該当します。
|
||||
* プレフィックス（接頭辞）として`c-`をつけます。
|
||||
*/
|
||||
@import "object/component/_wrapper";
|
||||
@import "object/component/_layout";
|
||||
@import "object/component/_table";
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
#Project
|
||||
-------------------------------------------------------------------------- */
|
||||
/**
|
||||
* Projectレイヤーはプロジェクト固有のパターンで、複数のページで使い回せるようなコンポーネントです。
|
||||
* 具体的なスタイルを持つUI（ユーザーフェイス）で、追加されるコンポーネントのほとんどはこのレイヤーに置かれます。
|
||||
* もし、このレイヤーで同じパターンが3箇所で使われていたら、別のコンポーネントとしてまとめられないか検討しましょう。
|
||||
* プレフィックス（接頭辞）として`p-`をつけます。
|
||||
*/
|
||||
@import "object/project/article";
|
||||
@import "object/project/box";
|
||||
@import "object/project/breadcrumb";
|
||||
@import "object/project/button";
|
||||
@import "object/project/card";
|
||||
@import "object/project/edit";
|
||||
@import "object/project/form";
|
||||
@import "object/project/icon-extend";
|
||||
@import "object/project/icon";
|
||||
@import "object/project/label";
|
||||
@import "object/project/login";
|
||||
@import "object/project/meeting";
|
||||
@import "object/project/modal";
|
||||
@import "object/project/notification";
|
||||
@import "object/project/profile";
|
||||
@import "object/project/search";
|
||||
@import "object/project/user";
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
#Scope
|
||||
-------------------------------------------------------------------------- */
|
||||
/**
|
||||
* ComponentレイヤーやProjectレイヤーのようなコンポーネント単位ではなく、
|
||||
* ページ単位や任意の範囲（スコープ）でのスタイルを定義します。1箇所でしか使わないような特異なスタイルや、
|
||||
* ページ単位でComponentやProjectレイヤーのスタイルを微調整したい場合に使用してもかまいません。
|
||||
* 例えばブログページのスタイルとして_blog.scssを作成します。
|
||||
* このレイヤーでは`.s-blog p`のような要素セレクタとの結合子も使うこともできます。
|
||||
* もし、このレイヤーで同じパターンが3箇所で使われていたら、
|
||||
* ProjectレイヤーやUtilityレイヤーでまとめられないか検討しましょう。
|
||||
* プレフィックス（接頭辞）として`s-`をつけます。
|
||||
*/
|
||||
// @import "object/scope/_blog";
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
#Utility
|
||||
-------------------------------------------------------------------------- */
|
||||
/**
|
||||
* Utilityレイヤーはいわゆる汎用クラスで、ほとんどの場合は単一のスタイルをもっています。
|
||||
* コンポーネント間の間隔を調整したり、BEMのModifierが増えすぎるのを防ぎます。
|
||||
* `.mb10`のような具体的な名前より`.mb-small`のような相対的な名前にしたり、
|
||||
* pxよりもemや%で指定することを推奨します。
|
||||
* 確実にスタイルを適応させるために`!important`を使用します。
|
||||
* プレフィックス（接頭辞）として`u-`をつけます。
|
||||
*/
|
||||
@import "object/utility/align";
|
||||
@import "object/utility/display";
|
||||
@import "object/utility/margin";
|
||||
@import "object/utility/percent";
|
||||
@import "object/utility/sr-only";
|
||||
@import "object/utility/text";
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
.bg-red-4{ background-color: rgba(255, 0, 0, 0.4); }
|
||||
.bg-red-6{ background-color: rgba(255, 0, 0, 0.6); }
|
||||
.bg-black-4{ background-color: rgba(0, 0, 0, 0.4); }
|
||||
.bg-black-6{ background-color: rgba(0, 0, 0, 0.6); }
|
||||
.bg-black{ background-color: black; }
|
||||
.bg-green{ background-color: #093100 }
|
||||
.bg-green-6{ background-color: #093100; opacity: .6;}
|
||||
.bg-none{ background-color: transparent; }
|
||||
.bg-white-2{ background-color: rgb(255,255,255, .2) !important; }
|
||||
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
|
||||
|
||||
.ft-12{ font-size: 12px !important; }
|
||||
.ft-13{ font-size: 13px !important; }
|
||||
.ft-14{ font-size: 14px !important; }
|
||||
.ft-15{ font-size: 15px !important; }
|
||||
.ft-16{ font-size: 16px !important; }
|
||||
.ft-17{ font-size: 17px !important; }
|
||||
.ft-18{ font-size: 18px !important; }
|
||||
.ft-19{ font-size: 19px !important; }
|
||||
.ft-20{ font-size: 20px !important; }
|
||||
|
||||
.ft-30{ font-size: 30px !important; }
|
||||
|
||||
|
||||
.ft-md-15{
|
||||
@include media-breakpoint-down(md){
|
||||
font-size: 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ft-md-20{
|
||||
@include media-breakpoint-down(md){
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-black{ color:black !important;}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
|
||||
|
||||
table, th, td{
|
||||
padding: 5px !important;
|
||||
@include media-breakpoint-down(md){
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.reviewRateStar{
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
content: "\f005";
|
||||
font-size: 1.8vw;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
span.star{
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
margin-top: -1px;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
pre{
|
||||
font-family: inherit;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
height: 100%;
|
||||
overflow-y: visible;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.count{
|
||||
float: right;
|
||||
position: absolute;
|
||||
// display: inline-block;
|
||||
display: none;
|
||||
padding: .2em .3em;
|
||||
margin-top: 20px;
|
||||
margin-right: -10px;
|
||||
margin-left: -10px;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -.05em;
|
||||
white-space: nowrap;
|
||||
text-shadow: -1px -1px 1px rgb(0 0 0 / 15%);
|
||||
background-color: #ff2e13;
|
||||
border-radius: 3px;
|
||||
z-index: 1010;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
max-width: 5.03333em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
/* Chrome, Safari, Edge, Opera */
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #d6dee1;
|
||||
border-radius: 20px;
|
||||
border: 6px solid transparent;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #a8bbbf;
|
||||
}
|
||||
|
||||
|
||||
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{
|
||||
display: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
|
||||
.shadow-lg{ box-shadow: 0 0 8px #000 !important; }
|
||||
|
||||
.w-30{ width: 30% !important; }
|
||||
|
||||
.w-md-25{
|
||||
@include media-breakpoint-down(md){
|
||||
width: 25% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.w-md-50{
|
||||
@include media-breakpoint-down(md){
|
||||
width: 50% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.w-md-75{
|
||||
@include media-breakpoint-down(md){
|
||||
width: 75% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded-right-20{
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
}
|
||||
|
||||
.rounded-top-15{
|
||||
border-top-right-radius: 15px;
|
||||
border-top-left-radius: 15px;
|
||||
}
|
||||
|
||||
.rounded-15{
|
||||
border-radius: 15px !important;
|
||||
}
|
||||
|
||||
.rounded-20{
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
|
||||
.rounded-top-20{
|
||||
border-top-right-radius: 20px;
|
||||
border-top-left-radius: 20px;
|
||||
}
|
||||
|
||||
.mt-80-px{
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
/* #Percent
|
||||
-------------------------------------------------------------------------- */
|
||||
/*doc
|
||||
---
|
||||
title: percent
|
||||
name: percent
|
||||
categories: [utility]
|
||||
---
|
||||
|
||||
`width`プロパティを5%刻みで指定する汎用クラスです。おもに`.c-table--fixed`と一緒に指定します。
|
||||
|
||||
```block
|
||||
<div class="c-wrapper">
|
||||
<table class="c-table c-table--medium c-table--fixed">
|
||||
<tr>
|
||||
<th class="u-percent50">th1</th>
|
||||
<th>th2</th>
|
||||
<th>th3</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>td1</td>
|
||||
<td>td2</td>
|
||||
<td>td3</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
.u-percent5 { width: percentage(5 / 100) !important; }
|
||||
.u-percent10 { width: percentage(10 / 100) !important; }
|
||||
.u-percent15 { width: percentage(15 / 100) !important; }
|
||||
.u-percent20 { width: percentage(20 / 100) !important; }
|
||||
.u-percent25 { width: percentage(25 / 100) !important; }
|
||||
.u-percent30 { width: percentage(30 / 100) !important; }
|
||||
.u-percent35 { width: percentage(35 / 100) !important; }
|
||||
.u-percent40 { width: percentage(40 / 100) !important; }
|
||||
.u-percent45 { width: percentage(45 / 100) !important; }
|
||||
.u-percent50 { width: percentage(50 / 100) !important; }
|
||||
.u-percent55 { width: percentage(55 / 100) !important; }
|
||||
.u-percent60 { width: percentage(60 / 100) !important; }
|
||||
.u-percent65 { width: percentage(65 / 100) !important; }
|
||||
.u-percent70 { width: percentage(70 / 100) !important; }
|
||||
.u-percent75 { width: percentage(75 / 100) !important; }
|
||||
.u-percent80 { width: percentage(80 / 100) !important; }
|
||||
.u-percent85 { width: percentage(85 / 100) !important; }
|
||||
.u-percent90 { width: percentage(90 / 100) !important; }
|
||||
.u-percent95 { width: percentage(95 / 100) !important; }
|
||||
.u-percent100 { width: percentage(100 / 100) !important; }
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
// Fonts
|
||||
@charset "UTF-8";
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito');
|
||||
|
||||
// Variables
|
||||
@import 'variables';
|
||||
|
||||
|
||||
$breakpoint-up: (
|
||||
'pc': 'screen and (min-width: 1068px)',
|
||||
'sp': 'screen and (min-width: 431px)',
|
||||
'sp02': 'screen and (min-width: 375px)',
|
||||
) !default;
|
||||
|
||||
$breakpoint-down: (
|
||||
'sp': 'screen and (max-width: 1067px)',
|
||||
'sp02': 'screen and (max-width: 430px)',
|
||||
'min': 'screen and (max-width: 374px)',
|
||||
) !default;
|
||||
|
||||
@mixin mq_up($breakpoint: md) {
|
||||
@media #{map-get($breakpoint-up, $breakpoint)} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mq_down($breakpoint: md) {
|
||||
@media #{map-get($breakpoint-down, $breakpoint)} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Bootstrap
|
||||
@import '~bootstrap/scss/bootstrap';
|
||||
|
||||
@import './pages/layout';
|
||||
@import './pages/loader';
|
||||
|
||||
@import './layouts/main';
|
||||
|
||||
|
|
@ -1,293 +0,0 @@
|
|||
.bg-red-4{
|
||||
background-color: rgba(255, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.bg-red-6{
|
||||
background-color: rgba(255, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.bg-black-4{
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.bg-black-6{
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.bg-black{
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.bg-green{
|
||||
background-color: #093100
|
||||
}
|
||||
|
||||
.bg-green-6{
|
||||
background-color: #093100;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.bg-none{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bg-white-2{
|
||||
background-color: rgb(255,255,255, .2) !important;
|
||||
}
|
||||
|
||||
.shadow-lg{
|
||||
box-shadow: 0 0 8px #000 !important;
|
||||
}
|
||||
|
||||
.bg-color-1{
|
||||
background-color: $color1;
|
||||
}
|
||||
|
||||
|
||||
.w-30{ width: 30% !important; }
|
||||
|
||||
.w-md-25{
|
||||
@include media-breakpoint-down(md){
|
||||
width: 25% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.w-md-50{
|
||||
@include media-breakpoint-down(md){
|
||||
width: 50% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.w-md-75{
|
||||
@include media-breakpoint-down(md){
|
||||
width: 75% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded-right-20{
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
}
|
||||
|
||||
.rounded-top-15{
|
||||
border-top-right-radius: 15px;
|
||||
border-top-left-radius: 15px;
|
||||
}
|
||||
|
||||
.rounded-15{
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.rounded-top-20{
|
||||
border-top-right-radius: 20px;
|
||||
border-top-left-radius: 20px;
|
||||
}
|
||||
|
||||
|
||||
table, th, td{
|
||||
padding: 5px !important;
|
||||
@include media-breakpoint-down(md){
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.reviewRateStar{
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
content: "\f005";
|
||||
font-size: 1.8vw;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
span.star{
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
margin-top: -1px;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.ft-15{
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
.ft-md-15{
|
||||
@include media-breakpoint-down(md){
|
||||
font-size: 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ft-12{
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.ft-13{
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.ft-30{
|
||||
font-size: 30px !important;
|
||||
}
|
||||
|
||||
.ft-30{
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
.ft-md-20{
|
||||
@include media-breakpoint-down(md){
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar{
|
||||
background-color: #10580c;
|
||||
padding: 0px 20px;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
|
||||
.nav{
|
||||
@include media-breakpoint-down(md){
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link{
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
padding: 10px;
|
||||
&:hover{
|
||||
background-color: #084405;
|
||||
transition: .3s;
|
||||
}
|
||||
&:focus{
|
||||
background-color: #084405;
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
}
|
||||
.navbar-toggler{
|
||||
border: none;
|
||||
.navbar-toggler-icon{
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 255.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
|
||||
}
|
||||
}
|
||||
&.shadow-sm{
|
||||
box-shadow: 0 0.125rem 0.25rem rgb(9 49 0) !important;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
pre{
|
||||
font-family: inherit;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
height: 100%;
|
||||
overflow-y: visible;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.edit{
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
background-color: rgb(0,0,0,.4);
|
||||
padding: 0 10px;
|
||||
&:hover{
|
||||
background-color: rgb(0,0,0,.6);
|
||||
img{
|
||||
transform:scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.count{
|
||||
float: right;
|
||||
position: absolute;
|
||||
// display: inline-block;
|
||||
display: none;
|
||||
padding: .2em .3em;
|
||||
margin-top: 20px;
|
||||
margin-right: -10px;
|
||||
margin-left: -10px;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -.05em;
|
||||
white-space: nowrap;
|
||||
text-shadow: -1px -1px 1px rgb(0 0 0 / 15%);
|
||||
background-color: #ff2e13;
|
||||
border-radius: 3px;
|
||||
z-index: 1010;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
max-width: 5.03333em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
/* Chrome, Safari, Edge, Opera */
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #d6dee1;
|
||||
border-radius: 20px;
|
||||
border: 6px solid transparent;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #a8bbbf;
|
||||
}
|
||||
|
||||
|
||||
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{
|
||||
display: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,228 @@
|
|||
@charset "UTF-8";
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito');
|
||||
|
||||
/**
|
||||
* VARIABLE
|
||||
* global...サイト全体に使用するサイズや数値に関する変数です。
|
||||
* breakpoint...メディアクエリで使用するブレイクポイントです。
|
||||
* font-family...font-family指定をまとめています。
|
||||
* color...グローバルに使用する色指定です。
|
||||
* z-index...z-indexの並び順を管理します。
|
||||
* easing...cubic-bezier関数を使用したタイミング関数を定義しています。
|
||||
*
|
||||
* FUNCTION
|
||||
* strip-unit...pxやremなどの単位を取り除きます。
|
||||
* em...pxをemに変換します。
|
||||
* rem...pxをremに変換します。
|
||||
* tint...白色を加えて明度を明るくします。
|
||||
* shade...黒色を加えて明度を暗くします。
|
||||
* z-index...z-indexの並び順を管理します。
|
||||
* tracking...Photoshopのカーニングをemに変換します。
|
||||
*
|
||||
* MIXIN
|
||||
* mq-up...メディアクエリを`min-width`で挿入します。
|
||||
* mq-down...メディアクエリを`max-width`で挿入します。
|
||||
* responsive...レスポンシブ対応クラスを生成します。
|
||||
* clearfix...floatの解除をします。
|
||||
* on-event...:hover, :active, :focusをまとめて指定します。
|
||||
* sr-only...非表示にしてスクリーンリーダーにだけ読み上げさせます。
|
||||
*
|
||||
* BASE
|
||||
* normalize...Normalize.cssをインポートしています。
|
||||
* base...タイプセレクタと属性セレクタのデフォルトスタイルです。
|
||||
*
|
||||
* LAYOUT
|
||||
* header...ヘッダーエリアのコンテナブロックのスタイルです。
|
||||
* footer...フッターエリアのコンテナブロックのスタイルです。
|
||||
* main...コンテンツエリアのコンテナブロックのスタイルです。
|
||||
* side...サイドバーエリアのコンテナブロックのスタイルです。
|
||||
* section...`<section>`要素を使うようなセクションの余白を管理します。
|
||||
*
|
||||
* COMPONENT
|
||||
* wrapper...最大幅を指定します。
|
||||
* layout...汎用的なレイアウトオブジェクトです。グリッドレイアウトなどに使用できます。
|
||||
* media...画像とテキストが横並びになるオブジェクトです。
|
||||
* list-unstyled...`<ul>`と`<ol>`でデフォルトスタイルをリセットします。
|
||||
* embed...Youtubeなどをアスペクト比を固定してレスポンシブ対応させる場合に使用します。
|
||||
* table...tableのレイアウトアルゴリズムの変更、余白の変更をします。
|
||||
*
|
||||
* PROJECT
|
||||
* icon...アイコンフォントです。テンプレートから自動で生成されます。
|
||||
* icon-extend...アイコンフォントを拡張するModifierです。
|
||||
* button...ボタンコンポーネントです。
|
||||
* breadcrumb...パンくずリストコンポーネントです。
|
||||
* label...インラインのラベルコンポーネントです。
|
||||
* badge...投稿数のような数値を表示するバッジコンポーネントです。
|
||||
* card...カードタイプのコンポーネントです。
|
||||
* split...定義リストをブロックからインラインにするコンポーネントです。
|
||||
* notification...お知らせエリアのコンポーネントです。
|
||||
*
|
||||
* SCOPE
|
||||
* blog...ブログページのスタイルです。
|
||||
*
|
||||
* UTILITY
|
||||
* text...テキストのスタイルに関する汎用クラスです。
|
||||
* image...画像のレイアウトに関する汎用クラスです。
|
||||
* margin...マージンで余白の管理をします。常に下方向にだけ余白をとります。
|
||||
* display...要素の表示や改行をコントロールする場合に使用します。
|
||||
* width...おもにグリッドで使用する`width`を指定する汎用クラスです。
|
||||
* offset...おもにグリッドで使用する`margin-right`を指定する汎用クラスです。
|
||||
* percent...`width`プロパティを5%刻みで指定する汎用クラスです。
|
||||
*/
|
||||
/**
|
||||
* このスタイルシートは[FLOCSS](https://github.com/hiloki/flocss)をベースにしています。
|
||||
* 定義されているレイヤー以外にもThemeやTestなどのレイヤーを追加することもできます。
|
||||
* 詳しくは[CSSコーディングルール](https://github.com/manabuyasuda/styleguide/blob/master/css-coding-rule.md#flocss)を参照してください。
|
||||
*/
|
||||
|
||||
/* =============================================================================
|
||||
#Foundation
|
||||
========================================================================== */
|
||||
//
|
||||
// Sassの変数と関数を定義します。
|
||||
// 変数は用途ごとにモジュール化、関数は機能ごとにモジュール化をします。
|
||||
// プレフィックス（接頭辞）として`_`をつけます。
|
||||
|
||||
@import "./foundation/mixin/box";
|
||||
@import "./foundation/mixin/clearfix";
|
||||
@import "./foundation/mixin/layout";
|
||||
@import "./foundation/mixin/on-event";
|
||||
@import "./foundation/mixin/pc";
|
||||
@import "./foundation/mixin/responsive";
|
||||
@import "./foundation/mixin/sp";
|
||||
@import "./foundation/mixin/sr-only";
|
||||
|
||||
// //
|
||||
// @import "./foundation/variable/animation";
|
||||
@import "./foundation/variable/breakpoint";
|
||||
@import "./foundation/variable/color";
|
||||
@import "./foundation/variable/easing";
|
||||
@import "./foundation/variable/font-family";
|
||||
@import "./foundation/variable/global";
|
||||
@import "./foundation/variable/z-index";
|
||||
|
||||
|
||||
@import "foundation/function/_em";
|
||||
@import "foundation/function/_rem";
|
||||
@import "foundation/function/_tint";
|
||||
@import "foundation/function/_shade";
|
||||
|
||||
|
||||
/**
|
||||
* Foundationレイヤーでは`html`や`body`のような広範囲にわたるベーススタイル、
|
||||
* `h2`や`ul`のような基本的なタイプセレクタのデフォルトスタイルを定義します。
|
||||
* 装飾的なスタイルは避けて、できる限り低詳細度に保ちます。idセレクタやclassセレクタは使用しません。
|
||||
*/
|
||||
@import "foundation/base/normalize";
|
||||
@import "foundation/base/base";
|
||||
@import "foundation/base/reset";
|
||||
|
||||
/* =============================================================================
|
||||
#Layout
|
||||
========================================================================== */
|
||||
/**
|
||||
* Layoutレイヤーはヘッダーやフッターのような、ページを構成するコンテナブロックのスタイルを定義します。
|
||||
* 目安としてはワイヤーフレームに書かれるような大きな単位のブロックです。
|
||||
* 汎用性のあるグリッドシステムは次のObject/Componentレイヤーで定義します。
|
||||
* グローバルナビゲーションやコピーライトのようなコンポーネントは、Object/Projectレイヤーで定義します。
|
||||
* 基本的にはclass属性を使用しますが、id属性を使用することもできます。
|
||||
* プレフィックス（接頭辞）として`l-`をつけます。
|
||||
*/
|
||||
@import "./layout/content";
|
||||
@import "./layout/footer";
|
||||
@import "./layout/header";
|
||||
@import "./layout/main";
|
||||
@import "./layout/section";
|
||||
@import "./layout/side";
|
||||
|
||||
/* =============================================================================
|
||||
#Object
|
||||
========================================================================== */
|
||||
/**
|
||||
* Objectレイヤーはプロジェクトにおけるビジュアルパターンです。抽象度や詳細度、
|
||||
* 拡張性などによって、4つのレイヤーにわけられます。
|
||||
* それぞれのレイヤーにはプレフィックス（接頭辞）をつけます。
|
||||
* 1. Component（`c-`）
|
||||
* 2. Project（`p-`）
|
||||
* 3. Scope(`s-`)
|
||||
* 4. Utility（`u-`）
|
||||
*
|
||||
* ランディングページのようにページ特有のスタイルを多く含む場合は、
|
||||
* ページ専用のCSSファイルを作成することもできます。
|
||||
* ページ専用のスタイルは、そのページにだけ読み込ませることでスコープをつくり、
|
||||
* プレフィックス（接頭辞）をつけないことで名前の重複を防ぎます。
|
||||
*/
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
#Component
|
||||
-------------------------------------------------------------------------- */
|
||||
/**
|
||||
* Componentレイヤーは多くのプロジェクトで横断的に再利用のできるような、小さな単位のモジュール（機能）です。
|
||||
* OOCSSの構造（structure）の機能を担うため、装飾的なスタイルをできるだけ含めないようにします。
|
||||
* また、`width`や`margin`といったレイアウトに影響を与えるプロパティもできるだけ含めないようにします。
|
||||
* 例えばgridやmediaといったレイアウトパターンが該当します。
|
||||
* プレフィックス（接頭辞）として`c-`をつけます。
|
||||
*/
|
||||
@import "object/component/_wrapper";
|
||||
@import "object/component/_layout";
|
||||
@import "object/component/_table";
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
#Project
|
||||
-------------------------------------------------------------------------- */
|
||||
/**
|
||||
* Projectレイヤーはプロジェクト固有のパターンで、複数のページで使い回せるようなコンポーネントです。
|
||||
* 具体的なスタイルを持つUI（ユーザーフェイス）で、追加されるコンポーネントのほとんどはこのレイヤーに置かれます。
|
||||
* もし、このレイヤーで同じパターンが3箇所で使われていたら、別のコンポーネントとしてまとめられないか検討しましょう。
|
||||
* プレフィックス（接頭辞）として`p-`をつけます。
|
||||
*/
|
||||
@import "object/project/article";
|
||||
@import "object/project/box";
|
||||
@import "object/project/breadcrumb";
|
||||
@import "object/project/button";
|
||||
@import "object/project/card";
|
||||
@import "object/project/edit";
|
||||
@import "object/project/form";
|
||||
@import "object/project/icon-extend";
|
||||
@import "object/project/icon";
|
||||
@import "object/project/label";
|
||||
@import "object/project/login";
|
||||
@import "object/project/meeting";
|
||||
@import "object/project/modal";
|
||||
@import "object/project/notification";
|
||||
@import "object/project/profile";
|
||||
@import "object/project/search";
|
||||
@import "object/project/user";
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
#Scope
|
||||
-------------------------------------------------------------------------- */
|
||||
/**
|
||||
* ComponentレイヤーやProjectレイヤーのようなコンポーネント単位ではなく、
|
||||
* ページ単位や任意の範囲（スコープ）でのスタイルを定義します。1箇所でしか使わないような特異なスタイルや、
|
||||
* ページ単位でComponentやProjectレイヤーのスタイルを微調整したい場合に使用してもかまいません。
|
||||
* 例えばブログページのスタイルとして_blog.scssを作成します。
|
||||
* このレイヤーでは`.s-blog p`のような要素セレクタとの結合子も使うこともできます。
|
||||
* もし、このレイヤーで同じパターンが3箇所で使われていたら、
|
||||
* ProjectレイヤーやUtilityレイヤーでまとめられないか検討しましょう。
|
||||
* プレフィックス（接頭辞）として`s-`をつけます。
|
||||
*/
|
||||
// @import "object/scope/_blog";
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
#Utility
|
||||
-------------------------------------------------------------------------- */
|
||||
/**
|
||||
* Utilityレイヤーはいわゆる汎用クラスで、ほとんどの場合は単一のスタイルをもっています。
|
||||
* コンポーネント間の間隔を調整したり、BEMのModifierが増えすぎるのを防ぎます。
|
||||
* `.mb10`のような具体的な名前より`.mb-small`のような相対的な名前にしたり、
|
||||
* pxよりもemや%で指定することを推奨します。
|
||||
* 確実にスタイルを適応させるために`!important`を使用します。
|
||||
* プレフィックス（接頭辞）として`u-`をつけます。
|
||||
*/
|
||||
@import "object/utility/align";
|
||||
@import "object/utility/display";
|
||||
@import "object/utility/margin";
|
||||
@import "object/utility/percent";
|
||||
@import "object/utility/sr-only";
|
||||
@import "object/utility/text";
|
||||
|
|
@ -2,6 +2,8 @@
|
|||
// @param {Number} $self - 指定したいpx。
|
||||
// @param {Number} $parent - 基準となるpx。
|
||||
// @example - _em(15px, 30px) => 0.5em
|
||||
@use "sass:math";
|
||||
|
||||
@function _em($self, $parent) {
|
||||
@return ($self / $parent) * 1em;
|
||||
@return math.div($self, $parent) * 1em;
|
||||
}
|
||||
|
|
@ -2,7 +2,9 @@
|
|||
// @param {Number} - 指定したいピクセル値。
|
||||
// @param {String} $key [sm] - 指定するブレイクポイントを`$_font-size`のキーで指定。
|
||||
// @example - _rem(15px) => 1rem
|
||||
@use "sass:math";
|
||||
|
||||
@function _rem($px, $key: 'sm') {
|
||||
$value: map-get($_font-size, $key);
|
||||
@return ($px / $value) * 1rem;
|
||||
@return math.div($px, $value) * 1rem;
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
@use "sass:math";
|
||||
/* #Layout
|
||||
-------------------------------------------------------------------------- */
|
||||
/*doc
|
||||
|
|
@ -45,8 +46,10 @@ Modifierは以下のとおりです。
|
|||
</div>
|
||||
```
|
||||
*/
|
||||
@use "sass:math";
|
||||
|
||||
$_layout-gutter: $_white-space !default;
|
||||
$_layout-gutter-small: ($_layout-gutter / 2) !default;
|
||||
$_layout-gutter-small: ($_layout-gutter * 0.5) !default;
|
||||
$_layout-gutter-large: ($_layout-gutter * 2) !default;
|
||||
|
||||
.c-layout {
|
||||
|
|
@ -121,55 +124,55 @@ $_layout-gutter-large: ($_layout-gutter * 2) !default;
|
|||
*/
|
||||
@include _responsive('.c-layout--col2') {
|
||||
> .c-layout__item {
|
||||
width: percentage(1 / 2);
|
||||
width: percentage(1 * 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@include _responsive('.c-layout--col3') {
|
||||
> .c-layout__item {
|
||||
width: percentage(1 / 3);
|
||||
width: percentage(math.div(1, 3));
|
||||
}
|
||||
}
|
||||
|
||||
@include _responsive('.c-layout--col4') {
|
||||
> .c-layout__item {
|
||||
width: percentage(1 / 4);
|
||||
width: percentage(1 * 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
@include _responsive('.c-layout--col2and10') {
|
||||
> .c-layout__item:nth-child(odd) {
|
||||
width: percentage(2 / 12);
|
||||
width: percentage(math.div(2, 12));
|
||||
}
|
||||
> .c-layout__item:nth-child(even) {
|
||||
width: percentage(10 / 12);
|
||||
width: percentage(math.div(10, 12));
|
||||
}
|
||||
}
|
||||
|
||||
@include _responsive('.c-layout--col3and9') {
|
||||
> .c-layout__item:nth-child(odd) {
|
||||
width: percentage(3 / 12);
|
||||
width: percentage(math.div(3, 12));
|
||||
}
|
||||
> .c-layout__item:nth-child(even) {
|
||||
width: percentage(9 / 12);
|
||||
width: percentage(math.div(9, 12));
|
||||
}
|
||||
}
|
||||
|
||||
@include _responsive('.c-layout--col4and8') {
|
||||
> .c-layout__item:nth-child(odd) {
|
||||
width: percentage(4 / 12);
|
||||
width: percentage(math.div(4, 12));
|
||||
}
|
||||
> .c-layout__item:nth-child(even) {
|
||||
width: percentage(8 / 12);
|
||||
width: percentage(math.div(8, 12));
|
||||
}
|
||||
}
|
||||
|
||||
@include _responsive('.c-layout--col5and7') {
|
||||
> .c-layout__item:nth-child(odd) {
|
||||
width: percentage(5 / 12);
|
||||
width: percentage(math.div(5, 12));
|
||||
}
|
||||
> .c-layout__item:nth-child(even) {
|
||||
width: percentage(7 / 12);
|
||||
width: percentage(math.div(7, 12));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
/* #Percent
|
||||
-------------------------------------------------------------------------- */
|
||||
/*doc
|
||||
---
|
||||
title: percent
|
||||
name: percent
|
||||
categories: [utility]
|
||||
---
|
||||
|
||||
`width`プロパティを5%刻みで指定する汎用クラスです。おもに`.c-table--fixed`と一緒に指定します。
|
||||
|
||||
```block
|
||||
<div class="c-wrapper">
|
||||
<table class="c-table c-table--medium c-table--fixed">
|
||||
<tr>
|
||||
<th class="u-percent50">th1</th>
|
||||
<th>th2</th>
|
||||
<th>th3</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>td1</td>
|
||||
<td>td2</td>
|
||||
<td>td3</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
```
|
||||
*/
|
||||
.u-percent5 { width: percentage(5 * 0.01) !important; }
|
||||
.u-percent10 { width: percentage(10 * 0.01) !important; }
|
||||
.u-percent15 { width: percentage(15 * 0.01) !important; }
|
||||
.u-percent20 { width: percentage(20 * 0.01) !important; }
|
||||
.u-percent25 { width: percentage(25 * 0.01) !important; }
|
||||
.u-percent30 { width: percentage(30 * 0.01) !important; }
|
||||
.u-percent35 { width: percentage(35 * 0.01) !important; }
|
||||
.u-percent40 { width: percentage(40 * 0.01) !important; }
|
||||
.u-percent45 { width: percentage(45 * 0.01) !important; }
|
||||
.u-percent50 { width: percentage(50 * 0.01) !important; }
|
||||
.u-percent55 { width: percentage(55 * 0.01) !important; }
|
||||
.u-percent60 { width: percentage(60 * 0.01) !important; }
|
||||
.u-percent65 { width: percentage(65 * 0.01) !important; }
|
||||
.u-percent70 { width: percentage(70 * 0.01) !important; }
|
||||
.u-percent75 { width: percentage(75 * 0.01) !important; }
|
||||
.u-percent80 { width: percentage(80 * 0.01) !important; }
|
||||
.u-percent85 { width: percentage(85 * 0.01) !important; }
|
||||
.u-percent90 { width: percentage(90 * 0.01) !important; }
|
||||
.u-percent95 { width: percentage(95 * 0.01) !important; }
|
||||
.u-percent100 { width: percentage(100 * 0.01) !important; }
|
||||
新しいイシューから参照