add scss
このコミットが含まれているのは:
dragon1211
コミット
789e89ed2e
ファイル差分が大きすぎるため省略します
差分を読み込み
|
|
@ -9837,7 +9837,7 @@ module.exports = {
|
|||
|
||||
__webpack_require__(/*! ./bootstrap */ "./resources/js/bootstrap.js");
|
||||
|
||||
__webpack_require__(/*! ./pages/contacts/complete */ "./resources/js/pages/contacts/complete.js");
|
||||
__webpack_require__(/*! ./pages/contact/complete */ "./resources/js/pages/contact/complete.jsx");
|
||||
|
||||
/***/ }),
|
||||
|
||||
|
|
@ -9872,9 +9872,9 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
|
|||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./resources/js/pages/contacts/complete.js":
|
||||
/***/ "./resources/js/pages/contact/complete.jsx":
|
||||
/*!*************************************************!*\
|
||||
!*** ./resources/js/pages/contacts/complete.js ***!
|
||||
!*** ./resources/js/pages/contact/complete.jsx ***!
|
||||
\*************************************************/
|
||||
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||
|
||||
|
|
@ -9892,10 +9892,12 @@ __webpack_require__.r(__webpack_exports__);
|
|||
|
||||
var Contact_Complete = function Contact_Complete() {
|
||||
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div", {
|
||||
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("h4", {
|
||||
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\u5B8C\u4E86"
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("p", {
|
||||
children: ["\u304A\u554F\u3044\u5408\u308F\u305B\u304C\u5B8C\u4E86\u3057\u307E\u3057\u305F\u3002 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", {}), "\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"]
|
||||
className: "ft-13 p-2 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", {
|
||||
children: "sample@gmail.com"
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div", {
|
||||
|
|
@ -9904,12 +9906,14 @@ var Contact_Complete = function Contact_Complete() {
|
|||
"class": "col-6",
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_material_ui_core__WEBPACK_IMPORTED_MODULE_3__.default, {
|
||||
fullWidth: true,
|
||||
className: "ft-15",
|
||||
children: "\u89AA\u30ED\u30B0\u30A4\u30F3\u753B\u9762\u3078"
|
||||
})
|
||||
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
|
||||
className: "col-6",
|
||||
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_material_ui_core__WEBPACK_IMPORTED_MODULE_3__.default, {
|
||||
fullWidth: true,
|
||||
className: "ft-15",
|
||||
children: "\u5B50\u30ED\u30B0\u30A4\u30F3\u753B\u9762\u3078"
|
||||
})
|
||||
})]
|
||||
|
|
@ -27308,12 +27312,9 @@ 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)");
|
||||
|
||||
/***/ }),
|
||||
|
||||
|
|
@ -61085,42 +61086,7 @@ 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
|
||||
|
|
@ -61182,66 +61148,13 @@ 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
|
||||
/******/ // 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__);
|
||||
/******/ __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");
|
||||
/******/
|
||||
/******/ })()
|
||||
;
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
{
|
||||
"/js/app.js": "/js/app.js",
|
||||
"/css/app.css": "/css/app.css"
|
||||
"/js/app.js": "/js/app.js"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
require('./bootstrap');
|
||||
require('./pages/contacts/complete');
|
||||
require('./pages/contact/complete');
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ import { Button } from '@material-ui/core';
|
|||
const Contact_Complete = () => {
|
||||
return (
|
||||
<div>
|
||||
<h4>お問い合わせ完了</h4>
|
||||
<p>
|
||||
お問い合わせが完了しました。
|
||||
3営業日以内にお返事させていただきます。<br/>
|
||||
<p className="text-center font-weight-bold ft-20">お問い合わせ完了</p>
|
||||
<p className="ft-13 p-2 bg-color-1">
|
||||
お問い合わせが完了しました。<br/>
|
||||
3営業日以内にお返事させていただきます。<br/><br/>
|
||||
万が一届かない場合は、以下のメールアドレスに 直接ご連絡くださいませ。
|
||||
</p>
|
||||
<div>
|
||||
|
|
@ -17,10 +17,10 @@ const Contact_Complete = () => {
|
|||
</div>
|
||||
<div className="row">
|
||||
<div class="col-6">
|
||||
<Button fullWidth>親ログイン画面へ</Button>
|
||||
<Button fullWidth className="ft-15">親ログイン画面へ</Button>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<Button fullWidth>子ログイン画面へ</Button>
|
||||
<Button fullWidth className="ft-15">子ログイン画面へ</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,85 +1,228 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@mixin pc($breakpoint: $_default-breakpoint) {
|
||||
@if map-has-key($_breakpoint-up, $breakpoint) {
|
||||
@media screen and (min-width: 1068px) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
|
||||
+ "Please make sure it is defined in `$_breakpoint-up` map.";
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sp($breakpoint: $_default-breakpoint) {
|
||||
@if map-has-key($_breakpoint-down, $breakpoint) {
|
||||
@media screen and (max-width: 1067px) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
|
||||
+ "Please make sure it is defined in `$_breakpoint-down` map.";
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sp02($breakpoint: $_default-breakpoint) {
|
||||
@if map-has-key($_breakpoint-down, $breakpoint) {
|
||||
@media screen and (max-width: 430px) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
|
||||
+ "Please make sure it is defined in `$_breakpoint-down` map.";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin min($breakpoint: $_default-breakpoint) {
|
||||
@if map-has-key($_breakpoint-down, $breakpoint) {
|
||||
@media screen and (max-width: 374px) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
|
||||
+ "Please make sure it is defined in `$_breakpoint-down` map.";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Fonts */
|
||||
@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)を参照してください。
|
||||
*/
|
||||
|
||||
// Bootstrap
|
||||
@import '~bootstrap/scss/bootstrap';
|
||||
/* =============================================================================
|
||||
#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";
|
||||
|
||||
|
||||
/* ---------------------------------------------------------------------------------
|
||||
color
|
||||
--------------------------------------------------------------------------------- */
|
||||
/* color */
|
||||
$colorRed: #af0606;
|
||||
$colorBlue: #004DC7;
|
||||
$colorBlack: #000000;
|
||||
$colorGray: #B2B2B2;
|
||||
/* border color */
|
||||
$borderColorGray: #eeeeee;
|
||||
/* input color */
|
||||
$inputBorderGray: #D8D8D8;
|
||||
@import "foundation/function/_em";
|
||||
@import "foundation/function/_rem";
|
||||
@import "foundation/function/_tint";
|
||||
@import "foundation/function/_shade";
|
||||
|
||||
|
||||
/* ---------------------------------------------------------------------------------
|
||||
foundation
|
||||
--------------------------------------------------------------------------------- */
|
||||
/* base */
|
||||
/**
|
||||
* 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ファイルを作成することもできます。
|
||||
* ページ専用のスタイルは、そのページにだけ読み込ませることでスコープをつくり、
|
||||
* プレフィックス（接頭辞）をつけないことで名前の重複を防ぎます。
|
||||
*/
|
||||
|
||||
/* ---------------------------------------------------------------------------------
|
||||
layout
|
||||
--------------------------------------------------------------------------------- */
|
||||
// @import "./variables";
|
||||
/* -----------------------------------------------------------------------------
|
||||
#Component
|
||||
-------------------------------------------------------------------------- */
|
||||
/**
|
||||
* Componentレイヤーは多くのプロジェクトで横断的に再利用のできるような、小さな単位のモジュール（機能）です。
|
||||
* OOCSSの構造（structure）の機能を担うため、装飾的なスタイルをできるだけ含めないようにします。
|
||||
* また、`width`や`margin`といったレイアウトに影響を与えるプロパティもできるだけ含めないようにします。
|
||||
* 例えばgridやmediaといったレイアウトパターンが該当します。
|
||||
* プレフィックス（接頭辞）として`c-`をつけます。
|
||||
*/
|
||||
@import "object/component/_wrapper";
|
||||
@import "object/component/_layout";
|
||||
@import "object/component/_table";
|
||||
|
||||
// @import "./layout/_main";
|
||||
/* -----------------------------------------------------------------------------
|
||||
#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,8 +2,6 @@
|
|||
// @param {Number} $self - 指定したいpx。
|
||||
// @param {Number} $parent - 基準となるpx。
|
||||
// @example - _em(15px, 30px) => 0.5em
|
||||
@use "sass:math";
|
||||
|
||||
@function _em($self, $parent) {
|
||||
@return math.div($self, $parent) * 1em;
|
||||
@return ($self / $parent) * 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,7 @@
|
|||
// @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 math.div($px, $value) * 1rem;
|
||||
@return ($px / $value) * 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
// // アニメーションの管理
|
||||
// アニメーションの管理
|
||||
|
||||
// @include mixin.pc{
|
||||
// .fade {
|
||||
// transition: opacity 0.3s ease;
|
||||
// -webkit-backface-visibility: hidden;
|
||||
// backface-visibility: hidden;
|
||||
// &:hover{
|
||||
// opacity: 0.7;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// }
|
||||
// .fade02 {
|
||||
// transition: opacity 0.3s ease;
|
||||
// -webkit-backface-visibility: hidden;
|
||||
// backface-visibility: hidden;
|
||||
// &:hover{
|
||||
// opacity: 0.5;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@include mixin.pc{
|
||||
.fade {
|
||||
transition: opacity 0.3s ease;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
&:hover{
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.fade02 {
|
||||
transition: opacity 0.3s ease;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
&:hover{
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@import url(https://fonts.googleapis.com/css?family=Nunito);
|
||||
@charset "UTF-8";
|
||||
## TOC（目次）
|
||||
|
||||
```scss
|
||||
/**
|
||||
* VARIABLE
|
||||
* global...サイト全体に使用するサイズや数値に関する変数です。
|
||||
|
|
@ -68,19 +69,55 @@
|
|||
* offset...おもにグリッドで使用する`margin-right`を指定する汎用クラスです。
|
||||
* percent...`width`プロパティを5%刻みで指定する汎用クラスです。
|
||||
*/
|
||||
```
|
||||
|
||||
## CSS構成
|
||||
|
||||
```scss
|
||||
/**
|
||||
* このスタイルシートは[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/variable/_global";
|
||||
@import "foundation/variable/_breakpoint";
|
||||
@import "foundation/variable/_font-family";
|
||||
@import "foundation/variable/_color";
|
||||
@import "foundation/variable/_z-index";
|
||||
@import "foundation/variable/_easing";
|
||||
|
||||
@import "foundation/function/_strip-unit";
|
||||
@import "foundation/function/_em";
|
||||
@import "foundation/function/_rem";
|
||||
@import "foundation/function/_tint";
|
||||
@import "foundation/function/_shade";
|
||||
@import "foundation/function/_z-index";
|
||||
@import "foundation/function/_tracking";
|
||||
|
||||
@import "foundation/mixin/_mq-up";
|
||||
@import "foundation/mixin/_mq-down";
|
||||
@import "foundation/mixin/_responsive";
|
||||
@import "foundation/mixin/_clearfix";
|
||||
@import "foundation/mixin/_on-event";
|
||||
@import "foundation/mixin/_sr-only";
|
||||
|
||||
/**
|
||||
* Foundationレイヤーでは`html`や`body`のような広範囲にわたるベーススタイル、
|
||||
* `h2`や`ul`のような基本的なタイプセレクタのデフォルトスタイルを定義します。
|
||||
* 装飾的なスタイルは避けて、できる限り低詳細度に保ちます。idセレクタやclassセレクタは使用しません。
|
||||
*/
|
||||
@import "foundation/base/_normalize";
|
||||
@import "foundation/base/_base";
|
||||
|
||||
/* =============================================================================
|
||||
#Layout
|
||||
========================================================================== */
|
||||
|
|
@ -92,6 +129,12 @@
|
|||
* 基本的にはclass属性を使用しますが、id属性を使用することもできます。
|
||||
* プレフィックス（接頭辞）として`l-`をつけます。
|
||||
*/
|
||||
@import "layout/_header";
|
||||
@import "layout/_footer";
|
||||
@import "layout/_main";
|
||||
@import "layout/_sidebar";
|
||||
@import "layout/_section";
|
||||
|
||||
/* =============================================================================
|
||||
#Object
|
||||
========================================================================== */
|
||||
|
|
@ -109,6 +152,7 @@
|
|||
* ページ専用のスタイルは、そのページにだけ読み込ませることでスコープをつくり、
|
||||
* プレフィックス（接頭辞）をつけないことで名前の重複を防ぎます。
|
||||
*/
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
#Component
|
||||
-------------------------------------------------------------------------- */
|
||||
|
|
@ -119,6 +163,13 @@
|
|||
* 例えばgridやmediaといったレイアウトパターンが該当します。
|
||||
* プレフィックス（接頭辞）として`c-`をつけます。
|
||||
*/
|
||||
@import "object/component/_wrapper";
|
||||
@import "object/component/_layout";
|
||||
@import "object/component/_media";
|
||||
@import "object/component/_list-unstyled";
|
||||
@import "object/component/_embed";
|
||||
@import "object/component/_table";
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
#Project
|
||||
-------------------------------------------------------------------------- */
|
||||
|
|
@ -128,6 +179,15 @@
|
|||
* もし、このレイヤーで同じパターンが3箇所で使われていたら、別のコンポーネントとしてまとめられないか検討しましょう。
|
||||
* プレフィックス（接頭辞）として`p-`をつけます。
|
||||
*/
|
||||
@import "object/project/_icon";
|
||||
@import "object/project/_icon-extend";
|
||||
@import "object/project/_button";
|
||||
@import "object/project/_breadcrumb";
|
||||
@import "object/project/_label";
|
||||
@import "object/project/_badge";
|
||||
@import "object/project/_card";
|
||||
@import "object/project/_split";
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
#Scope
|
||||
-------------------------------------------------------------------------- */
|
||||
|
|
@ -141,6 +201,8 @@
|
|||
* ProjectレイヤーやUtilityレイヤーでまとめられないか検討しましょう。
|
||||
* プレフィックス（接頭辞）として`s-`をつけます。
|
||||
*/
|
||||
@import "object/scope/_blog";
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
#Utility
|
||||
-------------------------------------------------------------------------- */
|
||||
|
|
@ -152,3 +214,11 @@
|
|||
* 確実にスタイルを適応させるために`!important`を使用します。
|
||||
* プレフィックス（接頭辞）として`u-`をつけます。
|
||||
*/
|
||||
@import "object/utility/_text";
|
||||
@import "object/utility/_image";
|
||||
@import "object/utility/_margin";
|
||||
@import "object/utility/_display";
|
||||
@import "object/utility/_width";
|
||||
@import "object/utility/_offset";
|
||||
@import "object/utility/_percent";
|
||||
```
|
||||
|
|
@ -1,228 +0,0 @@
|
|||
@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";
|
||||
|
|
@ -27,6 +27,6 @@ categories: [layout]
|
|||
</body>
|
||||
```
|
||||
*/
|
||||
// .l-footer {
|
||||
.l-footer {
|
||||
|
||||
// }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,6 +27,6 @@ categories: [layout]
|
|||
</body>
|
||||
```
|
||||
*/
|
||||
// .l-header {
|
||||
.l-header {
|
||||
|
||||
// }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,6 +34,6 @@ Modifierなしをmedium、変更する場合にはModifierを指定します。
|
|||
</div>
|
||||
```
|
||||
*/
|
||||
// .l-section {
|
||||
.l-section {
|
||||
|
||||
// }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,10 +45,8 @@ Modifierは以下のとおりです。
|
|||
</div>
|
||||
```
|
||||
*/
|
||||
@use "sass:math";
|
||||
|
||||
$_layout-gutter: $_white-space !default;
|
||||
$_layout-gutter-small: ($_layout-gutter * 0.5) !default;
|
||||
$_layout-gutter-small: ($_layout-gutter / 2) !default;
|
||||
$_layout-gutter-large: ($_layout-gutter * 2) !default;
|
||||
|
||||
.c-layout {
|
||||
|
|
@ -123,55 +121,55 @@ $_layout-gutter-large: ($_layout-gutter * 2) !default;
|
|||
*/
|
||||
@include _responsive('.c-layout--col2') {
|
||||
> .c-layout__item {
|
||||
width: percentage(1 * 0.5);
|
||||
width: percentage(1 / 2);
|
||||
}
|
||||
}
|
||||
|
||||
@include _responsive('.c-layout--col3') {
|
||||
> .c-layout__item {
|
||||
width: percentage(math.div(1, 3));
|
||||
width: percentage(1 / 3);
|
||||
}
|
||||
}
|
||||
|
||||
@include _responsive('.c-layout--col4') {
|
||||
> .c-layout__item {
|
||||
width: percentage(math.div(1,4));
|
||||
width: percentage(1 / 4);
|
||||
}
|
||||
}
|
||||
|
||||
@include _responsive('.c-layout--col2and10') {
|
||||
> .c-layout__item:nth-child(odd) {
|
||||
width: percentage(math.div(2, 12));
|
||||
width: percentage(2 / 12);
|
||||
}
|
||||
> .c-layout__item:nth-child(even) {
|
||||
width: percentage(math.div(10, 12));
|
||||
width: percentage(10 / 12);
|
||||
}
|
||||
}
|
||||
|
||||
@include _responsive('.c-layout--col3and9') {
|
||||
> .c-layout__item:nth-child(odd) {
|
||||
width: percentage(math.div(3, 12));
|
||||
width: percentage(3 / 12);
|
||||
}
|
||||
> .c-layout__item:nth-child(even) {
|
||||
width: percentage(math.div(9, 12));
|
||||
width: percentage(9 / 12);
|
||||
}
|
||||
}
|
||||
|
||||
@include _responsive('.c-layout--col4and8') {
|
||||
> .c-layout__item:nth-child(odd) {
|
||||
width: percentage(math.div(4, 12));
|
||||
width: percentage(4 / 12);
|
||||
}
|
||||
> .c-layout__item:nth-child(even) {
|
||||
width: percentage(math.div(8, 12));
|
||||
width: percentage(8 / 12);
|
||||
}
|
||||
}
|
||||
|
||||
@include _responsive('.c-layout--col5and7') {
|
||||
> .c-layout__item:nth-child(odd) {
|
||||
width: percentage(math.div(5, 12));
|
||||
width: percentage(5 / 12);
|
||||
}
|
||||
> .c-layout__item:nth-child(even) {
|
||||
width: percentage(math.div(7, 12));
|
||||
width: percentage(7 / 12);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,23 +26,23 @@ categories: [utility]
|
|||
</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; }
|
||||
.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; }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
// Body
|
||||
$body-bg: #f8fafc;
|
||||
|
||||
// Typography
|
||||
$font-family-sans-serif: 'Nunito', sans-serif;
|
||||
$font-size-base: 0.9rem;
|
||||
$line-height-base: 1.6;
|
||||
|
||||
// Colors
|
||||
$blue: #3490dc;
|
||||
$indigo: #6574cd;
|
||||
$purple: #9561e2;
|
||||
$pink: #f66d9b;
|
||||
$red: #e3342f;
|
||||
$orange: #f6993f;
|
||||
$yellow: #ffed4a;
|
||||
$green: #38c172;
|
||||
$teal: #4dc0b5;
|
||||
$cyan: #6cb2eb;
|
||||
|
||||
$color1: #F5F7F8;
|
||||
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
// 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';
|
||||
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
|
||||
|
||||
.l-centeringbox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&-wrap{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%,0);
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding: 192px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-single {
|
||||
&-main{
|
||||
min-height: 100vh; /* Fallback */
|
||||
min-height: calc(var(--vh, 1vh) * 100);
|
||||
}
|
||||
&-container{
|
||||
max-width: 540px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
border-radius: 8px;
|
||||
padding: 50px 24px 70px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: 540px;
|
||||
max-width: none;
|
||||
box-shadow: 0 1px 4px #9b8989;
|
||||
padding: 60px 60px 60px;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
margin-bottom: 35px;
|
||||
line-height: 1;
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin-bottom: 35px;
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-inner{
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
width: 410px;
|
||||
@include media-breakpoint-down(md) {
|
||||
width: 100%;
|
||||
}
|
||||
.form-group{
|
||||
margin: 0 0 17px;
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.l-registration{
|
||||
.l-single-container h1{
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.l-container{
|
||||
display: flex;
|
||||
flex-flow: row-reverse;
|
||||
background: #fff;
|
||||
justify-content: flex-end;
|
||||
@include media-breakpoint-up(lg) {
|
||||
// background: $_color-bg02;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.l-content{
|
||||
max-width: 540px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
border-radius: 8px;
|
||||
padding: 50px 20px 70px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: 540px;
|
||||
max-width: none;
|
||||
padding: 60px 60px 60px;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
margin-bottom: 35px;
|
||||
line-height: 1;
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin-bottom: 35px;
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,293 @@
|
|||
.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,169 @@
|
|||
@use "sass:math";
|
||||
|
||||
.loader2-wrap{
|
||||
display: none;
|
||||
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgb(0,0,0,0.6);
|
||||
top: 0px;
|
||||
position: fixed;
|
||||
|
||||
.loading {
|
||||
position: fixed;
|
||||
|
||||
margin: auto;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
transform-style: preserve-3d;
|
||||
perspective: 800px;
|
||||
|
||||
top: calc(50vh - 2rem);
|
||||
left: calc(50vw - 2rem);
|
||||
|
||||
.arc {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border-bottom: 5px solid white;
|
||||
|
||||
@for $i from 1 through 3 {
|
||||
&:nth-child(#{$i}) {
|
||||
animation: rotate#{$i} 1.15s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: -0.4s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate1 {
|
||||
from {
|
||||
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotateX(35deg) rotateY(-45deg) rotateZ(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate2 {
|
||||
from {
|
||||
transform: rotateX(50deg) rotateY(10deg) rotateZ(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotateX(50deg) rotateY(10deg) rotateZ(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate3 {
|
||||
from {
|
||||
transform: rotateX(35deg) rotateY(55deg) rotateZ(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotateX(35deg) rotateY(55deg) rotateZ(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.loader1-wrap {
|
||||
display: none;
|
||||
background-color: rgb(0,0,0,0.4);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
.ring {
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform:translate(-50%,-50%);
|
||||
width:150px;
|
||||
height:150px;
|
||||
background:#262626;
|
||||
border:3px solid #3c3c3c;
|
||||
border-radius:50%;
|
||||
text-align:center;
|
||||
line-height:150px;
|
||||
font-family:sans-serif;
|
||||
font-size:20px;
|
||||
color:#fff000;
|
||||
letter-spacing:4px;
|
||||
text-transform:uppercase;
|
||||
text-shadow:0 0 10px #fff000;
|
||||
box-shadow:0 0 20px rgba(0,0,0,.5);
|
||||
}
|
||||
.ring:before {
|
||||
content:'';
|
||||
position:absolute;
|
||||
top:-3px;
|
||||
left:-3px;
|
||||
width:150px;
|
||||
height:150px;
|
||||
border:3px solid transparent;
|
||||
border-top:3px solid #fff000;
|
||||
border-right:3px solid #fff000;
|
||||
border-radius:50%;
|
||||
animation:animateC 2s linear infinite;
|
||||
}
|
||||
#loading {
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:calc(50% - 2px);
|
||||
left:50%;
|
||||
width:50%;
|
||||
height:4px;
|
||||
background:transparent;
|
||||
transform-origin:left;
|
||||
animation:animate 2s linear infinite;
|
||||
}
|
||||
#loading:before {
|
||||
content:'';
|
||||
position:absolute;
|
||||
width:16px;
|
||||
height:16px;
|
||||
border-radius:50%;
|
||||
background:#fff000;
|
||||
top:-6px;
|
||||
right:-8px;
|
||||
box-shadow:0 0 20px #fff000;
|
||||
}
|
||||
|
||||
@keyframes animateC
|
||||
{
|
||||
0% {
|
||||
transform:rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform:rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes animate
|
||||
{
|
||||
0% {
|
||||
transform:rotate(45deg);
|
||||
}
|
||||
100% {
|
||||
transform:rotate(405deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -20,17 +20,10 @@
|
|||
|
||||
</head>
|
||||
<body class="">
|
||||
<main class="l-single-main l-registration">
|
||||
<div class="l-centeringbox">
|
||||
<div class="l-centeringbox-wrap">
|
||||
<div class="l-single-container">
|
||||
<div class="l-single-inner">
|
||||
<div id="contact-complete"></div>
|
||||
</div>
|
||||
<main class="l-container">
|
||||
<div class="l-content">
|
||||
<div id="contact-complete"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
新しいイシューから参照