@charset "UTF-8";
/* data-attr="text" */
span[data-attr="text"] {
display: inline;
line-height: 1.5;
white-space: normal;
word-break: break-all; }
span[data-attr="text"] a {
margin: 0 2px;
color: var(--indigo);
border-bottom: 1px dotted var(--indigo); }
span[data-attr="text"] a:hover {
color: var(--indigo-overlay);
border-bottom: 1px solid var(--indigo-overlay); }
/* data-attr="icon" */
i[data-attr="icon"] {
display: inline-flex;
font-size: 1.6rem; }
/* data-attr="image" */
img[data-attr="image"] {
display: inline-flex;
width: 40px;
height: 40px;
border-radius: 20px;
object-fit: cover;
cursor: pointer; }
/* data-attr="list" */
ul[data-attr="list"] {
position: relative;
display: block;
padding-left: 32px; }
ul[data-attr="list"] li ul {
padding-left: 32px; }
/* data-status="select" */
label[data-status="select"] {
display: inline-flex;
position: relative; }
label[data-status="select"]:after {
content: "";
position: absolute;
width: 8px;
height: 5px;
top: calc(50% - 2px);
right: 12px;
background: url(../../img/mb/icon/arrow_down.svg) no-repeat 0 0;
background-size: 8px;
pointer-events: none; }
label[data-status="select"] select {
outline: 0;
padding: 0 30px 0 12px;
border-radius: 2px;
height: 40px;
font-size: 1.6rem;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
position: relative;
color: var(--black-base);
border: 1px solid var(--gray-base);
background-color: var(--white); }
/* data-status */
[data-status="disabled"] { opacity: .3; }
[data-status="disabled"],
[data-status="disabled"] * { pointer-events: none !important; }
div.pa-table *[data-status="disabled"] { opacity: inherit; }
div.pa-table div.pa-button[data-status="disabled"] > a {
color: var(--indigo-light) !important; }
div.pa-table div.pa-button.dont[data-status="disabled"] > a {
color: var(--red-light) !important; }
/* pa-text
---------------------------------------------------------------------------------------------------
span.pa-text
(a)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
option :［ ellipsis* ］［ required ］［ color ］
data属性 : -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
「 b2内に タグを配置しても良い」という共通ルールとは別に、
パーツ内に、部分的に タグを配置しても良い。
------------------------------------------------------------------------------------------------ */
span.pa-text {
display: inline;
line-height: 1.5;
white-space: normal;
word-break: break-all; }
span.pa-text a {
margin: 0 2px;
color: var(--indigo);
border-bottom: 1px dotted; }
span.pa-text a:hover {
color: var(--indigo-overlay);
border-bottom: 1px solid; }
span.pa-text i[data-attr="icon"] {
position: relative;
top: 2px; }
/* ellipsis* */
span.pa-text[class *= "ellipsis"],
span[data-attr="text"][class *= "ellipsis"] {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal; }
span.pa-text.ellipsis1,
span[data-attr="text"].ellipsis1 {
-webkit-line-clamp: 1; }
span.pa-text.ellipsis2,
span[data-attr="text"].ellipsis2 {
-webkit-line-clamp: 2; }
span.pa-text.ellipsis3,
span[data-attr="text"].ellipsis3 {
-webkit-line-clamp: 3; }
span.pa-text.ellipsis4,
span[data-attr="text"].ellipsis4 {
-webkit-line-clamp: 4; }
span.pa-text.ellipsis5,
span[data-attr="text"].ellipsis5 {
-webkit-line-clamp: 5; }
/* do / blue / saturday */
span.pa-text.do,
span.pa-text.blue,
span.pa-text.saturday {
color: var(--blue); }
/* dont / red / sunday */
span.pa-text.dont,
span.pa-text.red,
span.pa-text.sunday {
color: var(--red); }
/* caution / yellow */
span.pa-text.caution,
span.pa-text.yellow {
color: var(--yellow); }
/* info / lime */
span.pa-text.info,
span.pa-text.lime {
color: var(--lime); }
/* trigger / gray */
span.pa-text.trigger,
span.pa-text.gray {
color: var(--gray); }
/* red / This includes it in "dont" of the system color. */
/* orange */
span.pa-text.orange {
color: var(--orange); }
/* yellow / This includes it in "caution" of the system color. */
/* lime / This includes it in "info" of the system color. */
/* green */
span.pa-text.green {
color: var(--green); }
/* teal */
span.pa-text.teal {
color: var(--teal); }
/* cyan */
span.pa-text.cyan {
color: var(--cyan); }
/* blue / This includes it in "do" of the system color. */
/* indigo / This includes it in "default" of the system color. */
/* purple */
span.pa-text.purple {
color: var(--purple); }
/* pink */
span.pa-text.pink {
color: var(--pink); }
/* magenta */
span.pa-text.magenta {
color: var(--magenta); }
/* gray / This includes it in "trigger" of the system color. */
/* required */
span.pa-text.required {
position: relative; }
span.pa-text.required:before {
content: "*";
position: absolute;
right: -12px;
color: var(--red); }
@media screen and (min-width: 520px) {
span.pa-text.required:before {
left: -12px;
right: inherit; }
}
/* pa-icon
---------------------------------------------------------------------------------------------------
i.pa-icon
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
option :［ color ］
data属性 : -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
------------------------------------------------------------------------------------------------ */
i.pa-icon {
display: inline;
font-size: 1.6rem; }
/* do / blue */
i.pa-icon.do,
i.pa-icon.blue {
color: var(--blue); }
/* dont / red */
i.pa-icon.dont,
i.pa-icon.red {
color: var(--red); }
/* caution / yellow */
i.pa-icon.caution,
i.pa-icon.yellow {
color: var(--yellow); }
/* info / lime */
i.pa-icon.info,
i.pa-icon.lime {
color: var(--lime); }
/* trigger / gray */
i.pa-icon.trigger,
i.pa-icon.gray {
color: var(--gray); }
/* red / This includes it in "dont" of the system color. */
/* orange */
i.pa-icon.orange {
color: var(--orange); }
/* yellow / This includes it in "caution" of the system color. */
/* lime / This includes it in "info" of the system color. */
/* green */
i.pa-icon.green {
color: var(--green); }
/* teal */
i.pa-icon.teal {
color: var(--teal); }
/* cyan */
i.pa-icon.cyan {
color: var(--cyan); }
/* blue / This includes it in "do" of the system color. */
/* indigo / This includes it in "default" of the system color. */
/* purple */
i.pa-icon.purple {
color: var(--purple); }
/* pink */
i.pa-icon.pink {
color: var(--pink); }
/* magenta */
i.pa-icon.magenta {
color: var(--magenta); }
/* gray / This includes it in "trigger" of the system color. */
/* pa-image
---------------------------------------------------------------------------------------------------
img.pa-image
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
option :［ 形状 / circle , square（ 初期値 ）, radius , oval ］［ 比率 / cover , contain ］［ border ］
data属性 : -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
サイズの指定に関しては、大きさのパターンが制限できないため common.css によって調整する。
------------------------------------------------------------------------------------------------ */
img.pa-image {
position: relative;
display: inline-flex;
width: 100%;
height: 100%; }
img.pa-image.js-viewChange {
width: 16px;
height: 16px;
cursor: pointer; }
/* cover */
img.pa-image.cover {
object-fit: cover; }
/*contain */
img.pa-image.contain {
object-fit: contain; }
/* circle */
img.pa-image.circle {
border-radius: 50%; }
/* square / This option is set by default. */
/* radius */
img.pa-image.radius {
border-radius: 4px; }
/* oval */
img.pa-image.oval {
border-radius: 512px; }
/* border */
img.pa-image.border {
border: 1px solid var(--gray); }
/* pa-list
---------------------------------------------------------------------------------------------------
ul.pa-list
li
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
option :［ 表現 / border , background ］［ list-style ］
data属性 : -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
------------------------------------------------------------------------------------------------ */
ul.pa-list {
position: relative;
display: block;
padding-left: 32px; }
ul.pa-list li ul {
padding-left: 32px; }
/* border / background */
ul.pa-list.border,
ul.pa-list.background,
ul[data-attr="list"].border,
ul[data-attr="list"].background {
padding: 12px 12px 12px 36px;
border-radius: 2px; }
ul.pa-list.border,
ul[data-attr="list"].border {
border: 1px solid var(--gray-light); }
ul.pa-list.background,
ul[data-attr="list"].background {
background: var(--gray-bright); }
/* list-style */
ul.pa-list.disc,
ul[data-attr="list"].disc {
list-style: disc; }
ul.pa-list.circle,
ul[data-attr="list"].circle {
list-style: circle; }
ul.pa-list.square,
ul[data-attr="list"].square {
list-style: square; }
ul.pa-list.decimal,
ul[data-attr="list"].decimal {
list-style: decimal; }
ul.pa-list.decimalLeadingZero,
ul[data-attr="list"].decimalLeadingZero {
list-style: decimal-leading-zero; }
ul.pa-list.lowerAlpha,
ul[data-attr="list"].lowerAlpha {
list-style: lower-alpha; }
ul.pa-list.lowerGreek,
ul[data-attr="list"].lowerGreek {
list-style: lower-greek; }
ul.pa-list.lowerRoman,
ul[data-attr="list"].lowerRoman {
list-style: lower-roman; }
ul.pa-list.upperAlpha,
ul[data-attr="list"].upperAlpha {
list-style: upper-alpha; }
ul.pa-list.upperRoman,
ul[data-attr="list"].upperRoman {
list-style: upper-roman; }
ul.pa-list.none,
ul[data-attr="list"].none {
list-style: none;
padding-left: 0; }
ul.pa-list.none.border,
ul.pa-list.none.background,
ul[data-attr="list"].none.border,
ul[data-attr="list"].none.background {
padding: 8px; }
/* pa-btton
---------------------------------------------------------------------------------------------------
div.pa-button
a
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
option :［ 形状 / circle , square , radius , oval（ 初期値 ）］［ 表現 / transparent , outline ］［ color ］
data属性 : ［ data-status / active , inactive , select , badge ］
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
------------------------------------------------------------------------------------------------ */
div.pa-button {
display: inline-flex;
margin: 0;
padding: 0;
border: none;
outline: none;
background: transparent; }
div.pa-button > a {
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
height: 32px;
padding: 8px 12px;
border: none;
outline: none;
border-radius: 512px;
box-sizing: border-box;
background: var(--indigo);
color: var(--white);
transition: all .2s ease-out; }
div.pa-button span[data-attr="text"] {
font-size: 1.4rem; }
div.pa-button i[data-attr="icon"] {
font-size: 1.8rem; }
div.pa-button > a > *:not(:first-child) {
margin-left: 8px; }
div.pa-button > a:hover {
background: var(--indigo-overlay); }
/* circle */
div.pa-button.circle > a {
border-radius: 50%; }
/* square */
div.pa-button.square > a {
border-radius: 0; }
/* radius */
div.pa-button.radius > a {
border-radius: 4px; }
/* oval / This option is set by default. */
/* transparent */
div.pa-button.transparent > a {
background: transparent;
color: var(--indigo); }
div.pa-button.transparent > a:hover {
color: var(--indigo-overlay);
background: var(--indigo-o20pe); }
/* outline */
div.pa-button.outline > a {
background: transparent;
color: var(--indigo);
border: 1px solid var(--indigo); }
div.pa-button.outline > a:hover {
color: var(--indigo-overlay);
border: 1px solid var(--indigo-overlay);
background: var(--indigo-o20pe); }
/* do / blue */
div.pa-button.do > a,
div.pa-button.blue > a {
background: var(--blue); }
div.pa-button.do > a:hover,
div.pa-button.blue > a:hover {
background: var(--blue-overlay); }
/* do + text */
div.pa-button.do.transparent > a,
div.pa-button.blue.transparent > a {
color: var(--blue);
background: transparent; }
div.pa-button.do.transparent > a:hover,
div.pa-button.blue.transparent > a:hover {
color: var(--blue-overlay);
background: var(--blue-o20pe); }
/* do + outline */
div.pa-button.do.outline > a,
div.pa-button.blue.outline > a {
color: var(--blue);
border: 1px solid var(--blue);
background: transparent; }
div.pa-button.do.outline > a:hover,
div.pa-button.blue.outline > a:hover {
color: var(--blue-overlay);
border: 1px solid var(--blue-overlay);
background: var(--blue-o20pe); }
/* dont / red */
div.pa-button.dont > a,
div.pa-button.red > a {
background: var(--red); }
div.pa-button.dont > a:hover,
div.pa-button.red > a:hover {
background: var(--red-overlay); }
/* dont + text */
div.pa-button.dont.transparent > a,
div.pa-button.red.transparent > a {
color: var(--red);
background: transparent; }
div.pa-button.dont.transparent > a:hover,
div.pa-button.red.transparent > a:hover {
color: var(--red-overlay);
background: var(--red-o20pe); }
/* dont + outline */
div.pa-button.dont.outline > a,
div.pa-button.red.outline > a {
color: var(--red);
border: 1px solid var(--red);
background: transparent; }
div.pa-button.dont.outline > a:hover,
div.pa-button.red.outline > a:hover {
color: var(--red-overlay);
border: 1px solid var(--red-overlay);
background: var(--red-o20pe); }
/* caution / yellow */
div.pa-button.caution > a,
div.pa-button.yellow > a {
background: var(--yellow); }
div.pa-button.caution > a:hover,
div.pa-button.yellow > a:hover {
background: var(--yellow-overlay); }
/* caution + text */
div.pa-button.caution.transparent > a,
div.pa-button.yellow.transparent > a {
color: var(--yellow);
background: transparent; }
div.pa-button.caution.transparent > a:hover,
div.pa-button.yellow.transparent > a:hover {
color: var(--yellow-overlay);
background: var(--yellow-o20pe); }
/* caution + outline */
div.pa-button.caution.outline > a,
div.pa-button.yellow.outline > a {
color: var(--yellow);
border: 1px solid var(--yellow);
background: transparent; }
div.pa-button.caution.outline > a:hover,
div.pa-button.yellow.outline > a:hover {
color: var(--yellow-overlay);
border: 1px solid var(--yellow-overlay);
background: var(--yellow-o20pe); }
/* info / lime */
div.pa-button.info > a,
div.pa-button.lime > a {
background: var(--lime); }
div.pa-button.info > a:hover,
div.pa-button.lime > a:hover {
background: var(--lime-overlay); }
/* info + text */
div.pa-button.info.transparent > a,
div.pa-button.lime.transparent > a {
color: var(--lime);
background: transparent; }
div.pa-button.info.transparent > a:hover,
div.pa-button.lime.transparent > a:hover {
color: var(--lime-overlay);
background: var(--lime-o20pe); }
/* info + outline */
div.pa-button.info.outline > a,
div.pa-button.lime.outline > a {
color: var(--lime);
border: 1px solid var(--lime);
background: transparent; }
div.pa-button.info.outline > a:hover,
div.pa-button.lime.outline > a:hover {
color: var(--lime-overlay);
border: 1px solid var(--lime-overlay);
background: var(--lime-o20pe); }
/* trigger / gray */
div.pa-button.trigger > a,
div.pa-button.gray > a {
background: var(--gray); }
div.pa-button.trigger > a:hover,
div.pa-button.gray > a:hover {
background: var(--gray-overlay); }
/* trigger + text */
div.pa-button.trigger.transparent > a,
div.pa-button.gray.transparent > a {
color: var(--gray);
background: transparent; }
div.pa-button.trigger.transparent > a:hover,
div.pa-button.gray.transparent > a:hover {
color: var(--gray-overlay);
background: var(--gray-o20pe); }
/* trigger + outline */
div.pa-button.trigger.outline > a,
div.pa-button.gray.outline > a {
color: var(--gray);
border: 1px solid var(--gray);
background: transparent; }
div.pa-button.trigger.outline > a:hover,
div.pa-button.gray.outline > a:hover {
color: var(--gray-overlay);
border: 1px solid var(--gray-overlay);
background: var(--gray-o20pe); }
/* red / This includes it in "dont" of the system color. */
/* orange */
div.pa-button.orange > a {
background: var(--orange); }
div.pa-button.orange > a:hover {
background: var(--orange-overlay); }
/* orange + text */
div.pa-button.orange.transparent > a {
color: var(--orange);
background: transparent; }
div.pa-button.orange.transparent > a:hover {
color: var(--orange-overlay);
background: var(--orange-o20pe); }
/* orange + outline */
div.pa-button.orange.outline > a {
color: var(--orange);
border: 1px solid var(--orange);
background: transparent; }
div.pa-button.orange.outline > a:hover {
color: var(--orange-overlay);
border: 1px solid var(--orange-overlay);
background: var(--orange-o20pe); }
/* yellow / This includes it in "caution" of the system color. */
/* lime / This includes it in "info" of the system color. */
/* green */
div.pa-button.green > a {
background: var(--green); }
div.pa-button.green > a:hover {
background: var(--green-overlay); }
/* green + text */
div.pa-button.green.transparent > a {
color: var(--green);
background: transparent; }
div.pa-button.green.transparent > a:hover {
color: var(--green-overlay);
background: var(--green-o20pe); }
/* green + outline */
div.pa-button.green.outline > a {
color: var(--green);
border: 1px solid var(--green);
background: transparent; }
div.pa-button.green.outline > a:hover {
color: var(--green-overlay);
border: 1px solid var(--green-overlay);
background: var(--green-o20pe); }
/* teal */
div.pa-button.teal > a {
background: var(--teal); }
div.pa-button.teal > a:hover {
background: var(--teal-overlay); }
/* teal + text */
div.pa-button.teal.transparent > a {
color: var(--teal);
background: transparent; }
div.pa-button.teal.transparent > a:hover {
color: var(--teal-overlay);
background: var(--teal-o20pe); }
/* teal + outline */
div.pa-button.teal.outline > a {
color: var(--teal);
border: 1px solid var(--teal);
background: transparent; }
div.pa-button.teal.outline > a:hover {
color: var(--teal-overlay);
border: 1px solid var(--teal-overlay);
background: var(--teal-o20pe); }
/* cyan */
div.pa-button.cyan > a {
background: var(--cyan); }
div.pa-button.cyan > a:hover {
background: var(--cyan-overlay); }
/* cyan + text */
div.pa-button.cyan.transparent > a {
color: var(--cyan);
background: transparent; }
div.pa-button.cyan.transparent > a:hover {
color: var(--cyan-overlay);
background: var(--cyan-o20pe); }
/* cyan + outline */
div.pa-button.cyan.outline > a {
color: var(--cyan);
border: 1px solid var(--cyan);
background: transparent; }
div.pa-button.cyan.outline > a:hover {
color: var(--cyan-overlay);
border: 1px solid var(--cyan-overlay);
background: var(--cyan-o20pe); }
/* blue / This includes it in "do" of the system color. */
/* indigo / This includes it in "default" of the system color. */
/* purple */
div.pa-button.purple > a {
background: var(--purple); }
div.pa-button.purple > a:hover {
background: var(--purple-overlay); }
/* purple + text */
div.pa-button.purple.transparent > a {
color: var(--purple);
background: transparent; }
div.pa-button.purple.transparent > a:hover {
color: var(--purple-overlay);
background: var(--purple-o20pe); }
/* purple + outline */
div.pa-button.purple.outline > a {
color: var(--purple);
border: 1px solid var(--purple);
background: transparent; }
div.pa-button.purple.outline > a:hover {
color: var(--purple-overlay);
border: 1px solid var(--purple-overlay);
background: var(--purple-o20pe); }
/* pink */
div.pa-button.pink > a {
background: var(--pink); }
div.pa-button.pink > a:hover {
background: var(--pink-overlay); }
/* pink + text */
div.pa-button.pink.transparent > a {
color: var(--pink);
background: transparent; }
div.pa-button.pink.transparent > a:hover {
color: var(--pink-overlay);
background: var(--pink-o20pe); }
/* pink + outline */
div.pa-button.pink.outline > a {
color: var(--pink);
border: 1px solid var(--pink);
background: transparent; }
div.pa-button.pink.outline > a:hover {
color: var(--pink-overlay);
border: 1px solid var(--pink-overlay);
background: var(--pink-o20pe); }
/* magenta */
div.pa-button.magenta > a {
background: var(--magenta); }
div.pa-button.magenta > a:hover {
background: var(--magenta-overlay); }
/* magenta + text */
div.pa-button.magenta.transparent > a {
color: var(--magenta);
background: transparent; }
div.pa-button.magenta.transparent > a:hover {
color: var(--magenta-overlay);
background: var(--magenta-o20pe); }
/* magenta + outline */
div.pa-button.magenta.outline > a {
color: var(--magenta);
border: 1px solid var(--magenta);
background: transparent; }
div.pa-button.magenta.outline > a:hover {
color: var(--magenta-overlay);
border: 1px solid var(--magenta-overlay);
background: var(--magenta-o20pe); }
/* gray / This includes it in "trigger" of the system color. */
/* data-status */
div.pa-button[data-status="active"] > a:before {
content: "";
position: absolute;
width: 8px;
height: 8px;
border-radius: 8px;
right: 0;
bottom: 0;
background: var(--lime);
border: 2px solid var(--white); }
/* data-status="inactive" */
div.pa-button[data-status="inactive"] > a:before {
content: "";
position: absolute;
width: 8px;
height: 8px;
border-radius: 8px;
right: 0;
bottom: 0;
background-color: var(--cyan-bright);
border: 2px solid var(--white); }
/* select */
div.pa-button.select > a > i.bi-chevron-down[data-attr="icon"] {
font-size: 1.4rem; }
div.pa-button.select > a > label[data-status="select"] {
position: absolute;
right: 0;
opacity: 0; }
div.pa-button.select > a > label[data-status="select"] select {
width: 32px;
height: 32px;
padding: 0; }
/* badge */
div.pa-button[data-status="badge"] > a:after {
content: attr(data-status-value)"";
position: absolute;
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
top: -12px;
right: -12px;
min-width: 24px;
height: 24px;
padding: 4px 6px;
border-radius: 16px;
font-size: 1.2rem;
font-weight: 600;
background-color: var(--red);
border: 1px solid var(--white);
color: var(--white); }
/* pa-input
---------------------------------------------------------------------------------------------------
input.pa-input
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
option : ［ type属性 / password , datepicker , timepicker , select ］
data属性 : ［ data-status / check / select ］
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Form要素のため、タグとセットで用いる。
------------------------------------------------------------------------------------------------ */
input.pa-input {
display: inline-flex;
width: 100%;
height: 40px;
padding: 8px;
font-size: 1.6rem;
box-sizing: border-box;
border: none;
border-radius: 2px;
background-color: var(--white-base);
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif; }
input.pa-input::placeholder {
color: var(--gray-base); }
input.pa-input:focus {
outline: none;
padding: 8px 8px 6px;
border: none;
background-color: var(--gray-shine);
border-bottom: 2px solid var(--indigo); }
input.pa-input ~ i[data-attr="icon"] {
position: absolute;
top: 50%;
right: 0;
padding: 8px;
transform: translateY(-50%);
cursor: pointer; }
input.pa-input ~ i[data-attr="icon"] {
pointer-events: none; }
/* data-status="check" */
input.pa-input[data-status="check"] {
background-color: var(--red-bright); }
/* password */
input[type="password"].password {
background-image: url(../img/icon/view.svg);
background-repeat: no-repeat;
background-position: calc(100% - 8px) calc(50% - 0px);
background-size: 16px 16px; }
input[type="text"].password {
background-image: url(../img/icon/view-off.svg);
background-repeat: no-repeat;
background-position: calc(100% - 8px) calc(50% - 0px);
background-size: 16px 16px; }
input.password:focus {
background-position: calc(100% - 8px) calc(50% + 1px); }
input.js-passwordCheck {
position: absolute;
display: inline-flex;
width: 32px;
height: 32px;
top: calc(50% - 16px);
right: 0;
cursor: pointer;
z-index: 1;
opacity: 0; }
/* type="calendar" */
input.pa-input[type="calendar"] {
width: 128px;
background-image: url(../../img/mb/icon/calendar.svg);
background-repeat: no-repeat;
background-position: calc(100% - 8px) calc(50% - 0px);
background-size: 16px 16px; }
input.pa-input[type="calendar"]:focus {
background-position: calc(100% - 8px) calc(50% + 1px); }
input.pa-input[type="calendar"] ~ i[data-attr="icon"] {
pointer-events: auto; }
/* noIcon */
input.pa-input[type="calendar"].noIcon {
width: 104px;
background-image: none; }
/* timepicker */
input.pa-input.timepicker {
width: 88px; }
@media screen and (min-width: 520px) {
input.pa-input[type="calendar"] {
width: 128px;
}
}
/* select */
input.pa-input.select ~ label[data-status="select"] {
position: absolute;
right: 0;
opacity: 0; }
input.pa-input.select ~ label[data-status="select"] select {
width: 32px;
height: 32px;
padding: 0; }
@media screen and (min-width: 520px) {
input.pa-input {
height: 32px;
font-size: 1.4rem; }
}
/* pa-textarea
---------------------------------------------------------------------------------------------------
textarea.pa-textarea
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
option : ［ autoresize ］
data属性 : ［ data-status / check ］
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
------------------------------------------------------------------------------------------------ */
textarea.pa-textarea {
display: inline-flex;
width: 100%;
min-height: 56px;
padding: 8px;
font-size: 1.6rem;
box-sizing: border-box;
border: none;
border-radius: 2px;
background-color: var(--white-base);
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
resize: vertical; }
textarea.pa-textarea::placeholder {
color: var(--gray-base); }
textarea.pa-textarea:focus {
outline: none;
background-color: var(--gray-shine); }
/* autoresize */
textarea.autoresize {
resize: none; }
/* data-status="check" */
textarea.pa-textarea[data-status="check"] {
background-color: var(--red-bright); }
@media screen and (min-width: 520px) {
textarea.pa-textarea {
font-size: 1.4rem; }
}
/* pa-checkbox
---------------------------------------------------------------------------------------------------
div.pa-checkbox
input
label
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
option : ［ 表現 / toggle , line , default ］
data属性 : ［ data-status / check ］
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
表示行数に制限のないリストなどに使用する際は［ default ］オプションを使用する。
擬似要素によって表現している仕様上、膨大な行数リピートされると DOM の生成により動作が重くなるため。
------------------------------------------------------------------------------------------------ */
div.pa-checkbox {
display: inline-flex;
position: relative; }
div.pa-checkbox input[type=checkbox] {
display: none; }
div.pa-checkbox input[type=checkbox] ~ label {
box-sizing: border-box;
cursor: pointer;
display: -webkit-box;
position: relative;
height: 32px;
line-height: 32px;
padding-left: 32px;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden; }
div.pa-checkbox input[type=checkbox] ~ label:before {
content: '';
display: block;
position: absolute;
background: var(--white);
border: 2px solid var(--gray-base);
border-radius: 2px;
width: 20px;
height: 20px;
top: 6px;
left: 6px;
box-sizing: border-box; }
div.pa-checkbox input[type=checkbox] ~ label:after {
content: '';
position: absolute;
display: block;
width: 6px;
height: 10px;
top: 8px;
left: 12px;
opacity: 0;
border-right: 2px solid var(--white);
border-bottom: 2px solid var(--white);
transform: rotate(45deg) translate3d(0,2px,0) scale3d(.7,.7,1); }
div.pa-checkbox input[type=checkbox]:checked ~ label:before {
background: var(--indigo);
border: none; }
div.pa-checkbox input[type=checkbox]:checked ~ label:after {
opacity: 1;
transform: rotate(45deg) scale3d(1,1,1); }
div.pa-checkbox input[type=checkbox] ~ label:hover:before {
border: 2px solid var(--indigo); }
/* toggle */
div.pa-checkbox.toggle input[type=checkbox] ~ label {
width: 56px;
border-radius: 16px;
background-color: var(--gray-light); }
div.pa-checkbox.toggle input[type=checkbox] ~ label:before {
width: 28px;
height: 28px;
top: 2px;
left: 2px;
border-radius: 14px;
border: none;
box-shadow: 2px 0 8px 0 rgba(154,161,171,.3);
transition: .3s ease; }
div.pa-checkbox.toggle input[type=checkbox] ~ label:after {
opacity: 0; }
div.pa-checkbox.toggle input[type=checkbox]:checked ~ label:before {
left: 26px;
background-color: var(--white);
box-shadow: -2px 0 8px 0 rgba(154,161,171,.3); }
div.pa-checkbox.toggle input[type=checkbox]:checked ~ label {
background-color: var(--indigo); }
/* line */
div.pa-checkbox.line input[type=checkbox] ~ label:after { border-bottom: none; }
div.pa-checkbox.line input[type=checkbox]:checked ~ label:after { transform: rotate(90deg) scale3d(1,1,1); }
/* default */
div.pa-checkbox.default {
display: inline-flex;
position: static; }
div.pa-checkbox.default input[type=checkbox] {
display: inline-flex;
width: 18px;
height: 18px; }
div.pa-checkbox.default input[type=checkbox] ~ label {
height: inherit;
position: static;
line-height: inherit;
padding-left: inherit; }
div.pa-checkbox.default input[type=checkbox] ~ label:before,
div.pa-checkbox.default input[type=checkbox] ~ label:after {
display: none; }
/* data-status="check" */
div.pa-checkbox[data-status="check"] input[type=checkbox] ~ label:before {
background-color: var(--red-bright); }
/* data-status="check" + toggle */
div.pa-checkbox.toggle[data-status="check"] input[type=checkbox] ~ label {
background-color: var(--red-bright); }
div.pa-checkbox.toggle[data-status="check"] input[type=checkbox] ~ label:before {
background-color: var(--white); }
div.pa-checkbox.toggle[data-status="check"] input[type=checkbox]:checked ~ label {
background-color: var(--indigo); }
/* pa-radio
---------------------------------------------------------------------------------------------------
div.pa-radio
input
label
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
option : -
data属性 : ［ data-status / check ］
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
------------------------------------------------------------------------------------------------ */
div.pa-radio {
display: inline-flex;
position: relative; }
div.pa-radio input[type=radio] {
display: none; }
div.pa-radio input[type=radio] ~ label {
box-sizing: border-box;
cursor: pointer;
display: -webkit-box;
position: relative;
height: 32px;
line-height: 32px;
padding-left: 32px;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden; }
div.pa-radio input[type=radio] ~ label:before {
content: '';
display: block;
position: absolute;
background: var(--white);
border: 2px solid var(--gray-base);
border-radius: 12px;
width: 20px;
height: 20px;
top: 6px;
left: 6px;
box-sizing: border-box; }
div.pa-radio input[type=radio] ~ label:after {
content: '';
position: absolute;
display: block;
width: 8px;
height: 8px;
border-radius: 4px;
background: var(--white);
top: 12px;
left: 12px;
opacity: 0; }
div.pa-radio input[type=radio]:checked ~ label:before {
background: var(--indigo) !important;
border: none; }
div.pa-radio input[type=radio]:checked ~ label:after {
opacity: 1;
transform: rotate(45deg) scale3d(1,1,1); }
div.pa-radio input[type=radio] ~ label:hover:before {
border: 2px solid var(--indigo); }
/* data-status="check" */
div.pa-radio[data-status="check"] input[type=radio] ~ label:before {
background-color: var(--red-bright); }
/* pa-select
---------------------------------------------------------------------------------------------------
label.pa-select
select
option
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
option : -
data属性 : ［ data-status / check ］
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Form要素のため、