http://git-wip-us.apache.org/repos/asf/incubator-systemml-website/blob/069d53e7/_src/assets/css/main.css ---------------------------------------------------------------------- diff --git a/_src/assets/css/main.css b/_src/assets/css/main.css index 409d3e8..ad0c8ae 100644 --- a/_src/assets/css/main.css +++ b/_src/assets/css/main.css @@ -2,11 +2,11 @@ /*! nouislider - 8.3.0 - 2016-02-14 17:37:20 */ .noUi-target, .noUi-target * { -webkit-touch-callout: none; + -webkit-user-select: none; -ms-touch-action: none; touch-action: none; -ms-user-select: none; -moz-user-select: none; - -webkit-user-select: none; user-select: none; box-sizing: border-box; } @@ -457,100 +457,104 @@ table { td, th { padding: 0; } -.ap-container { +html { + font-size: 16px; } + +body { color: #1d3649; - font-size: 16px; line-height: 1.68; - font-family: Helvetica Neue for IBM,Helvetica Neue,Helvetica,Arial,Roboto,sans-serif; + font-family: Helvetica Neue for IBM,Helvetica Neue,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,sans-serif; font-weight: 300; } -.ap-container *, .ap-container :after, .ap-container :before { +*, :after, :before { box-sizing: border-box; } -.ap-container .hyperlink, .ap-container a, .ap-container a:hover { +.hyperlink, a, a:hover { color: #a6266e; text-decoration: none; } -.ap-container .hyperlink strong { +.hyperlink strong { font-weight: 700; } -.ap-container .hyperlink:hover { +.hyperlink:hover { color: #a6266e; text-decoration: underline; } -.ap-container .hyperlink:active { +.hyperlink:active { color: #db2780; } -.ap-container .dark { +.dark { color: #f9f9fb; } -.ap-container .dark a, .ap-container .dark a.hyperlink:hover { +.dark a, .dark a.hyperlink:hover { color: #41d6c3; } -.ap-container h1, .ap-container h2, .ap-container h3, .ap-container h4, .ap-container h5, .ap-container h6 { +h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; } -.ap-container h1 { - font-size: 2.441em; } +h1 { + font-size: 2.441rem; } -.ap-container h2 { - font-size: 1.563em; } +h2 { + font-size: 1.563rem; } -.ap-container h3 { - font-size: 1.25em; } +h3 { + font-size: 1.25rem; } -.ap-container h4, .ap-container h5, .ap-container h6 { - font-size: 1em; } +h4, h5, h6 { + font-size: 1rem; } -@media (min-width: 48.063em) { - .ap-container h1 { - font-size: 4.236em; } - .ap-container h2 { - font-size: 2.618em; } - .ap-container h3 { - font-size: 1.618em; } } +@media (min-width: 51.44em) { + h1 { + font-size: 4.236rem; } + h2 { + font-size: 2.618rem; } + h3 { + font-size: 1.563rem; } } -.ap-container p { - font-weight: 1em; } +p { + font-size: 1rem; } -.ap-container small { - font-size: .875em; } +small { + font-size: .875rem; } -.ap-container strong { +strong { font-weight: 700; } -.ap-container em { +em { font-style: italic; } -.ap-container ol, .ap-container ul { +ol, ul { padding-left: 1em; } -.ap-container ul { +ul { list-style: disc; } -.ap-container ol { +ol { list-style: decimal; } -.ap-container ol ul, .ap-container ul ul { +ol ul, ul ul { list-style-type: circle; margin-bottom: 0; } -.ap-container img { +img { max-width: 100%; } -.ap-container fieldset { +fieldset { border: 0; padding: 0; margin: 0; } -.ap-container .alert { +.alert { padding: 15px 62px; min-height: 55px; display: block; clear: both; position: absolute; left: 0; + -webkit-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; border-left: 4px solid; background: #f9f9fb; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); @@ -558,14 +562,46 @@ td, th { margin-top: 0; width: 100%; } -.ap-container .alert, .ap-container .alert__fadeOut { +.alert .icon--error, .alert .icon--info, .alert .icon--success, .alert .icon--warning { + position: absolute; + top: 15px; + left: 24px; } + +.alert__fadeOut { + opacity: 0; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } -.ap-container .alert__fadeOut { - opacity: 0; } +.alert__close { + position: absolute; + top: 15px; + right: 20px; + background: transparent; + border: 0; + padding: 0; + display: block; } + +.alert__title { + font-size: 1rem; + font-weight: 700; + display: inline; } + +.alert__title:after { + content: ' â '; } + +.alert--success { + border-color: #4b8400; } + +.alert--warning { + border-color: #fdd600; } + +.alert--error { + border-color: #e71d32; } + +.alert--info { + border-color: #4178be; } -.ap-container .alert__close { +.alert__close { position: absolute; top: 15px; right: 20px; @@ -576,142 +612,124 @@ td, th { width: 24px; height: 24px; } -.ap-container .alert__close svg { +.alert__close svg { width: 24px; height: 24px; fill: #a6266e; } -.ap-container .alert__close:active svg { +.alert__close:active svg { fill: #db2780; } -.ap-container .alert__title { - font-size: 1em; - font-weight: 700; - display: inline; } - -.ap-container .alert__title:after { - content: ' â '; } - -.ap-container .alert__icon { +.alert__icon { width: 24px; height: 24px; position: absolute; top: 15px; left: 24px; } -.ap-container .alert--success { - border-color: #4b8400; } - -.ap-container .alert--success .alert__icon { +.alert--success .alert__icon { fill: #4b8400; } -.ap-container .alert--warning { - border-color: #fdd600; } - -.ap-container .alert--warning .alert__icon { +.alert--warning .alert__icon { fill: #fdd600; } -.ap-container #icon-warning_filled_24 .text { +.alert--warning .text { fill: #1d3649; } -.ap-container .alert--error { - border-color: #e71d32; } - -.ap-container .alert--error .alert__icon { +.alert--error .alert__icon { fill: #e71d32; } -.ap-container .alert--info { - border-color: #4178be; } - -.ap-container .alert--info .alert__icon { +.alert--info .alert__icon { fill: #4178be; } -.ap-container .breadcrumb, .ap-container .breadcrumb--condensed { +.breadcrumb, .breadcrumb--condensed { display: block; clear: both; margin: 0 auto; - font-size: .875em; + font-size: .875rem; position: relative; } -.ap-container .breadcrumb__container { +.breadcrumb__container { padding: 0; } -.ap-container .breadcrumb__item, .ap-container .breadcrumb__item--condensed { +.breadcrumb__item, .breadcrumb__item--condensed { font-weight: 400; display: inline-block; list-style: none; margin: 0 16px 0 0; position: relative; } -.ap-container .breadcrumb__item--condensed:first-child, .ap-container .breadcrumb__item:first-child { +.breadcrumb__item--condensed:first-child, .breadcrumb__item:first-child { padding-left: 0; } -.ap-container .breadcrumb__divider { +.breadcrumb__divider { fill: #aeaeae; margin-left: 16px; } -.breadcrumb--dark .ap-container .breadcrumb__divider { +.breadcrumb--dark .breadcrumb__divider { fill: #777677; } -.ap-container .breadcrumb__item--current { +.breadcrumb__item--current { font-weight: 400; display: inline-block; list-style: none; margin: 0 16px 0 0; position: relative; } -.ap-container .breadcrumb__link, .ap-container .breadcrumb__link--condensed { +.breadcrumb__link, .breadcrumb__link--condensed { display: inline-block; font-weight: 400; cursor: pointer; padding: 0; border-bottom: 1px solid transparent; } -.ap-container .breadcrumb__link--condensed svg, .ap-container .breadcrumb__link svg { +.breadcrumb__link--condensed svg, .breadcrumb__link svg { display: inline-block; width: 16px; position: relative; top: 2px; margin-right: 10px; } -.ap-container .breadcrumb__link--condensed:hover, .ap-container .breadcrumb__link:hover { +.breadcrumb__link--condensed:hover, .breadcrumb__link:hover { text-decoration: none; border-bottom: 1px solid #a6266e; } -.ap-container .breadcrumb__link--condensed:active, .ap-container .breadcrumb__link:active { +.breadcrumb__link--condensed:active, .breadcrumb__link:active { -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; color: #db2780; } -.ap-container .breadcrumb__link--condensed:active svg path, .ap-container .breadcrumb__link:active svg path { +.breadcrumb__link--condensed:active svg path, .breadcrumb__link:active svg path { fill: #db2780; } -.ap-container .breadcrumb--dark .breadcrumb__link, .ap-container .breadcrumb--dark .breadcrumb__link--condensed { +.breadcrumb--dark .breadcrumb__link, .breadcrumb--dark .breadcrumb__link--condensed { color: #41d6c3; } -.ap-container .breadcrumb--dark .breadcrumb__link--condensed:hover, .ap-container .breadcrumb--dark .breadcrumb__link:hover { +.breadcrumb--dark .breadcrumb__link--condensed:hover, .breadcrumb--dark .breadcrumb__link:hover { border-color: #41d6c3; } -.ap-container .breadcrumb--dark .breadcrumb__link--condensed:active, .ap-container .breadcrumb--dark .breadcrumb__link:active { +.breadcrumb--dark .breadcrumb__link--condensed:active, .breadcrumb--dark .breadcrumb__link:active { color: #6eedd8; border-color: #6eedd8; } -.ap-container .breadcrumb--dark .breadcrumb__link--condensed svg path, .ap-container .breadcrumb--dark .breadcrumb__link svg path { +.breadcrumb--dark .breadcrumb__link--condensed svg path, .breadcrumb--dark .breadcrumb__link svg path { fill: #41d6c3; } -.ap-container .breadcrumb--dark .breadcrumb__link--condensed:active svg path, .ap-container .breadcrumb--dark .breadcrumb__link:active svg path { +.breadcrumb--dark .breadcrumb__link--condensed:active svg path, .breadcrumb--dark .breadcrumb__link:active svg path { fill: #6eedd8; } -.ap-container .breadcrumb--dark .breadcrumb__current { +.breadcrumb--dark .breadcrumb__current { color: #f9f9fb; } -.ap-container .breadcrumb__current { +.breadcrumb__current { color: #1d3649; } -.ap-container .breadcrumb__condensed--container { +.breadcrumb__condensed--container { position: absolute; -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); + transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); + transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); margin-top: 10px; padding: 0; width: auto; @@ -722,10 +740,10 @@ td, th { transform: translate3d(0, 12px, 0); z-index: 6000; } -.ap-container .breadcrumb__condensed--container .breadcrumb__divider { +.breadcrumb__condensed--container .breadcrumb__divider { display: none; } -.ap-container .breadcrumb__condensed--container:after { +.breadcrumb__condensed--container:after { bottom: 100%; left: 50%; border: solid transparent; @@ -739,16 +757,16 @@ td, th { border-width: 10px; margin-left: -8px; } -.ap-container .breadcrumb__condensed--container .breadcrumb__item, .ap-container .breadcrumb__condensed--container .breadcrumb__item--condensed { +.breadcrumb__condensed--container .breadcrumb__item, .breadcrumb__condensed--container .breadcrumb__item--condensed { display: block; float: none; margin: 0; white-space: nowrap; } -.ap-container .breadcrumb__condensed--container .breadcrumb__item--condensed:before, .ap-container .breadcrumb__condensed--container .breadcrumb__item:before { +.breadcrumb__condensed--container .breadcrumb__item--condensed:before, .breadcrumb__condensed--container .breadcrumb__item:before { display: none; } -.ap-container .breadcrumb__condensed--container .breadcrumb__link, .ap-container .breadcrumb__condensed--container .breadcrumb__link--condensed { +.breadcrumb__condensed--container .breadcrumb__link, .breadcrumb__condensed--container .breadcrumb__link--condensed { padding: 10px 20px; display: block; font-size: .75rem; @@ -756,33 +774,33 @@ td, th { cursor: pointer; border: none; } -.ap-container .breadcrumb__condensed--container .breadcrumb__link--condensed:hover, .ap-container .breadcrumb__condensed--container .breadcrumb__link:hover { +.breadcrumb__condensed--container .breadcrumb__link--condensed:hover, .breadcrumb__condensed--container .breadcrumb__link:hover { color: #a6266e; background: #fff; } -.ap-container .breadcrumb__condensed--container .breadcrumb__link--condensed:after, .ap-container .breadcrumb__condensed--container .breadcrumb__link:after { +.breadcrumb__condensed--container .breadcrumb__link--condensed:after, .breadcrumb__condensed--container .breadcrumb__link:after { border: 0; } -.ap-container .breadcrumb--dark .breadcrumb__condensed--container { +.breadcrumb--dark .breadcrumb__condensed--container { background: #264a60; } -.ap-container .breadcrumb--dark .breadcrumb__condensed--container:after { +.breadcrumb--dark .breadcrumb__condensed--container:after { border-bottom-color: #264a60; } -.ap-container .breadcrumb--dark .breadcrumb__condensed--container .breadcrumb__link, .ap-container .breadcrumb--dark .breadcrumb__condensed--container .breadcrumb__link--condensed { +.breadcrumb--dark .breadcrumb__condensed--container .breadcrumb__link, .breadcrumb--dark .breadcrumb__condensed--container .breadcrumb__link--condensed { color: #f9f9fb; } -.ap-container .breadcrumb--dark .breadcrumb__condensed--container .breadcrumb__link--condensed:hover, .ap-container .breadcrumb--dark .breadcrumb__condensed--container .breadcrumb__link:hover { +.breadcrumb--dark .breadcrumb__condensed--container .breadcrumb__link--condensed:hover, .breadcrumb--dark .breadcrumb__condensed--container .breadcrumb__link:hover { color: #00b4a0; background: #152935; } -.ap-container .breadcrumb__link--condensed.active .breadcrumb__condensed--container, .ap-container .breadcrumb__link--condensed:active .breadcrumb__condensed--container, .ap-container .breadcrumb__link--condensed:focus .breadcrumb__condensed--container, .ap-container .breadcrumb__link--condensed:hover .breadcrumb__condensed--container { +.breadcrumb__link--condensed.active .breadcrumb__condensed--container, .breadcrumb__link--condensed:active .breadcrumb__condensed--container, .breadcrumb__link--condensed:focus .breadcrumb__condensed--container, .breadcrumb__link--condensed:hover .breadcrumb__condensed--container { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; z-index: 8000; } -.ap-container .breadcrumb__link--condensed { +.breadcrumb__link--condensed { display: inline; border: 0; background: transparent; @@ -793,13 +811,13 @@ td, th { margin-left: -30px; margin-right: -30px; } -.ap-container .breadcrumb__link--condensed:hover { +.breadcrumb__link--condensed:hover { border: 0; } -.ap-container :active, .ap-container :focus { +:active, :focus { outline: default; } -.ap-container .button { +.button { display: inline-block; text-decoration: none; background-color: transparent; @@ -811,235 +829,414 @@ td, th { cursor: pointer; font-weight: 500; } -.ap-container .button .button__text { +.button .button__text { padding-bottom: 6px; } -.ap-container .button:focus, .ap-container .button:hover { +.button:focus, .button:hover { background-color: #a6266e; color: #f9f9fb; cursor: pointer; text-decoration: none; } -.ap-container .button:focus .icon, .ap-container .button:hover .icon { +.button:focus .icon, .button:focus .icon--16, .button:focus .icon--24, .button:hover .icon, .button:hover .icon--16, .button:hover .icon--24 { fill: #fff; } -.ap-container .button:active { +.button:active { -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; - background: #db2780; - border-color: #db2780; + background: #7c1c58; + border-color: #7c1c58; color: #f9f9fb; } -.ap-container .button:active .icon { +.button:active .icon, .button:active .icon--24 { fill: #fff; } -.ap-container .button .icon { +.button .icon, .button .icon--16, .button .icon--24 { fill: #a6266e; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; - margin: 0 .875em 0 -.25em; + margin: -.175em .875em -.125em -.25em; -webkit-transform: translateY(4px); transform: translateY(4px); } -.ap-container .button a { +.button a { padding: 0; margin: 0; } -.ap-container .button--large { - font-size: 1em; - border-width: 3px; - font-weight: 700; - padding: .625em 1.75em; - height: auto; } - -@media (min-width: 48.063em) { - .ap-container .button--large { - font-size: 1.1em; - border-width: 4px; } } - -.ap-container .button--large .icon { - width: 24px; - height: 24px; } - -.ap-container .button--dark { +.button--dark { border-color: #41d6c3; color: #41d6c3; } -.ap-container .button--dark:focus, .ap-container .button--dark:hover { +.button--dark:focus, .button--dark:hover { background-color: #41d6c3; color: #152935; } -.ap-container .button--dark:focus .icon, .ap-container .button--dark:hover .icon { +.button--dark:focus .icon, .button--dark:focus .icon--16, .button--dark:focus .icon--24, .button--dark:hover .icon, .button--dark:hover .icon--16, .button--dark:hover .icon--24 { fill: #152935; } -.ap-container .button--dark:active { - background-color: #6eedd8; - border-color: #6eedd8; +.button--dark:active { + background-color: #00b4a0; + border-color: #00b4a0; color: #152935; } -.ap-container .button--dark:active .icon { +.button--dark:active .icon, .button--dark:active .icon--16, .button--dark:active .icon--24 { fill: #152935; } -.ap-container .button--dark .icon { +.button--dark .icon, .button--dark .icon--16, .button--dark .icon--24 { + fill: #41d6c3; } + +.button--focus, .button--focus.button--dark { + background: #4178be; + border-color: #4178be; + color: #fff; } + +.button--focus.button--dark .icon, .button--focus.button--dark .icon--16, .button--focus.button--dark .icon--24, .button--focus .icon, .button--focus .icon--16, .button--focus .icon--24 { + fill: #fff; } + +.button--focus.button--dark:focus, .button--focus.button--dark:hover, .button--focus:focus, .button--focus:hover { + background: #5596e6; + border-color: #5596e6; } + +.button--focus.button--dark:active, .button--focus:active { + background: #4178be; + border-color: #4178be; + color: #fff; } + +.button--focus.button--disabled { + background: #aeaeae; + color: #fff; } + +.button--focus.button--dark.button--disabled { + background: #777677; + color: #fff; } + +.button--compact { + font-size: .875rem; + padding: .175em 1em; } + +.button--compact .icon, .button--compact .icon--16 { + margin: 0 .875em .1em -.125em; } + +.button--icon, .button--secondary { + border-color: transparent; + background: transparent; + color: #a6266e; } + +.button--icon:active .icon, .button--icon:active .icon--16, .button--icon:active .icon--24, .button--icon:focus .icon, .button--icon:focus .icon--16, .button--icon:focus .icon--24, .button--icon:hover .icon, .button--icon:hover .icon--16, .button--icon:hover .icon--24, .button--secondary:active .icon, .button--secondary:active .icon--16, .button--secondary:active .icon--24, .button--secondary:focus .icon, .button--secondary:focus .icon--16, .button--secondary:focus .icon--24, .button--secondary:hover .icon, .button--secondary:hover .icon--16, .button--secondary:hover .icon--24 { + fill: #a6266e; } + +.button--icon:focus, .button--icon:hover, .button--secondary:focus, .button--secondary:hover { + border-color: transparent; + background: rgba(224, 224, 224, 0.2); + color: #a6266e; } + +.button--icon:active, .button--secondary:active { + border-color: transparent; + background: rgba(224, 224, 224, 0.5); + color: #a6266e; } + +.button--icon.button--disabled, .button--secondary.button--disabled { + border-color: transparent; + background: transparent; } + +.button--icon.button--disabled:active .icon, .button--icon.button--disabled:active .icon--16, .button--icon.button--disabled:active .icon--24, .button--icon.button--disabled:focus .icon, .button--icon.button--disabled:focus .icon--16, .button--icon.button--disabled:focus .icon--24, .button--icon.button--disabled:hover .icon, .button--icon.button--disabled:hover .icon--16, .button--icon.button--disabled:hover .icon--24, .button--secondary.button--disabled:active .icon, .button--secondary.button--disabled:active .icon--16, .button--secondary.button--disabled:active .icon--24, .button--secondary.button--disabled:focus .icon, .button--secondary.button--disabled:focus .icon--16, .button--secondary.button--disabled:focus .icon--24, .button--secondary.button--disabled:hover .icon, .button--secondary.button--disabled:hover .icon--16, .button--secondary.button--disabled:hover .icon--24 { + fill: #a6266e; } + +.button--icon.button--dark, .button--secondary.button--dark { + color: #41d6c3; } + +.button--icon.button--dark:active .icon, .button--icon.button--dark:active .icon--16, .button--icon.button--dark:active .icon--24, .button--icon.button--dark:focus .icon, .button--icon.button--dark:focus .icon--16, .button--icon.button--dark:focus .icon--24, .button--icon.button--dark:hover .icon, .button--icon.button--dark:hover .icon--16, .button--icon.button--dark:hover .icon--24, .button--secondary.button--dark:active .icon, .button--secondary.button--dark:active .icon--16, .button--secondary.button--dark:active .icon--24, .button--secondary.button--dark:focus .icon, .button--secondary.button--dark:focus .icon--16, .button--secondary.button--dark:focus .icon--24, .button--secondary.button--dark:hover .icon, .button--secondary.button--dark:hover .icon--16, .button--secondary.button--dark:hover .icon--24 { fill: #41d6c3; } -.ap-container .button--disabled { +.button--icon.button--dark:focus, .button--icon.button--dark:hover, .button--secondary.button--dark:focus, .button--secondary.button--dark:hover { + background: rgba(21, 41, 53, 0.4); } + +.button--icon.button--dark:active, .button--secondary.button--dark:active { + background: rgba(21, 41, 53, 0.7); } + +.button--icon { + padding-right: 12px; + padding-left: 12px; } + +.button--icon .icon, .button--icon .icon--16, .button--icon .icon--24 { + margin-left: 0; + margin-right: 0; } + +.button--icon.button--compact { + padding-right: 6px; + padding-left: 6px; } + +.button--disabled { color: #aeaeae; border: 2px solid #aeaeae; - cursor: initial; + cursor: auto; pointer-events: none; } -.ap-container .button--disabled:active, .ap-container .button--disabled:focus, .ap-container .button--disabled:hover { +.button--disabled:active, .button--disabled:focus, .button--disabled:hover { border: 2px solid #aeaeae; background-color: transparent; color: #aeaeae; } -.ap-container .button--disabled:active .button__text, .ap-container .button--disabled:focus .button__text, .ap-container .button--disabled:hover .button__text { +.button--disabled:active .button__text, .button--disabled:focus .button__text, .button--disabled:hover .button__text { text-decoration: none; } -.ap-container .button--disabled .icon, .ap-container .button--disabled:hover .icon { +.button--disabled .icon, .button--disabled .icon--16, .button--disabled .icon--24, .button--disabled:hover .icon, .button--disabled:hover .icon--16, .button--disabled:hover .icon--24 { fill: #aeaeae; } -.ap-container .button--dark.button--disabled { +.button--dark.button--disabled { border-color: #777677; color: #777677; } -.ap-container .button--dark.button--disabled .icon { +.button--dark.button--disabled .icon, .button--dark.button--disabled .icon--16, .button--dark.button--disabled .icon--24 { fill: #777677; } -.ap-container .button--hyperlink { +.button--dark:hover .icon--plus polygon { + fill: #1d3649; } + +.button--dark:hover .icon--plus circle { + fill: #41d6c3; } + +.button--dark:active .icon--plus polygon { + fill: #1d3649; } + +.button--dark:active .icon--plus circle { + fill: #00b4a0; } + +.button--large { + font-size: 1rem; + border-width: 3px; + font-weight: 700; + padding: .625em 1.75em; + height: auto; } + +@media (min-width: 51.44em) { + .button--large { + font-size: 1.125rem; + border-width: 4px; } } + +.button--large .icon { + width: 24px; + height: 24px; } + +.button--hyperlink { border: none; } -.ap-container .button--hyperlink:focus, .ap-container .button--hyperlink:hover { +.button--hyperlink:focus, .button--hyperlink:hover { background: transparent; color: #a6266e; } -.ap-container .button--hyperlink:focus .button__text, .ap-container .button--hyperlink:hover .button__text { +.button--hyperlink:focus .button__text, .button--hyperlink:hover .button__text { border-bottom: 1px solid #a6266e; } -.ap-container .button--hyperlink:focus .icon, .ap-container .button--hyperlink:hover .icon { +.button--hyperlink:focus .icon, .button--hyperlink:focus .icon--24, .button--hyperlink:hover .icon, .button--hyperlink:hover .icon--24 { fill: #a6266e; } -.ap-container .button--hyperlink:active { - color: #db2780; +.button--hyperlink:active { + color: #7c1c58; background: transparent; } -.ap-container .button--hyperlink:active .button__text { - border-color: #db2780; } +.button--hyperlink:active .button__text { + border-color: #7c1c58; } -.ap-container .button--hyperlink:active .icon { - fill: #db2780; } +.button--hyperlink:active .icon, .button--hyperlink:active .icon--24 { + fill: #7c1c58; } -.ap-container .button--hyperlink .icon { +.button--hyperlink .icon, .button--hyperlink .icon--24 { margin-right: .688em; } -.ap-container .button--hyperlink.button--disabled:focus { +.button--hyperlink .icon--plus circle { + fill: transparent; + -webkit-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; } + +.button--hyperlink:hover .icon--plus polygon { + fill: #f9f9fb; + -webkit-transition: all .1s ease-in-out; + transition: all .1s ease-in-out; } + +.button--hyperlink:hover .icon--plus circle { + fill: #a6266e; + -webkit-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; } + +.button--hyperlink:active .icon--plus polygon { + fill: #f9f9fb; + -webkit-transition: all .1s ease-in-out; + transition: all .1s ease-in-out; } + +.button--hyperlink:active .icon--plus circle { + fill: #7c1c58; + -webkit-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; } + +.button--hyperlink.button--disabled:focus { color: #aeaeae; border: 0; } -.ap-container .button--hyperlink.button--dark:focus, .ap-container .button--hyperlink.button--dark:hover { +.button--hyperlink.button--dark:focus, .button--hyperlink.button--dark:hover { color: #41d6c3; } -.ap-container .button--hyperlink.button--dark:focus .button__text, .ap-container .button--hyperlink.button--dark:hover .button__text { +.button--hyperlink.button--dark:focus .button__text, .button--hyperlink.button--dark:hover .button__text { border-bottom: 1px solid #41d6c3; } -.ap-container .button--hyperlink.button--dark:focus .icon, .ap-container .button--hyperlink.button--dark:hover .icon { +.button--hyperlink.button--dark:focus .icon, .button--hyperlink.button--dark:focus .icon--24, .button--hyperlink.button--dark:hover .icon, .button--hyperlink.button--dark:hover .icon--24 { fill: #41d6c3; } -.ap-container .button--hyperlink.button--dark:active { - color: #6eedd8; } +.button--hyperlink.button--dark:active { + color: #00b4a0; } -.ap-container .button--hyperlink.button--dark:active .button__text { - border-color: #6eedd8; } +.button--hyperlink.button--dark:active .button__text { + border-color: #00b4a0; } -.ap-container .button--hyperlink.button--dark:active .icon { - fill: #6eedd8; } +.button--hyperlink.button--dark:active .icon, .button--hyperlink.button--dark:active .icon--24 { + fill: #00b4a0; } -.ap-container .button--hyperlink.button--disabled.button--dark:focus { +.button--hyperlink.button--disabled.button--dark:focus { color: #777677; } -.ap-container .button--back { +.button--hyperlink.button--dark:hover .icon--plus polygon { + fill: #1d3649; + -webkit-transition: all .1s ease-in-out; + transition: all .1s ease-in-out; } + +.button--hyperlink.button--dark:hover .icon--plus circle { + fill: #41d6c3; } + +.button--hyperlink.button--dark:active .icon--plus polygon { + fill: #1d3649; } + +.button--hyperlink.button--dark:active .icon--plus circle { + fill: #00b4a0; + -webkit-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; } + +.button--hyperlink .plus__icon circle { + fill: transparent; + -webkit-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; } + +.button--hyperlink:hover .plus__icon polygon { + fill: #f9f9fb; + -webkit-transition: all .1s ease-in-out; + transition: all .1s ease-in-out; } + +.button--hyperlink:hover .plus__icon circle { + fill: #a6266e; + -webkit-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; } + +.button--hyperlink:active .plus__icon polygon { + fill: #f9f9fb; + -webkit-transition: all .1s ease-in-out; + transition: all .1s ease-in-out; } + +.button--hyperlink:active .plus__icon circle { + fill: #7c1c58; + -webkit-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; } + +.button--dark:hover .plus__icon polygon { + fill: #1d3649; } + +.button--dark:hover .plus__icon circle { + fill: #41d6c3; } + +.button--dark:active .plus__icon polygon { + fill: #1d3649; } + +.button--dark:active .plus__icon circle { + fill: #00b4a0; } + +.button--back { color: #1d3649; font-weight: 400; padding: 0; } -.ap-container .button--back:focus, .ap-container .button--back:hover { +.button--back:focus, .button--back:hover { background: transparent; color: #a6266e; } -.ap-container .button--back:focus .icon circle, .ap-container .button--back:focus .icon path, .ap-container .button--back:hover .icon circle, .ap-container .button--back:hover .icon path { +.button--back:focus .icon--back circle, .button--back:focus .icon--back path, .button--back:focus .icon circle, .button--back:focus .icon path, .button--back:hover .icon--back circle, .button--back:hover .icon--back path, .button--back:hover .icon circle, .button--back:hover .icon path { fill: #a6266e; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } -.ap-container .button--back:focus .icon polygon, .ap-container .button--back:hover .icon polygon { +.button--back:focus .icon--back polygon, .button--back:focus .icon polygon, .button--back:hover .icon--back polygon, .button--back:hover .icon polygon { fill: #fff; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; } -.ap-container .button--back:active { - color: #db2780; +.button--back:active { + color: #7c1c58; background: transparent; } -.ap-container .button--back:active .icon circle, .ap-container .button--back:active .icon path { - fill: #db2780; +.button--back:active .icon--back circle, .button--back:active .icon--back path, .button--back:active .icon circle, .button--back:active .icon path { + fill: #7c1c58; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } -.ap-container .button--back:active .icon polygon { +.button--back:active .icon--back polygon, .button--back:active .icon polygon { fill: #fff; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; } -.ap-container .button--back .icon { - margin-right: 6px; - top: 3px; } +.button--back .icon, .button--back .icon--back { + margin-right: 9px; + margin-left: 0; } + +.button--back .icon--back path, .button--back .icon--back polygon { + fill: #a6266e; } -.ap-container .button--back.button--large { - font-size: 1.563em; +.button--back.button--large { + font-size: 1.563rem; font-weight: 300; } -.ap-container .button--back.button--dark { +.button--back.button--large .icon--back { + margin-right: 6px; + position: relative; + top: 6px; } + +.button--back.button--dark { color: #f9f9fb; } -.ap-container .button--back.button--dark .icon { +.button--back.button--dark .icon, .button--back.button--dark .icon--back, .button--back.button--dark .icon--back path, .button--back.button--dark .icon--back polygon, .button--back.button--dark .icon path, .button--back.button--dark .icon polygon { fill: #41d6c3; } -.ap-container .button--back.button--dark:focus, .ap-container .button--back.button--dark:focus .icon, .ap-container .button--back.button--dark:hover, .ap-container .button--back.button--dark:hover .icon { +.button--back.button--dark:focus, .button--back.button--dark:focus .icon, .button--back.button--dark:focus .icon--back, .button--back.button--dark:hover, .button--back.button--dark:hover .icon, .button--back.button--dark:hover .icon--back { color: #41d6c3; } -.ap-container .button--back.button--dark:focus .icon circle, .ap-container .button--back.button--dark:focus .icon path, .ap-container .button--back.button--dark:hover .icon circle, .ap-container .button--back.button--dark:hover .icon path { +.button--back.button--dark:focus .icon--back circle, .button--back.button--dark:focus .icon--back path, .button--back.button--dark:focus .icon circle, .button--back.button--dark:focus .icon path, .button--back.button--dark:hover .icon--back circle, .button--back.button--dark:hover .icon--back path, .button--back.button--dark:hover .icon circle, .button--back.button--dark:hover .icon path { fill: #41d6c3; } -.ap-container .button--back.button--dark:focus .icon polygon, .ap-container .button--back.button--dark:hover .icon polygon { +.button--back.button--dark:focus .icon--back polygon, .button--back.button--dark:focus .icon polygon, .button--back.button--dark:hover .icon--back polygon, .button--back.button--dark:hover .icon polygon { fill: #1d3649; } -.ap-container .button--back.button--dark:active, .ap-container .button--back.button--dark:active .icon { - color: #6eedd8; } +.button--back.button--dark:active, .button--back.button--dark:active .icon, .button--back.button--dark:active .icon--back { + color: #00b4a0; } -.ap-container .button--back.button--dark:active .icon circle, .ap-container .button--back.button--dark:active .icon path { - fill: #6eedd8; +.button--back.button--dark:active .icon--back circle, .button--back.button--dark:active .icon--back path, .button--back.button--dark:active .icon circle, .button--back.button--dark:active .icon path { + fill: #00b4a0; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } -.ap-container .button--back.button--dark:active .icon polygon { +.button--back.button--dark:active .icon--back polygon, .button--back.button--dark:active .icon polygon { fill: #1d3649; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; } -.ap-container .checkbox--base, .ap-container .checkbox--dark, .ap-container .checkbox--dark--indeterminate, .ap-container .checkbox--dark[type=checkbox][disabled], .ap-container .checkbox--light, .ap-container .checkbox--light--indeterminate, .ap-container .checkbox--light[type=checkbox][disabled] { +.checkbox--base, .checkbox--dark, .checkbox--dark--indeterminate, .checkbox--dark[type=checkbox][disabled], .checkbox--light, .checkbox--light--indeterminate, .checkbox--light[type=checkbox][disabled] { position: absolute; opacity: 0; background: transparent; } -.ap-container .checkbox--base + label, .ap-container .checkbox--dark + label, .ap-container .checkbox--dark--indeterminate + label, .ap-container .checkbox--dark[type=checkbox][disabled] + label, .ap-container .checkbox--light + label, .ap-container .checkbox--light--indeterminate + label, .ap-container .checkbox--light[type=checkbox][disabled] + label { +.checkbox--base + label, .checkbox--dark + label, .checkbox--dark--indeterminate + label, .checkbox--dark[type=checkbox][disabled] + label, .checkbox--light + label, .checkbox--light--indeterminate + label, .checkbox--light[type=checkbox][disabled] + label { position: relative; padding-left: 31px; cursor: pointer; color: #152935; display: inline-block; } -.ap-container .checkbox--base + label:before, .ap-container .checkbox--dark + label:before, .ap-container .checkbox--dark--indeterminate + label:before, .ap-container .checkbox--dark[type=checkbox][disabled] + label:before, .ap-container .checkbox--light + label:before, .ap-container .checkbox--light--indeterminate + label:before, .ap-container .checkbox--light[type=checkbox][disabled] + label:before { +.checkbox--base + label:before, .checkbox--dark + label:before, .checkbox--dark--indeterminate + label:before, .checkbox--dark[type=checkbox][disabled] + label:before, .checkbox--light + label:before, .checkbox--light--indeterminate + label:before, .checkbox--light[type=checkbox][disabled] + label:before { content: ''; position: absolute; left: 0; @@ -1050,19 +1247,19 @@ td, th { background: transparent; border-radius: 0; } -.ap-container .checkbox--base + label:hover:before, .ap-container .checkbox--dark + label:hover:before, .ap-container .checkbox--dark--indeterminate + label:hover:before, .ap-container .checkbox--dark[type=checkbox][disabled] + label:hover:before, .ap-container .checkbox--light + label:hover:before, .ap-container .checkbox--light--indeterminate + label:hover:before, .ap-container .checkbox--light[type=checkbox][disabled] + label:hover:before { +.checkbox--base + label:hover:before, .checkbox--dark + label:hover:before, .checkbox--dark--indeterminate + label:hover:before, .checkbox--dark[type=checkbox][disabled] + label:hover:before, .checkbox--light + label:hover:before, .checkbox--light--indeterminate + label:hover:before, .checkbox--light[type=checkbox][disabled] + label:hover:before { background: #e0e0e0; } -.ap-container .checkbox--base:checked + label:b:efore, .ap-container .checkbox--dark--indeterminate:checked + label:b:efore, .ap-container .checkbox--dark:checked + label:b:efore, .ap-container .checkbox--light--indeterminate:checked + label:b:efore, .ap-container .checkbox--light:checked + label:b:efore { +.checkbox--base:checked + label:before, .checkbox--dark--indeterminate:checked + label:before, .checkbox--dark:checked + label:before, .checkbox--dark[type=checkbox][disabled]:checked + label:before, .checkbox--light--indeterminate:checked + label:before, .checkbox--light:checked + label:before, .checkbox--light[type=checkbox][disabled]:checked + label:before { background: #a6266e; border: 0 solid #1d3649; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } -.ap-container .checkbox--base:checked + label:hover:before, .ap-container .checkbox--dark--indeterminate:checked + label:hover:before, .ap-container .checkbox--dark:checked + label:hover:before, .ap-container .checkbox--light--indeterminate:checked + label:hover:before, .ap-container .checkbox--light:checked + label:hover:before { +.checkbox--base:checked + label:hover:before, .checkbox--dark--indeterminate:checked + label:hover:before, .checkbox--dark:checked + label:hover:before, .checkbox--light--indeterminate:checked + label:hover:before, .checkbox--light:checked + label:hover:before { background: #db2780; } -.ap-container .checkbox--base + label:after, .ap-container .checkbox--dark + label:after, .ap-container .checkbox--dark--indeterminate + label:after, .ap-container .checkbox--dark[type=checkbox][disabled] + label:after, .ap-container .checkbox--light + label:after, .ap-container .checkbox--light--indeterminate + label:after, .ap-container .checkbox--light[type=checkbox][disabled] + label:after { +.checkbox--base + label:after, .checkbox--dark + label:after, .checkbox--dark--indeterminate + label:after, .checkbox--dark[type=checkbox][disabled] + label:after, .checkbox--light + label:after, .checkbox--light--indeterminate + label:after, .checkbox--light[type=checkbox][disabled] + label:after { content: ''; width: 8px; height: 5px; @@ -1077,138 +1274,154 @@ td, th { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } -.ap-container .checkbox--base:checked + label:after, .ap-container .checkbox--dark--indeterminate:checked + label:after, .ap-container .checkbox--dark:checked + label:after, .ap-container .checkbox--dark[type=checkbox][disabled]:checked + label:after, .ap-container .checkbox--light--indeterminate:checked + label:after, .ap-container .checkbox--light:checked + label:after, .ap-container .checkbox--light[type=checkbox][disabled]:checked + label:after { +.checkbox--base:checked + label:after, .checkbox--dark--indeterminate:checked + label:after, .checkbox--dark:checked + label:after, .checkbox--dark[type=checkbox][disabled]:checked + label:after, .checkbox--light--indeterminate:checked + label:after, .checkbox--light:checked + label:after, .checkbox--light[type=checkbox][disabled]:checked + label:after { opacity: 1; -webkit-transform: scale(1) rotate(-45deg); transform: scale(1) rotate(-45deg); } -.ap-container .checkbox--base:not(:checked) + label:after, .ap-container .checkbox--dark--indeterminate:not(:checked) + label:after, .ap-container .checkbox--dark:not(:checked) + label:after, .ap-container .checkbox--dark[type=checkbox][disabled]:not(:checked) + label:after, .ap-container .checkbox--light--indeterminate:not(:checked) + label:after, .ap-container .checkbox--light:not(:checked) + label:after, .ap-container .checkbox--light[type=checkbox][disabled]:not(:checked) + label:after { +.checkbox--base:not(:checked) + label:after, .checkbox--dark--indeterminate:not(:checked) + label:after, .checkbox--dark:not(:checked) + label:after, .checkbox--dark[type=checkbox][disabled]:not(:checked) + label:after, .checkbox--light--indeterminate:not(:checked) + label:after, .checkbox--light:not(:checked) + label:after, .checkbox--light[type=checkbox][disabled]:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0) rotate(-45deg); transform: scale(0) rotate(-45deg); } -.ap-container .checkbox--base:focus + label:before, .ap-container .checkbox--dark--indeterminate:focus + label:before, .ap-container .checkbox--dark:focus + label:before, .ap-container .checkbox--dark[type=checkbox][disabled]:focus + label:before, .ap-container .checkbox--light--indeterminate:focus + label:before, .ap-container .checkbox--light:focus + label:before, .ap-container .checkbox--light[type=checkbox][disabled]:focus + label:before { +.checkbox--base:focus + label:before, .checkbox--dark--indeterminate:focus + label:before, .checkbox--dark:focus + label:before, .checkbox--dark[type=checkbox][disabled]:focus + label:before, .checkbox--light--indeterminate:focus + label:before, .checkbox--light:focus + label:before, .checkbox--light[type=checkbox][disabled]:focus + label:before { outline-color: rgba(77, 144, 254, 0.5); outline-offset: -2px; outline-style: auto; outline-width: 5px; } -.ap-container _::-moz-range-track, .ap-container body:last-child .checkbox--base:focus + label:before, .ap-container body:last-child .checkbox--dark--indeterminate:focus + label:before, .ap-container body:last-child .checkbox--dark:focus + label:before, .ap-container body:last-child .checkbox--light--indeterminate:focus + label:before, .ap-container body:last-child .checkbox--light:focus + label:before { +_::-moz-range-track, body:last-child .checkbox--base:focus + label:before, body:last-child .checkbox--dark--indeterminate:focus + label:before, body:last-child .checkbox--dark:focus + label:before, body:last-child .checkbox--light--indeterminate:focus + label:before, body:last-child .checkbox--light:focus + label:before { outline-style: solid; -moz-outline-radius: 2px; outline-width: 4px; outline-color: rgba(77, 144, 254, 0.5); } -.ap-container .checkbox--light--indeterminate + label:after { +.checkbox--light--indeterminate + label:after { border-left: 0 solid #f9f9fb; border-bottom: 2px solid #f9f9fb; } -.ap-container .checkbox--light--indeterminate:checked + label:after { +.checkbox--light--indeterminate:checked + label:after { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } -.ap-container .checkbox--light--indeterminate:not(:checked) + label:after { +.checkbox--light--indeterminate:not(:checked) + label:after { -webkit-transform: scale(0) rotate(0deg); transform: scale(0) rotate(0deg); } -.ap-container [type=checkbox][disabled].checkbox--light + label { +[type=checkbox][disabled].checkbox--light + label { color: #aeaeae; } -.ap-container [type=checkbox][disabled].checkbox--light + label:before { +[type=checkbox][disabled].checkbox--light + label:before { border: 1px solid #aeaeae; } -.ap-container [type=checkbox][disabled].checkbox--light:checked + label:before { +[type=checkbox][disabled].checkbox--light:checked + label:before { background: #aeaeae; } -.ap-container .checkbox--dark + label, .ap-container .checkbox--dark[type=checkbox][disabled] + label { +.checkbox--dark + label, .checkbox--dark[type=checkbox][disabled] + label { color: #fff; } -.ap-container .checkbox--dark + label:before, .ap-container .checkbox--dark[type=checkbox][disabled] + label:before { +.checkbox--dark + label:before, .checkbox--dark[type=checkbox][disabled] + label:before { border: 1px solid #f9f9fb; } -.ap-container .checkbox--dark + label:hover:before, .ap-container .checkbox--dark[type=checkbox][disabled] + label:hover:before { +.checkbox--dark + label:hover:before, .checkbox--dark[type=checkbox][disabled] + label:hover:before { background: rgba(255, 255, 255, 0.25); } -.ap-container .checkbox--dark:checked + label:before, .ap-container .checkbox--dark[type=checkbox][disabled]:checked + label:before { +.checkbox--dark:checked + label:before, .checkbox--dark[type=checkbox][disabled]:checked + label:before { background: #41d6c3; } -.ap-container .checkbox--dark:checked + label:hover:before { +.checkbox--dark:checked + label:hover:before { background-color: #6eedd8; } -.ap-container .checkbox--dark + label:after, .ap-container .checkbox--dark[type=checkbox][disabled] + label:after { +.checkbox--dark + label:after, .checkbox--dark[type=checkbox][disabled] + label:after { border-color: #152935; } -.ap-container .checkbox--dark--indeterminate + label { +.checkbox--dark--indeterminate + label { color: #fff; } -.ap-container .checkbox--dark--indeterminate + label:before { +.checkbox--dark--indeterminate + label:before { border: 1px solid #f9f9fb; } -.ap-container .checkbox--dark--indeterminate + label:hover:before { +.checkbox--dark--indeterminate + label:hover:before { background: rgba(255, 255, 255, 0.25); } -.ap-container .checkbox--dark--indeterminate:checked + label:before { +.checkbox--dark--indeterminate:checked + label:before { background: #41d6c3; } -.ap-container .checkbox--dark--indeterminate:checked + label:hover:before { +.checkbox--dark--indeterminate:checked + label:hover:before { background-color: #6eedd8; } -.ap-container .checkbox--dark--indeterminate + label:after { +.checkbox--dark--indeterminate + label:after { border-left: 0 solid #152935; border-bottom: 2px solid #152935; } -.ap-container .checkbox--dark--indeterminate:checked + label:after { +.checkbox--dark--indeterminate:checked + label:after { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } -.ap-container .checkbox--dark--indeterminate:not(:checked) + label:after { +.checkbox--dark--indeterminate:not(:checked) + label:after { -webkit-transform: scale(0) rotate(0deg); transform: scale(0) rotate(0deg); } -.ap-container [type=checkbox][disabled].checkbox--dark + label { +[type=checkbox][disabled].checkbox--dark + label { color: #777677; } -.ap-container [type=checkbox][disabled].checkbox--dark + label:before { +[type=checkbox][disabled].checkbox--dark + label:before { border: 1px solid #777677; } -.ap-container [type=checkbox][disabled].checkbox--dark:checked + label:before { +[type=checkbox][disabled].checkbox--dark:checked + label:before { background: #777677; } -.ap-container .icon { - width: 20px; - height: 20px; } +.icon--16 { + width: 16px; + height: 16px; } + +.icon--24 { + width: 24px; + height: 24px; } + +.icon--32 { + width: 32px; + height: 32px; } + +.icon--64 { + width: 24px; + height: 24px; } + +.icon--128 { + width: 128px; + height: 128px; } -.ap-container .icon__close { +.icon--close { cursor: pointer; border: none; background-color: transparent; padding: 0; } -.ap-container .icon__close circle, .ap-container .icon__close path { +.icon--close circle, .icon--close path { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } -.ap-container .icon__close polygon { +.icon--close .icon--close-x { -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; fill: #a6266e; } -.ap-container .icon__close path { +.icon--close path { fill: #a6266e; } -.ap-container .icon__close:hover polygon { +.icon--close:hover .icon--close-x { fill: #fff; } -.ap-container .icon__close:hover circle { +.icon--close:hover circle { fill: #a6266e; } -.ap-container .icon__close:active circle, .ap-container .icon__close:active path { +.icon--close:active circle, .icon--close:active path { fill: #db2780; } -.ap-container .icon__close:active polygon { +.icon--close:active .icon--close-x { fill: #fff; } -.ap-container .label__text--dark, .ap-container .label__text--light { +.label__text--dark, .label__text--light { display: block; padding: 16px 0 0; position: absolute; @@ -1216,37 +1429,37 @@ td, th { font-weight: 500; margin-top: 9px; } -.ap-container .label__text--dark.active-label, .ap-container .label__text--light.active-label { +.label__text--dark.active-label, .label__text--light.active-label { visibility: visible; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; margin-top: -11px; } -.form-boxed .ap-container .label__text--dark, .form-boxed .ap-container .label__text--light { +.form-boxed .label__text--dark, .form-boxed .label__text--light { visibility: visible; } -.ap-container .label__text--light { +.label__text--light { color: #1d3649; } -.ap-container .label__text--light.inactive-label { +.label__text--light.inactive-label { color: #5a5a5a; } -.ap-container .label__text--dark { +.label__text--dark { color: #f9f9fb; } -.ap-container .label__text--dark.inactive-label { +.label__text--dark.inactive-label { color: #c7c7c7; } -.ap-container .label__checkbox--dark, .ap-container .label__checkbox--light, .ap-container .label__radio--dark, .ap-container .label__radio--light { +.label__checkbox--dark, .label__checkbox--light, .label__radio--dark, .label__radio--light { margin-right: 30px; } -.ap-container .label__form--dark, .ap-container .label__form--light { +.label__form--dark, .label__form--light { display: block; font-weight: 500; padding-bottom: .3em; color: #1d3649; } -.ap-container .label__form--dark { +.label__form--dark { color: #f9f9fb; } @-webkit-keyframes a { @@ -1287,15 +1500,15 @@ td, th { -webkit-transform: rotate(2100deg); transform: rotate(2100deg); } } -.ap-container .large { +.large { width: 90px; height: 90px; } -.ap-container .small { +.small { width: 45px; height: 45px; } -.ap-container .loader { +.loader { height: 100%; width: 100%; -webkit-transform: translateZ(0) rotate(300deg); @@ -1305,7 +1518,7 @@ td, th { -webkit-animation: b 4s ease-out infinite; animation: b 4s ease-out infinite; } -.ap-container .loader .loader__path { +.loader .loader__path { stroke-dasharray: 125px; stroke-dashoffset: 9.7px; r: 20px; @@ -1320,416 +1533,416 @@ td, th { -webkit-animation: a 4s ease-out infinite; animation: a 4s ease-out infinite; } -.ap-container .determinate { +.determinate { -webkit-transform: translateZ(0) rotate(-90deg); transform: translateZ(0) rotate(-90deg); -webkit-animation: none; animation: none; } -.ap-container .determinate .loader__path { +.determinate .loader__path { stroke-dasharray: 126; stroke-dashoffset: 126; -webkit-animation: none; animation: none; } -.ap-container .loader--dark .loader__path { +.loader--dark .loader__path { stroke: #41d6c3; } -.ap-container .ibm-spinner-determinate[data-percent='100'] .loader__path { +.ibm-spinner-determinate[data-percent='100'] .loader__path { stroke-dashoffset: 0; } -.ap-container .ibm-spinner-determinate[data-percent='99'] .loader__path { +.ibm-spinner-determinate[data-percent='99'] .loader__path { stroke-dashoffset: 1.26; } -.ap-container .ibm-spinner-determinate[data-percent='98'] .loader__path { +.ibm-spinner-determinate[data-percent='98'] .loader__path { stroke-dashoffset: 2.52; } -.ap-container .ibm-spinner-determinate[data-percent='97'] .loader__path { +.ibm-spinner-determinate[data-percent='97'] .loader__path { stroke-dashoffset: 3.78; } -.ap-container .ibm-spinner-determinate[data-percent='96'] .loader__path { +.ibm-spinner-determinate[data-percent='96'] .loader__path { stroke-dashoffset: 5.04; } -.ap-container .ibm-spinner-determinate[data-percent='95'] .loader__path { +.ibm-spinner-determinate[data-percent='95'] .loader__path { stroke-dashoffset: 6.3; } -.ap-container .ibm-spinner-determinate[data-percent='94'] .loader__path { +.ibm-spinner-determinate[data-percent='94'] .loader__path { stroke-dashoffset: 7.56; } -.ap-container .ibm-spinner-determinate[data-percent='93'] .loader__path { +.ibm-spinner-determinate[data-percent='93'] .loader__path { stroke-dashoffset: 8.82; } -.ap-container .ibm-spinner-determinate[data-percent='92'] .loader__path { +.ibm-spinner-determinate[data-percent='92'] .loader__path { stroke-dashoffset: 10.08; } -.ap-container .ibm-spinner-determinate[data-percent='91'] .loader__path { +.ibm-spinner-determinate[data-percent='91'] .loader__path { stroke-dashoffset: 11.34; } -.ap-container .ibm-spinner-determinate[data-percent='90'] .loader__path { +.ibm-spinner-determinate[data-percent='90'] .loader__path { stroke-dashoffset: 12.6; } -.ap-container .ibm-spinner-determinate[data-percent='89'] .loader__path { +.ibm-spinner-determinate[data-percent='89'] .loader__path { stroke-dashoffset: 13.86; } -.ap-container .ibm-spinner-determinate[data-percent='88'] .loader__path { +.ibm-spinner-determinate[data-percent='88'] .loader__path { stroke-dashoffset: 15.12; } -.ap-container .ibm-spinner-determinate[data-percent='87'] .loader__path { +.ibm-spinner-determinate[data-percent='87'] .loader__path { stroke-dashoffset: 16.38; } -.ap-container .ibm-spinner-determinate[data-percent='86'] .loader__path { +.ibm-spinner-determinate[data-percent='86'] .loader__path { stroke-dashoffset: 17.64; } -.ap-container .ibm-spinner-determinate[data-percent='85'] .loader__path { +.ibm-spinner-determinate[data-percent='85'] .loader__path { stroke-dashoffset: 18.9; } -.ap-container .ibm-spinner-determinate[data-percent='84'] .loader__path { +.ibm-spinner-determinate[data-percent='84'] .loader__path { stroke-dashoffset: 20.16; } -.ap-container .ibm-spinner-determinate[data-percent='83'] .loader__path { +.ibm-spinner-determinate[data-percent='83'] .loader__path { stroke-dashoffset: 21.42; } -.ap-container .ibm-spinner-determinate[data-percent='82'] .loader__path { +.ibm-spinner-determinate[data-percent='82'] .loader__path { stroke-dashoffset: 22.68; } -.ap-container .ibm-spinner-determinate[data-percent='81'] .loader__path { +.ibm-spinner-determinate[data-percent='81'] .loader__path { stroke-dashoffset: 23.94; } -.ap-container .ibm-spinner-determinate[data-percent='80'] .loader__path { +.ibm-spinner-determinate[data-percent='80'] .loader__path { stroke-dashoffset: 25.2; } -.ap-container .ibm-spinner-determinate[data-percent='79'] .loader__path { +.ibm-spinner-determinate[data-percent='79'] .loader__path { stroke-dashoffset: 26.46; } -.ap-container .ibm-spinner-determinate[data-percent='78'] .loader__path { +.ibm-spinner-determinate[data-percent='78'] .loader__path { stroke-dashoffset: 27.72; } -.ap-container .ibm-spinner-determinate[data-percent='77'] .loader__path { +.ibm-spinner-determinate[data-percent='77'] .loader__path { stroke-dashoffset: 28.98; } -.ap-container .ibm-spinner-determinate[data-percent='76'] .loader__path { +.ibm-spinner-determinate[data-percent='76'] .loader__path { stroke-dashoffset: 30.24; } -.ap-container .ibm-spinner-determinate[data-percent='75'] .loader__path { +.ibm-spinner-determinate[data-percent='75'] .loader__path { stroke-dashoffset: 31.5; } -.ap-container .ibm-spinner-determinate[data-percent='74'] .loader__path { +.ibm-spinner-determinate[data-percent='74'] .loader__path { stroke-dashoffset: 32.76; } -.ap-container .ibm-spinner-determinate[data-percent='73'] .loader__path { +.ibm-spinner-determinate[data-percent='73'] .loader__path { stroke-dashoffset: 34.02; } -.ap-container .ibm-spinner-determinate[data-percent='72'] .loader__path { +.ibm-spinner-determinate[data-percent='72'] .loader__path { stroke-dashoffset: 35.28; } -.ap-container .ibm-spinner-determinate[data-percent='71'] .loader__path { +.ibm-spinner-determinate[data-percent='71'] .loader__path { stroke-dashoffset: 36.54; } -.ap-container .ibm-spinner-determinate[data-percent='70'] .loader__path { +.ibm-spinner-determinate[data-percent='70'] .loader__path { stroke-dashoffset: 37.8; } -.ap-container .ibm-spinner-determinate[data-percent='69'] .loader__path { +.ibm-spinner-determinate[data-percent='69'] .loader__path { stroke-dashoffset: 39.06; } -.ap-container .ibm-spinner-determinate[data-percent='68'] .loader__path { +.ibm-spinner-determinate[data-percent='68'] .loader__path { stroke-dashoffset: 40.32; } -.ap-container .ibm-spinner-determinate[data-percent='67'] .loader__path { +.ibm-spinner-determinate[data-percent='67'] .loader__path { stroke-dashoffset: 41.58; } -.ap-container .ibm-spinner-determinate[data-percent='66'] .loader__path { +.ibm-spinner-determinate[data-percent='66'] .loader__path { stroke-dashoffset: 42.84; } -.ap-container .ibm-spinner-determinate[data-percent='65'] .loader__path { +.ibm-spinner-determinate[data-percent='65'] .loader__path { stroke-dashoffset: 44.1; } -.ap-container .ibm-spinner-determinate[data-percent='64'] .loader__path { +.ibm-spinner-determinate[data-percent='64'] .loader__path { stroke-dashoffset: 45.36; } -.ap-container .ibm-spinner-determinate[data-percent='63'] .loader__path { +.ibm-spinner-determinate[data-percent='63'] .loader__path { stroke-dashoffset: 46.62; } -.ap-container .ibm-spinner-determinate[data-percent='62'] .loader__path { +.ibm-spinner-determinate[data-percent='62'] .loader__path { stroke-dashoffset: 47.88; } -.ap-container .ibm-spinner-determinate[data-percent='61'] .loader__path { +.ibm-spinner-determinate[data-percent='61'] .loader__path { stroke-dashoffset: 49.14; } -.ap-container .ibm-spinner-determinate[data-percent='60'] .loader__path { +.ibm-spinner-determinate[data-percent='60'] .loader__path { stroke-dashoffset: 50.4; } -.ap-container .ibm-spinner-determinate[data-percent='59'] .loader__path { +.ibm-spinner-determinate[data-percent='59'] .loader__path { stroke-dashoffset: 51.66; } -.ap-container .ibm-spinner-determinate[data-percent='58'] .loader__path { +.ibm-spinner-determinate[data-percent='58'] .loader__path { stroke-dashoffset: 52.92; } -.ap-container .ibm-spinner-determinate[data-percent='57'] .loader__path { +.ibm-spinner-determinate[data-percent='57'] .loader__path { stroke-dashoffset: 54.18; } -.ap-container .ibm-spinner-determinate[data-percent='56'] .loader__path { +.ibm-spinner-determinate[data-percent='56'] .loader__path { stroke-dashoffset: 55.44; } -.ap-container .ibm-spinner-determinate[data-percent='55'] .loader__path { +.ibm-spinner-determinate[data-percent='55'] .loader__path { stroke-dashoffset: 56.7; } -.ap-container .ibm-spinner-determinate[data-percent='54'] .loader__path { +.ibm-spinner-determinate[data-percent='54'] .loader__path { stroke-dashoffset: 57.96; } -.ap-container .ibm-spinner-determinate[data-percent='53'] .loader__path { +.ibm-spinner-determinate[data-percent='53'] .loader__path { stroke-dashoffset: 59.22; } -.ap-container .ibm-spinner-determinate[data-percent='52'] .loader__path { +.ibm-spinner-determinate[data-percent='52'] .loader__path { stroke-dashoffset: 60.48; } -.ap-container .ibm-spinner-determinate[data-percent='51'] .loader__path { +.ibm-spinner-determinate[data-percent='51'] .loader__path { stroke-dashoffset: 61.74; } -.ap-container .ibm-spinner-determinate[data-percent='50'] .loader__path { +.ibm-spinner-determinate[data-percent='50'] .loader__path { stroke-dashoffset: 63; } -.ap-container .ibm-spinner-determinate[data-percent='49'] .loader__path { +.ibm-spinner-determinate[data-percent='49'] .loader__path { stroke-dashoffset: 64.26; } -.ap-container .ibm-spinner-determinate[data-percent='48'] .loader__path { +.ibm-spinner-determinate[data-percent='48'] .loader__path { stroke-dashoffset: 65.52; } -.ap-container .ibm-spinner-determinate[data-percent='47'] .loader__path { +.ibm-spinner-determinate[data-percent='47'] .loader__path { stroke-dashoffset: 66.78; } -.ap-container .ibm-spinner-determinate[data-percent='46'] .loader__path { +.ibm-spinner-determinate[data-percent='46'] .loader__path { stroke-dashoffset: 68.04; } -.ap-container .ibm-spinner-determinate[data-percent='45'] .loader__path { +.ibm-spinner-determinate[data-percent='45'] .loader__path { stroke-dashoffset: 69.3; } -.ap-container .ibm-spinner-determinate[data-percent='44'] .loader__path { +.ibm-spinner-determinate[data-percent='44'] .loader__path { stroke-dashoffset: 70.56; } -.ap-container .ibm-spinner-determinate[data-percent='43'] .loader__path { +.ibm-spinner-determinate[data-percent='43'] .loader__path { stroke-dashoffset: 71.82; } -.ap-container .ibm-spinner-determinate[data-percent='42'] .loader__path { +.ibm-spinner-determinate[data-percent='42'] .loader__path { stroke-dashoffset: 73.08; } -.ap-container .ibm-spinner-determinate[data-percent='41'] .loader__path { +.ibm-spinner-determinate[data-percent='41'] .loader__path { stroke-dashoffset: 74.34; } -.ap-container .ibm-spinner-determinate[data-percent='40'] .loader__path { +.ibm-spinner-determinate[data-percent='40'] .loader__path { stroke-dashoffset: 75.6; } -.ap-container .ibm-spinner-determinate[data-percent='39'] .loader__path { +.ibm-spinner-determinate[data-percent='39'] .loader__path { stroke-dashoffset: 76.86; } -.ap-container .ibm-spinner-determinate[data-percent='38'] .loader__path { +.ibm-spinner-determinate[data-percent='38'] .loader__path { stroke-dashoffset: 78.12; } -.ap-container .ibm-spinner-determinate[data-percent='37'] .loader__path { +.ibm-spinner-determinate[data-percent='37'] .loader__path { stroke-dashoffset: 79.38; } -.ap-container .ibm-spinner-determinate[data-percent='36'] .loader__path { +.ibm-spinner-determinate[data-percent='36'] .loader__path { stroke-dashoffset: 80.64; } -.ap-container .ibm-spinner-determinate[data-percent='35'] .loader__path { +.ibm-spinner-determinate[data-percent='35'] .loader__path { stroke-dashoffset: 81.9; } -.ap-container .ibm-spinner-determinate[data-percent='34'] .loader__path { +.ibm-spinner-determinate[data-percent='34'] .loader__path { stroke-dashoffset: 83.16; } -.ap-container .ibm-spinner-determinate[data-percent='33'] .loader__path { +.ibm-spinner-determinate[data-percent='33'] .loader__path { stroke-dashoffset: 84.42; } -.ap-container .ibm-spinner-determinate[data-percent='32'] .loader__path { +.ibm-spinner-determinate[data-percent='32'] .loader__path { stroke-dashoffset: 85.68; } -.ap-container .ibm-spinner-determinate[data-percent='31'] .loader__path { +.ibm-spinner-determinate[data-percent='31'] .loader__path { stroke-dashoffset: 86.94; } -.ap-container .ibm-spinner-determinate[data-percent='30'] .loader__path { +.ibm-spinner-determinate[data-percent='30'] .loader__path { stroke-dashoffset: 88.2; } -.ap-container .ibm-spinner-determinate[data-percent='29'] .loader__path { +.ibm-spinner-determinate[data-percent='29'] .loader__path { stroke-dashoffset: 89.46; } -.ap-container .ibm-spinner-determinate[data-percent='28'] .loader__path { +.ibm-spinner-determinate[data-percent='28'] .loader__path { stroke-dashoffset: 90.72; } -.ap-container .ibm-spinner-determinate[data-percent='27'] .loader__path { +.ibm-spinner-determinate[data-percent='27'] .loader__path { stroke-dashoffset: 91.98; } -.ap-container .ibm-spinner-determinate[data-percent='26'] .loader__path { +.ibm-spinner-determinate[data-percent='26'] .loader__path { stroke-dashoffset: 93.24; } -.ap-container .ibm-spinner-determinate[data-percent='25'] .loader__path { +.ibm-spinner-determinate[data-percent='25'] .loader__path { stroke-dashoffset: 94.5; } -.ap-container .ibm-spinner-determinate[data-percent='24'] .loader__path { +.ibm-spinner-determinate[data-percent='24'] .loader__path { stroke-dashoffset: 95.76; } -.ap-container .ibm-spinner-determinate[data-percent='23'] .loader__path { +.ibm-spinner-determinate[data-percent='23'] .loader__path { stroke-dashoffset: 97.02; } -.ap-container .ibm-spinner-determinate[data-percent='22'] .loader__path { +.ibm-spinner-determinate[data-percent='22'] .loader__path { stroke-dashoffset: 98.28; } -.ap-container .ibm-spinner-determinate[data-percent='21'] .loader__path { +.ibm-spinner-determinate[data-percent='21'] .loader__path { stroke-dashoffset: 99.54; } -.ap-container .ibm-spinner-determinate[data-percent='20'] .loader__path { +.ibm-spinner-determinate[data-percent='20'] .loader__path { stroke-dashoffset: 100.8; } -.ap-container .ibm-spinner-determinate[data-percent='19'] .loader__path { +.ibm-spinner-determinate[data-percent='19'] .loader__path { stroke-dashoffset: 102.06; } -.ap-container .ibm-spinner-determinate[data-percent='18'] .loader__path { +.ibm-spinner-determinate[data-percent='18'] .loader__path { stroke-dashoffset: 103.32; } -.ap-container .ibm-spinner-determinate[data-percent='17'] .loader__path { +.ibm-spinner-determinate[data-percent='17'] .loader__path { stroke-dashoffset: 104.58; } -.ap-container .ibm-spinner-determinate[data-percent='16'] .loader__path { +.ibm-spinner-determinate[data-percent='16'] .loader__path { stroke-dashoffset: 105.84; } -.ap-container .ibm-spinner-determinate[data-percent='15'] .loader__path { +.ibm-spinner-determinate[data-percent='15'] .loader__path { stroke-dashoffset: 107.1; } -.ap-container .ibm-spinner-determinate[data-percent='14'] .loader__path { +.ibm-spinner-determinate[data-percent='14'] .loader__path { stroke-dashoffset: 108.36; } -.ap-container .ibm-spinner-determinate[data-percent='13'] .loader__path { +.ibm-spinner-determinate[data-percent='13'] .loader__path { stroke-dashoffset: 109.62; } -.ap-container .ibm-spinner-determinate[data-percent='12'] .loader__path { +.ibm-spinner-determinate[data-percent='12'] .loader__path { stroke-dashoffset: 110.88; } -.ap-container .ibm-spinner-determinate[data-percent='11'] .loader__path { +.ibm-spinner-determinate[data-percent='11'] .loader__path { stroke-dashoffset: 112.14; } -.ap-container .ibm-spinner-determinate[data-percent='10'] .loader__path { +.ibm-spinner-determinate[data-percent='10'] .loader__path { stroke-dashoffset: 113.4; } -.ap-container .ibm-spinner-determinate[data-percent='9'] .loader__path { +.ibm-spinner-determinate[data-percent='9'] .loader__path { stroke-dashoffset: 114.66; } -.ap-container .ibm-spinner-determinate[data-percent='8'] .loader__path { +.ibm-spinner-determinate[data-percent='8'] .loader__path { stroke-dashoffset: 115.92; } -.ap-container .ibm-spinner-determinate[data-percent='7'] .loader__path { +.ibm-spinner-determinate[data-percent='7'] .loader__path { stroke-dashoffset: 117.18; } -.ap-container .ibm-spinner-determinate[data-percent='6'] .loader__path { +.ibm-spinner-determinate[data-percent='6'] .loader__path { stroke-dashoffset: 118.44; } -.ap-container .ibm-spinner-determinate[data-percent='5'] .loader__path { +.ibm-spinner-determinate[data-percent='5'] .loader__path { stroke-dashoffset: 119.7; } -.ap-container .ibm-spinner-determinate[data-percent='4'] .loader__path { +.ibm-spinner-determinate[data-percent='4'] .loader__path { stroke-dashoffset: 120.96; } -.ap-container .ibm-spinner-determinate[data-percent='3'] .loader__path { +.ibm-spinner-determinate[data-percent='3'] .loader__path { stroke-dashoffset: 122.22; } -.ap-container .ibm-spinner-determinate[data-percent='2'] .loader__path { +.ibm-spinner-determinate[data-percent='2'] .loader__path { stroke-dashoffset: 123.48; } -.ap-container .ibm-spinner-determinate[data-percent='1'] .loader__path { +.ibm-spinner-determinate[data-percent='1'] .loader__path { stroke-dashoffset: 124.74; } -.ap-container .ibm-spinner-determinate[data-percent='0'] .loader__path { +.ibm-spinner-determinate[data-percent='0'] .loader__path { stroke-dashoffset: 126; } -.ap-container .ibm-spinner-determinate[data-percent='-1'] .loader__path { +.ibm-spinner-determinate[data-percent='-1'] .loader__path { stroke-dashoffset: 127.26; } -.ap-container .ibm-spinner-determinate[data-percent='-2'] .loader__path { +.ibm-spinner-determinate[data-percent='-2'] .loader__path { stroke-dashoffset: 128.52; } -.ap-container .ibm-spinner-determinate[data-percent='-3'] .loader__path { +.ibm-spinner-determinate[data-percent='-3'] .loader__path { stroke-dashoffset: 129.78; } -.ap-container .ibm-spinner-determinate[data-percent='-4'] .loader__path { +.ibm-spinner-determinate[data-percent='-4'] .loader__path { stroke-dashoffset: 131.04; } -.ap-container .ibm-spinner-determinate[data-percent='-5'] .loader__path { +.ibm-spinner-determinate[data-percent='-5'] .loader__path { stroke-dashoffset: 132.3; } -.ap-container .ibm-spinner-determinate[data-percent='-6'] .loader__path { +.ibm-spinner-determinate[data-percent='-6'] .loader__path { stroke-dashoffset: 133.56; } -.ap-container .ibm-spinner-determinate[data-percent='-7'] .loader__path { +.ibm-spinner-determinate[data-percent='-7'] .loader__path { stroke-dashoffset: 134.82; } -.ap-container .ibm-spinner-determinate[data-percent='-8'] .loader__path { +.ibm-spinner-determinate[data-percent='-8'] .loader__path { stroke-dashoffset: 136.08; } -.ap-container .ibm-spinner-determinate[data-percent='-9'] .loader__path { +.ibm-spinner-determinate[data-percent='-9'] .loader__path { stroke-dashoffset: 137.34; } -.ap-container .ibm-spinner-determinate[data-percent='-10'] .loader__path { +.ibm-spinner-determinate[data-percent='-10'] .loader__path { stroke-dashoffset: 138.6; } -.ap-container .ibm-spinner-determinate[data-percent='-11'] .loader__path { +.ibm-spinner-determinate[data-percent='-11'] .loader__path { stroke-dashoffset: 139.86; } -.ap-container .ibm-spinner-determinate[data-percent='-12'] .loader__path { +.ibm-spinner-determinate[data-percent='-12'] .loader__path { stroke-dashoffset: 141.12; } -.ap-container .ibm-spinner-determinate[data-percent='-13'] .loader__path { +.ibm-spinner-determinate[data-percent='-13'] .loader__path { stroke-dashoffset: 142.38; } -.ap-container .ibm-spinner-determinate[data-percent='-14'] .loader__path { +.ibm-spinner-determinate[data-percent='-14'] .loader__path { stroke-dashoffset: 143.64; } -.ap-container .ibm-spinner-determinate[data-percent='-15'] .loader__path { +.ibm-spinner-determinate[data-percent='-15'] .loader__path { stroke-dashoffset: 144.9; } -.ap-container .ibm-spinner-determinate[data-percent='-16'] .loader__path { +.ibm-spinner-determinate[data-percent='-16'] .loader__path { stroke-dashoffset: 146.16; } -.ap-container .ibm-spinner-determinate[data-percent='-17'] .loader__path { +.ibm-spinner-determinate[data-percent='-17'] .loader__path { stroke-dashoffset: 147.42; } -.ap-container .ibm-spinner-determinate[data-percent='-18'] .loader__path { +.ibm-spinner-determinate[data-percent='-18'] .loader__path { stroke-dashoffset: 148.68; } -.ap-container .ibm-spinner-determinate[data-percent='-19'] .loader__path { +.ibm-spinner-determinate[data-percent='-19'] .loader__path { stroke-dashoffset: 149.94; } -.ap-container .ibm-spinner-determinate[data-percent='-20'] .loader__path { +.ibm-spinner-determinate[data-percent='-20'] .loader__path { stroke-dashoffset: 151.2; } -.ap-container .ibm-spinner-determinate[data-percent='-21'] .loader__path { +.ibm-spinner-determinate[data-percent='-21'] .loader__path { stroke-dashoffset: 152.46; } -.ap-container .ibm-spinner-determinate[data-percent='-22'] .loader__path { +.ibm-spinner-determinate[data-percent='-22'] .loader__path { stroke-dashoffset: 153.72; } -.ap-container .ibm-spinner-determinate[data-percent='-23'] .loader__path { +.ibm-spinner-determinate[data-percent='-23'] .loader__path { stroke-dashoffset: 154.98; } -.ap-container .ibm-spinner-determinate[data-percent='-24'] .loader__path { +.ibm-spinner-determinate[data-percent='-24'] .loader__path { stroke-dashoffset: 156.24; } -.ap-container .ibm-spinner-determinate[data-percent='-25'] .loader__path { +.ibm-spinner-determinate[data-percent='-25'] .loader__path { stroke-dashoffset: 157.5; } -.ap-container .ibm-spinner-determinate[data-percent='-26'] .loader__path { +.ibm-spinner-determinate[data-percent='-26'] .loader__path { stroke-dashoffset: 158.76; } -.ap-container .modal { +.modal { display: none; } -.ap-container .modal-content { +.modal-content { height: 100%; } -@media (min-width: 48.063em) { - .ap-container .modal-content { +@media (min-width: 51.44em) { + .modal-content { height: auto; } } -.ap-container .modal-content:focus { +.modal-content:focus { outline: none; } -.ap-container .modal-inner { +.modal-inner { position: relative; overflow: hidden; width: 100%; @@ -1740,21 +1953,21 @@ td, th { background: #fff; z-index: -1; opacity: 0; - font-size: 16px; -webkit-transition: all .2s ease-in-out; - transition: all .2s ease-in-out; } + transition: all .2s ease-in-out; + font-size: 1rem; } -@media (min-width: 48.063em) { - .ap-container .modal-inner { +@media (min-width: 51.44em) { + .modal-inner { width: 50%; height: auto; max-height: 90%; } } -.modal-visible .ap-container .modal-inner { +.modal-visible .modal-inner { z-index: 100; opacity: 1; } -.ap-container .modal__container { +.modal__container { position: relative; padding: 24px 4.99469%; background: #fff; @@ -1763,15 +1976,15 @@ td, th { color: #777677; } @media (min-width: 31.25em) { - .ap-container .modal__container { + .modal__container { padding: 24px 3.27526%; } } -@media (min-width: 48.063em) { - .ap-container .modal__container { +@media (min-width: 51.44em) { + .modal__container { height: auto; padding: 50px; } } -.ap-container .modal__close { +.modal__close { position: absolute; top: 10px; right: 10px; @@ -1783,27 +1996,27 @@ td, th { background-color: transparent; padding: 0; } -.ap-container .modal__close circle, .ap-container .modal__close path { +.modal__close circle, .modal__close path { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } -.ap-container .modal__close polygon { +.modal__close polygon { -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; } -.ap-container .modal__close:hover polygon { +.modal__close:hover polygon { fill: #fff; } -.ap-container .modal__close:hover circle { +.modal__close:hover circle { fill: #a6266e; } -.ap-container .modal__close:active circle, .ap-container .modal__close:active path { +.modal__close:active circle, .modal__close:active path { fill: #db2780; } -.ap-container .modal__close:active polygon { +.modal__close:active polygon { fill: #fff; } -.ap-container .modal__buttons { +.modal__buttons { background: #f9f9fb; padding: 4.99469%; text-align: right; @@ -1813,143 +2026,193 @@ td, th { width: 100%; } @media (min-width: 31.25em) { - .ap-container .modal__buttons { + .modal__buttons { padding: 3.27526%; } } -@media (min-width: 48.063em) { - .ap-container .modal__buttons { +@media (min-width: 51.44em) { + .modal__buttons { position: static; width: auto; padding: 24px 50px; margin: 24px -50px -50px; } } -.ap-container .modal__header { +.modal__header { background: #f9f9fb; padding: 4.99469% 4.99469% 24px; margin: -4.99469% -4.99469% 24px; } @media (min-width: 31.25em) { - .ap-container .modal__header { + .modal__header { padding: 3.27526% 3.27526% 24px; margin-left: -3.27526%; margin-right: -3.27526%; margin-top: -3.27526%; } } -@media (min-width: 48.063em) { - .ap-container .modal__header { +@media (min-width: 51.44em) { + .modal__header { padding: 50px 50px 24px; margin: -50px -50px 24px; } } -.ap-container .modal h1, .ap-container .modal h2, .ap-container .modal h3 { +.modal h1, .modal h2, .modal h3 { line-height: 1; color: #1d3649; } -.ap-container .modal--error, .ap-container .modal--warning { +.modal--error, .modal--warning { padding-left: 70px; } -@media (min-width: 48.063em) { - .ap-container .modal--error, .ap-container .modal--warning { +@media (min-width: 51.44em) { + .modal--error, .modal--warning { padding-left: 100px; } - .ap-container .modal--error .modal__buttons, .ap-container .modal--warning .modal__buttons { + .modal--error .modal__buttons, .modal--warning .modal__buttons { margin-left: -100px; } } -.ap-container .modal--error .icon, .ap-container .modal--warning .icon { - width: 32px; - height: 32px; +.modal--error .icon--error, .modal--error .icon--warning, .modal--warning .icon--error, .modal--warning .icon--warning { position: absolute; top: 20px; left: 20px; } -@media (min-width: 48.063em) { - .ap-container .modal--error .icon, .ap-container .modal--warning .icon { +@media (min-width: 51.44em) { + .modal--error .icon--error, .modal--error .icon--warning, .modal--warning .icon--error, .modal--warning .icon--warning { top: 58px; left: 50px; } } -.ap-container .modal--error { +.modal--error { border-color: #e71d32; } -.ap-container .modal--error circle { - fill: #e71d32; } - -.ap-container .modal--error path { - fill: #fff; } - -.ap-container .modal--warning { +.modal--warning { border-color: #fdd600; } -.ap-container .modal--warning path:first-child { - fill: #fdd600; } - -.ap-container .modal--warning path { - fill: #1d3649; } - -.ap-container .error__info { +.error__info { clear: both; padding-top: 1em; } -.ap-container .error__details dt { +.error__details dt { clear: both; width: 150px; display: inline-block; } -.ap-container .error__details dt:after { +.error__details dt:after { content: ': '; } -.ap-container .error__details dd { +.error__details dd { display: inline-block; color: #1d3649; margin: 0; padding: 0 0 0 10px; width: calc(100% - 170px); } -.ap-container .modal .shorten { +.modal .shorten { margin-bottom: 20px; max-height: 900px; } -.ap-container _::-moz-range-track, .ap-container body:last-child .radio--base, .ap-container body:last-child .radio--dark, .ap-container body:last-child .radio--dark[type=radio][disabled], .ap-container body:last-child .radio--light, .ap-container body:last-child .radio--light[type=radio][disabled] { - margin-left: -1px; - margin-top: 4px; } - -.ap-container .radio--base, .ap-container .radio--dark, .ap-container .radio--dark[type=radio][disabled], .ap-container .radio--light, .ap-container .radio--light[type=radio][disabled] { - cursor: pointer; +.modal--error .icon, .modal--warning .icon { + width: 32px; + height: 32px; position: absolute; - margin-top: 5px; - margin-left: 1px; - width: 17px; - height: 17px; - opacity: 0; } + top: 20px; + left: 20px; } -.ap-container .radio--base + label, .ap-container .radio--dark + label, .ap-container .radio--dark[type=radio][disabled] + label, .ap-container .radio--light + label, .ap-container .radio--light[type=radio][disabled] + label { - cursor: pointer; - color: #152935; - display: inline-block; - position: relative; - padding-left: 30px; } +@media (min-width: 51.44em) { + .modal--error .icon, .modal--warning .icon { + top: 58px; + left: 50px; } } -.ap-container .radio--base + label div, .ap-container .radio--dark + label div, .ap-container .radio--dark[type=radio][disabled] + label div, .ap-container .radio--light + label div, .ap-container .radio--light[type=radio][disabled] + label div { - color: #152935; - display: inline-block; - position: absolute; - left: 0; } +.modal--error circle { + fill: #e71d32; } -.ap-container .radio--base + label:after, .ap-container .radio--base + label:before, .ap-container .radio--base + label div:after, .ap-container .radio--base + label div:before, .ap-container .radio--dark + label:after, .ap-container .radio--dark + label:before, .ap-container .radio--dark + label div:after, .ap-container .radio--dark + label div:before, .ap-container .radio--dark[type=radio][disabled] + label:after, .ap-container .radio--dark[type=radio][disabled] + label:before, .ap-container .radio--dark[type=radio][disabled] + label div:after, .ap-container .radio--dark[type=radio][disabled] + label div:before, .ap-container .radio--light + label:after, .ap-container .radio--light + label:before, .ap-container .radio--light + label div:after, .ap-container .radio--light + label div:before, .ap-container .radio--light[type=radio][disabled] + label:after, .ap-container .radio--light[type=radio][disabled] + label:before, .ap-container .radio--light[type=radio][disabled] + label div: after, .ap-container .radio--light[type=radio][disabled] + label div:before { - content: ''; - display: inline-block; - width: 16px; - height: 16px; - top: 5px; - left: 0; - bottom: 0; - text-align: center; - position: absolute; } +.modal--error path { + fill: #fff; } -.ap-container .radio--base + label:before, .ap-container .radio--dark + label:before, .ap-container .radio--dark[type=radio][disabled] + label:before, .ap-container .radio--light + label:before, .ap-container .radio--light[type=radio][disabled] + label:before { +.modal--warning path:first-child { + fill: #fdd600; } + +.modal--warning path { + fill: #1d3649; } + +body.vanilla-modal .modal { + display: block; + position: fixed; + content: ''; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(21, 41, 53, 0.9); + z-index: -1; + opacity: 0; + font-size: 0; + -webkit-transition: opacity .2s,z-index 0s .2s; + transition: opacity .2s,z-index 0s .2s; + text-align: center; + overflow: hidden; + overflow-y: auto; + white-space: nowrap; + -webkit-overflow-scrolling: touch; } + +body.vanilla-modal .modal > * { + display: inline-block; + white-space: normal; + vertical-align: middle; + text-align: left; } + +body.vanilla-modal .modal:before { + display: inline-block; + overflow: hidden; + width: 0; + height: 100%; + vertical-align: middle; + content: ''; } + +body.vanilla-modal.modal-visible .modal { + z-index: 9000; + opacity: 1; + -webkit-transition: opacity .2s; + transition: opacity .2s; } + +_::-moz-range-track, body:last-child .radio--base, body:last-child .radio--dark, body:last-child .radio--dark[type=radio][disabled], body:last-child .radio--light, body:last-child .radio--light[type=radio][disabled] { + margin-left: -1px; + margin-top: 4px; } + +.radio--base, .radio--dark, .radio--dark[type=radio][disabled], .radio--light, .radio--light[type=radio][disabled] { + cursor: pointer; + position: absolute; + margin-top: 5px; + margin-left: 1px; + width: 17px; + height: 17px; + opacity: 0; } + +.radio--base + label, .radio--dark + label, .radio--dark[type=radio][disabled] + label, .radio--light + label, .radio--light[type=radio][disabled] + label { + cursor: pointer; + color: #152935; + display: inline-block; + position: relative; + padding-left: 30px; } + +.radio--base + label div, .radio--dark + label div, .radio--dark[type=radio][disabled] + label div, .radio--light + label div, .radio--light[type=radio][disabled] + label div { + color: #152935; + display: inline-block; + position: absolute; + left: 0; } + +.radio--base + label:after, .radio--base + label:before, .radio--base + label div:after, .radio--base + label div:before, .radio--dark + label:after, .radio--dark + label:before, .radio--dark + label div:after, .radio--dark + label div:before, .radio--dark[type=radio][disabled] + label:after, .radio--dark[type=radio][disabled] + label:before, .radio--dark[type=radio][disabled] + label div:after, .radio--dark[type=radio][disabled] + label div:before, .radio--light + label:after, .radio--light + label:before, .radio--light + label div:after, .radio--light + label div:before, .radio--light[type=radio][disabled] + label:after, .radio--light[type=radio][disabled] + label:before, .radio--light[type=radio][disabled] + label div:after, .radio--light[type=radio][disabled] + label div:before { + content: ''; + display: inline-block; + width: 16px; + height: 16px; + top: 5px; + left: 0; + bottom: 0; + text-align: center; + position: absolute; } + +.radio--base + label:before, .radio--dark + label:before, .radio--dark[type=radio][disabled] + label:before, .radio--light + label:before, .radio--light[type=radio][disabled] + label:before { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; border: 1px solid #1d3649; border-radius: 50%; } -.ap-container .radio--base + label div:before, .ap-container .radio--dark + label div:before, .ap-container .radio--dark[type=radio][disabled] + label div:before, .ap-container .radio--light + label div:before, .ap-container .radio--light[type=radio][disabled] + label div:before { +.radio--base + label div:before, .radio--dark + label div:before, .radio--dark[type=radio][disabled] + label div:before, .radio--light + label div:before, .radio--light[type=radio][disabled] + label div:before { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; border-radius: 50%; @@ -1957,150 +2220,151 @@ td, th { -webkit-transform: scale(0); transform: scale(0); } -.ap-container .radio--base:focus.non-keyboard-outline + label:before, .ap-container .radio--dark:focus.non-keyboard-outline + label:before, .ap-container .radio--light:focus.non-keyboard-outline + label:before { +.radio--base:focus.non-keyboard-outline + label:before, .radio--dark:focus.non-keyboard-outline + label:before, .radio--light:focus.non-keyboard-outline + label:before { box-shadow: 0 0 0 6px rgba(124, 199, 255, 0.75), inset 0 0 0 0 #a6266e; } -.ap-container .radio--base:not(:checked) + label:hover div:before, .ap-container .radio--dark:not(:checked) + label:hover div:before, .ap-container .radio--light:not(:checked) + label:hover div:before { +.radio--base:not(:checked) + label:hover div:before, .radio--dark:not(:checked) + label:hover div:before, .radio--light:not(:checked) + label:hover div:before { box-shadow: 0 0 0 0 rgba(124, 199, 255, 0.75), inset 0 0 0 10px #a6266e; -webkit-transform: scale(0.4); transform: scale(0.4); } -.ap-container .radio--base:checked + label div:before, .ap-container .radio--dark:checked + label div:before, .ap-container .radio--dark[type=radio][disabled]:checked + label div:before, .ap-container .radio--light:checked + label div:before, .ap-container .radio--light[type=radio][disabled]:checked + label div:before { +.radio--base:checked + label div:before, .radio--dark:checked + label div:before, .radio--dark[type=radio][disabled]:checked + label div:before, .radio--light:checked + label div:before, .radio--light[type=radio][disabled]:checked + label div:before { box-shadow: 0 0 0 0 rgba(124, 199, 255, 0.75), inset 0 0 0 10px #a6266e; -webkit-transform: scale(1); transform: scale(1); } -.ap-container .radio--base:checked + label:before, .ap-container .radio--dark:checked + label:before, .ap-container .radio--dark[type=radio][disabled]:checked + label:before, .ap-container .radio--light:checked + label:before, .ap-container .radio--light[type=radio][disabled]:checked + label:before { +.radio--base:checked + label:before, .radio--dark:checked + label:before, .radio--dark[type=radio][disabled]:checked + label:before, .radio--light:checked + label:before, .radio--light[type=radio][disabled]:checked + label:before { border: 1px solid #a6266e; } -.ap-container .radio--dark + label { +.radio--dark + label { color: #f9f9fb; } -.ap-container .radio--dark +
<TRUNCATED>
