diff --git a/accordion.scss b/accordion.scss index 2a468de..8c3584a 100644 --- a/accordion.scss +++ b/accordion.scss @@ -1,6 +1,6 @@ -.ac-container{ +.ac-container { margin: 1rem auto 1rem auto; text-align: left; @@ -44,8 +44,59 @@ height: auto; position: relative; z-index: 10; - border-left: 1rem solid var(--box-border); - border-right: 1rem solid var(--box-border); + border-left: 1px solid var(--box-border); + border-right: 1px solid var(--box-border); padding: 1rem; } } + +.more-container { + > label { + width: 100%; + display: flex; + flex-direction: row; + border-bottom: 1px solid var(--box-border); + cursor: pointer; + color: var(--link-color); + user-select: none; + + .expand { + transition: all .3s ease; + transform: rotateZ(0deg); + } + + span { + flex-grow: 1; + } + + i { + flex-grow: 0; + } + } + + > input { + display: none; + } + + > input { + &:checked { + + label { + border-bottom: none; + margin-bottom: 1rem; + + .expand { + transition: all .3s ease; + transform: rotateZ(90deg); + } + } + + ~ div { + display: block; + } + } + } + + > div { + display: none; + } +} \ No newline at end of file diff --git a/breadcrumb.scss b/breadcrumb.scss index 04a5f63..436e924 100644 --- a/breadcrumb.scss +++ b/breadcrumb.scss @@ -2,6 +2,7 @@ list-style: none; overflow: hidden; font-size: 1rem; + user-select: none; li { background: #fff; diff --git a/button.scss b/button.scss index a83be1f..33943cc 100644 --- a/button.scss +++ b/button.scss @@ -2,6 +2,7 @@ .btn { cursor: pointer; + user-select: none; } button, input[type="submit"], input[type="button"], label.button, a.button { @@ -21,6 +22,7 @@ button, input[type="submit"], input[type="button"], label.button, a.button { outline: 0; font-family: inherit; font-size: .9rem; + user-select: none; &::-moz-focus-inner { border: 0; diff --git a/canvas.scss b/canvas.scss index 4dcbbd2..cc777ac 100644 --- a/canvas.scss +++ b/canvas.scss @@ -2,7 +2,6 @@ canvas { background: #fff; - border: 1px solid var(--box-border); user-select: none; } diff --git a/form.scss b/form.scss index aecea00..2729f6c 100644 --- a/form.scss +++ b/form.scss @@ -1,6 +1,6 @@ form { li { - margin: 5px 0 5px 0; + margin: 5px 0 5px 0; } td { @@ -14,7 +14,7 @@ form { label { font-size: 1rem; - color: #878787; + color: rgba(0, 0, 0, 80); } i+i { @@ -34,3 +34,38 @@ form { } } } + +.form-group { + display: flex; + flex-direction: row; + flex-wrap: wrap; + + & + * { + margin-top: .75rem; + } + + label { + flex: 0 0 100%; + } + + .input-control { + flex: 1; + display: flex; + flex-direction: row; + flex-wrap: wrap; + + & +.input-control { + margin-left: 1rem; + } + } +} + +* + .form-group { + margin-top: .75rem; +} + +@media (max-width: 768px) { + .form-group { + flex-direction: column; + } +} \ No newline at end of file diff --git a/nav.scss b/nav.scss index c7e7c44..d36622e 100644 --- a/nav.scss +++ b/nav.scss @@ -9,12 +9,13 @@ body > nav { flex-shrink: 0; display: flex; flex-direction: column; + user-select: none; } #nav-side-outer { overflow-y: auto; height: 100%; - + user-select: none; scrollbar-color: var(--button-colored-background) var(--nav-category-background); scrollbar-width: thin; diff --git a/portlet.scss b/portlet.scss index 1f72aab..478a214 100644 --- a/portlet.scss +++ b/portlet.scss @@ -21,6 +21,10 @@ border-top: 1px solid #ebedf2; padding: 1rem; } + + .portlet-body > h2 { + border-bottom: 1px solid #ebedf2; + } } .plain-portlet { diff --git a/section.scss b/section.scss index b954485..91fbcc2 100644 --- a/section.scss +++ b/section.scss @@ -31,7 +31,7 @@ section { } > h2 { - box-sizing: border-box; + box-sizing: border-box; font-size: 1.2em; margin-bottom: 5px; } diff --git a/styles.css b/styles.css index 2770056..ac913f4 100644 --- a/styles.css +++ b/styles.css @@ -248,7 +248,6 @@ iframe { 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } - @keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); @@ -268,7 +267,6 @@ iframe { 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } - .bounce { -webkit-animation-name: bounce; animation-name: bounce; @@ -280,13 +278,11 @@ iframe { opacity: 1; } 25%, 75% { opacity: 0; } } - @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } - .flash { -webkit-animation-name: flash; animation-name: flash; } @@ -302,7 +298,6 @@ iframe { to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } - @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); @@ -313,7 +308,6 @@ iframe { to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } - .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @@ -340,7 +334,6 @@ iframe { to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } - @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); @@ -363,7 +356,6 @@ iframe { to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } - .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @@ -378,7 +370,6 @@ iframe { 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } - @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); @@ -389,7 +380,6 @@ iframe { 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } - .shake { -webkit-animation-name: shake; animation-name: shake; } @@ -413,7 +403,6 @@ iframe { 50% { -webkit-transform: translateX(0); transform: translateX(0); } } - @keyframes headShake { 0% { -webkit-transform: translateX(0); @@ -433,7 +422,6 @@ iframe { 50% { -webkit-transform: translateX(0); transform: translateX(0); } } - .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; @@ -456,7 +444,6 @@ iframe { to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } - @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); @@ -473,7 +460,6 @@ iframe { to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } - .swing { -webkit-transform-origin: top center; transform-origin: top center; @@ -496,7 +482,6 @@ iframe { to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } - @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); @@ -513,7 +498,6 @@ iframe { to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } - .tada { -webkit-animation-name: tada; animation-name: tada; } @@ -541,7 +525,6 @@ iframe { to { -webkit-transform: none; transform: none; } } - @keyframes wobble { from { -webkit-transform: none; @@ -564,7 +547,6 @@ iframe { to { -webkit-transform: none; transform: none; } } - .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @@ -589,12 +571,11 @@ iframe { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { - -webkit-transform: skewX(0.39062deg) skewY(0.39062deg); - transform: skewX(0.39062deg) skewY(0.39062deg); } + -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); + transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { - -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); - transform: skewX(-0.19531deg) skewY(-0.19531deg); } } - + -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); + transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: none; @@ -615,12 +596,11 @@ iframe { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { - -webkit-transform: skewX(0.39062deg) skewY(0.39062deg); - transform: skewX(0.39062deg) skewY(0.39062deg); } + -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); + transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { - -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); - transform: skewX(-0.19531deg) skewY(-0.19531deg); } } - + -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); + transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; @@ -652,7 +632,6 @@ iframe { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } - @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); @@ -678,7 +657,6 @@ iframe { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } - .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @@ -704,7 +682,6 @@ iframe { to { -webkit-transform: none; transform: none; } } - @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); @@ -726,7 +703,6 @@ iframe { to { -webkit-transform: none; transform: none; } } - .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @@ -752,7 +728,6 @@ iframe { to { -webkit-transform: none; transform: none; } } - @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); @@ -774,7 +749,6 @@ iframe { to { -webkit-transform: none; transform: none; } } - .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @@ -800,7 +774,6 @@ iframe { to { -webkit-transform: none; transform: none; } } - @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); @@ -822,7 +795,6 @@ iframe { to { -webkit-transform: none; transform: none; } } - .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @@ -848,7 +820,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); @@ -870,7 +841,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @@ -887,7 +857,6 @@ iframe { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } - @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); @@ -900,7 +869,6 @@ iframe { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } - .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @@ -917,7 +885,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } - @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); @@ -930,7 +897,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } - .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @@ -944,7 +910,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } - @keyframes bounceOutLeft { 20% { opacity: 1; @@ -954,7 +919,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } - .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @@ -968,7 +932,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } - @keyframes bounceOutRight { 20% { opacity: 1; @@ -978,7 +941,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } - .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @@ -995,7 +957,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } - @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); @@ -1008,7 +969,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } - .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @@ -1018,13 +978,11 @@ iframe { opacity: 0; } to { opacity: 1; } } - @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } - .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @@ -1038,7 +996,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - @keyframes fadeInDown { from { opacity: 0; @@ -1048,7 +1005,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @@ -1062,7 +1018,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - @keyframes fadeInDownBig { from { opacity: 0; @@ -1072,7 +1027,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @@ -1086,7 +1040,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - @keyframes fadeInLeft { from { opacity: 0; @@ -1096,7 +1049,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @@ -1110,7 +1062,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - @keyframes fadeInLeftBig { from { opacity: 0; @@ -1120,7 +1071,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @@ -1134,7 +1084,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - @keyframes fadeInRight { from { opacity: 0; @@ -1144,7 +1093,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @@ -1158,7 +1106,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - @keyframes fadeInRightBig { from { opacity: 0; @@ -1168,7 +1115,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @@ -1182,7 +1128,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - @keyframes fadeInUp { from { opacity: 0; @@ -1192,7 +1137,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @@ -1206,7 +1150,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - @keyframes fadeInUpBig { from { opacity: 0; @@ -1216,7 +1159,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @@ -1226,13 +1168,11 @@ iframe { opacity: 1; } to { opacity: 0; } } - @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } - .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @@ -1244,7 +1184,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } - @keyframes fadeOutDown { from { opacity: 1; } @@ -1252,7 +1191,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } - .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @@ -1264,7 +1202,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } - @keyframes fadeOutDownBig { from { opacity: 1; } @@ -1272,7 +1209,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } - .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @@ -1284,7 +1220,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } - @keyframes fadeOutLeft { from { opacity: 1; } @@ -1292,7 +1227,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } - .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @@ -1304,7 +1238,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } - @keyframes fadeOutLeftBig { from { opacity: 1; } @@ -1312,7 +1245,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } - .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @@ -1324,7 +1256,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } - @keyframes fadeOutRight { from { opacity: 1; } @@ -1332,7 +1263,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } - .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @@ -1344,7 +1274,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } - @keyframes fadeOutRightBig { from { opacity: 1; } @@ -1352,7 +1281,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } - .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @@ -1364,7 +1292,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } - @keyframes fadeOutUp { from { opacity: 1; } @@ -1372,7 +1299,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } - .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @@ -1384,7 +1310,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } - @keyframes fadeOutUpBig { from { opacity: 1; } @@ -1392,7 +1317,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } - .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @@ -1423,7 +1347,6 @@ iframe { transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } - @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); @@ -1450,7 +1373,6 @@ iframe { transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } - .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; @@ -1479,7 +1401,6 @@ iframe { to { -webkit-transform: perspective(400px); transform: perspective(400px); } } - @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); @@ -1502,7 +1423,6 @@ iframe { to { -webkit-transform: perspective(400px); transform: perspective(400px); } } - .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; @@ -1531,7 +1451,6 @@ iframe { to { -webkit-transform: perspective(400px); transform: perspective(400px); } } - @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); @@ -1554,7 +1473,6 @@ iframe { to { -webkit-transform: perspective(400px); transform: perspective(400px); } } - .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; @@ -1573,7 +1491,6 @@ iframe { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } - @keyframes flipOutX { from { -webkit-transform: perspective(400px); @@ -1586,7 +1503,6 @@ iframe { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } - .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; @@ -1605,7 +1521,6 @@ iframe { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } - @keyframes flipOutY { from { -webkit-transform: perspective(400px); @@ -1618,7 +1533,6 @@ iframe { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } - .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; @@ -1642,7 +1556,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); @@ -1660,7 +1573,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; @@ -1674,7 +1586,6 @@ iframe { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } - @keyframes lightSpeedOut { from { opacity: 1; } @@ -1682,7 +1593,6 @@ iframe { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } - .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; @@ -1702,7 +1612,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - @keyframes rotateIn { from { -webkit-transform-origin: center; @@ -1716,7 +1625,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @@ -1734,7 +1642,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; @@ -1748,7 +1655,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @@ -1766,7 +1672,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; @@ -1780,7 +1685,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @@ -1798,7 +1702,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; @@ -1812,7 +1715,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @@ -1830,7 +1732,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; @@ -1844,7 +1745,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @@ -1860,7 +1760,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } - @keyframes rotateOut { from { -webkit-transform-origin: center; @@ -1872,7 +1771,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } - .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @@ -1888,7 +1786,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } - @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; @@ -1900,7 +1797,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } - .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @@ -1916,7 +1812,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } - @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; @@ -1928,7 +1823,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } - .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @@ -1944,7 +1838,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } - @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; @@ -1956,7 +1849,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } - .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @@ -1972,7 +1864,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } - @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; @@ -1984,7 +1875,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } - .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @@ -2014,7 +1904,6 @@ iframe { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } - @keyframes hinge { 0% { -webkit-transform-origin: top left; @@ -2040,7 +1929,6 @@ iframe { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } - .hinge { -webkit-animation-name: hinge; animation-name: hinge; } @@ -2055,7 +1943,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - @keyframes rollIn { from { opacity: 0; @@ -2065,7 +1952,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } @@ -2078,7 +1964,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } - @keyframes rollOut { from { opacity: 1; } @@ -2086,7 +1971,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } - .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @@ -2098,7 +1982,6 @@ iframe { transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } - @keyframes zoomIn { from { opacity: 0; @@ -2106,7 +1989,6 @@ iframe { transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } - .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @@ -2124,7 +2006,6 @@ iframe { transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomInDown { from { opacity: 0; @@ -2138,7 +2019,6 @@ iframe { transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @@ -2156,7 +2036,6 @@ iframe { transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomInLeft { from { opacity: 0; @@ -2170,7 +2049,6 @@ iframe { transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @@ -2188,7 +2066,6 @@ iframe { transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomInRight { from { opacity: 0; @@ -2202,7 +2079,6 @@ iframe { transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @@ -2220,7 +2096,6 @@ iframe { transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomInUp { from { opacity: 0; @@ -2234,7 +2109,6 @@ iframe { transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @@ -2248,7 +2122,6 @@ iframe { transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } - @keyframes zoomOut { from { opacity: 1; } @@ -2258,7 +2131,6 @@ iframe { transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } - .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @@ -2278,7 +2150,6 @@ iframe { transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomOutDown { 40% { opacity: 1; @@ -2294,7 +2165,6 @@ iframe { transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @@ -2310,7 +2180,6 @@ iframe { transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } - @keyframes zoomOutLeft { 40% { opacity: 1; @@ -2322,7 +2191,6 @@ iframe { transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } - .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @@ -2338,7 +2206,6 @@ iframe { transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } - @keyframes zoomOutRight { 40% { opacity: 1; @@ -2350,7 +2217,6 @@ iframe { transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } - .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @@ -2370,7 +2236,6 @@ iframe { transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomOutUp { 40% { opacity: 1; @@ -2386,7 +2251,6 @@ iframe { transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @@ -2399,7 +2263,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); @@ -2408,7 +2271,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @@ -2421,7 +2283,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); @@ -2430,7 +2291,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @@ -2443,7 +2303,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); @@ -2452,7 +2311,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @@ -2465,7 +2323,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); @@ -2474,7 +2331,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @@ -2487,7 +2343,6 @@ iframe { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } - @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); @@ -2496,7 +2351,6 @@ iframe { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } - .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @@ -2509,7 +2363,6 @@ iframe { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } - @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); @@ -2518,7 +2371,6 @@ iframe { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } - .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @@ -2531,7 +2383,6 @@ iframe { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } - @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); @@ -2540,7 +2391,6 @@ iframe { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } - .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @@ -2553,7 +2403,6 @@ iframe { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } - @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); @@ -2562,7 +2411,6 @@ iframe { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } - .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @@ -2779,8 +2627,10 @@ iframe { @media only screen and (min-width: 48em) { .container { width: 46rem; } + .xs-col-table { display: inherit; } + .col-sm, .col-sm-1, .col-sm-2, @@ -2799,6 +2649,7 @@ iframe { -webkit-box-flex: 0; flex: 0 0 auto; padding-right: 1rem; } + .col-sm { -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -2807,124 +2658,158 @@ iframe { -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } + .col-sm-1 { -ms-flex-preferred-size: 8.333%; flex-basis: 8.333%; max-width: 8.333%; } + .col-sm-2 { -ms-flex-preferred-size: 16.667%; flex-basis: 16.667%; max-width: 16.667%; } + .col-sm-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } + .col-sm-4 { -ms-flex-preferred-size: 33.333%; flex-basis: 33.333%; max-width: 33.333%; } + .col-sm-5 { -ms-flex-preferred-size: 41.667%; flex-basis: 41.667%; max-width: 41.667%; } + .col-sm-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } + .col-sm-7 { -ms-flex-preferred-size: 58.333%; flex-basis: 58.333%; max-width: 58.333%; } + .col-sm-8 { -ms-flex-preferred-size: 66.667%; flex-basis: 66.667%; max-width: 66.667%; } + .col-sm-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } + .col-sm-10 { -ms-flex-preferred-size: 83.333%; flex-basis: 83.333%; max-width: 83.333%; } + .col-sm-11 { -ms-flex-preferred-size: 91.667%; flex-basis: 91.667%; max-width: 91.667%; } + .col-sm-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } + .col-sm-offset-1 { margin-left: 8.333%; } + .col-sm-offset-2 { margin-left: 16.667%; } + .col-sm-offset-3 { margin-left: 25%; } + .col-sm-offset-4 { margin-left: 33.333%; } + .col-sm-offset-5 { margin-left: 41.667%; } + .col-sm-offset-6 { margin-left: 50%; } + .col-sm-offset-7 { margin-left: 58.333%; } + .col-sm-offset-8 { margin-left: 66.667%; } + .col-sm-offset-9 { margin-left: 75%; } + .col-sm-offset-10 { margin-left: 83.333%; } + .col-sm-offset-11 { margin-left: 91.667%; } + .start-sm { -ms-flex-pack: start; -webkit-box-pack: start; justify-content: flex-start; text-align: start; } + .center-sm { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; text-align: center; } + .end-sm { -ms-flex-pack: end; -webkit-box-pack: end; justify-content: flex-end; text-align: end; } + .top-sm { -ms-flex-align: start; -webkit-box-align: start; align-items: flex-start; } + .middle-sm { -ms-flex-align: center; -webkit-box-align: center; align-items: center; } + .bottom-sm { -ms-flex-align: end; -webkit-box-align: end; align-items: flex-end; } + .around-sm { -ms-flex-pack: distribute; justify-content: space-around; } + .between-sm { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; } + .first-sm { -ms-flex-order: -1; -webkit-box-ordinal-group: 0; order: -1; } + .last-sm { -ms-flex-order: 1; -webkit-box-ordinal-group: 2; order: 1; } } - @media only screen and (min-width: 62em) { .container { width: 61rem; } + .md-col-table { display: inherit; } + .col-md, .col-md-1, .col-md-2, @@ -2943,6 +2828,7 @@ iframe { -webkit-box-flex: 0; flex: 0 0 auto; padding-right: 1rem; } + .col-md { -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -2951,124 +2837,158 @@ iframe { -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } + .col-md-1 { -ms-flex-preferred-size: 8.333%; flex-basis: 8.333%; max-width: 8.333%; } + .col-md-2 { -ms-flex-preferred-size: 16.667%; flex-basis: 16.667%; max-width: 16.667%; } + .col-md-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } + .col-md-4 { -ms-flex-preferred-size: 33.333%; flex-basis: 33.333%; max-width: 33.333%; } + .col-md-5 { -ms-flex-preferred-size: 41.667%; flex-basis: 41.667%; max-width: 41.667%; } + .col-md-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } + .col-md-7 { -ms-flex-preferred-size: 58.333%; flex-basis: 58.333%; max-width: 58.333%; } + .col-md-8 { -ms-flex-preferred-size: 66.667%; flex-basis: 66.667%; max-width: 66.667%; } + .col-md-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } + .col-md-10 { -ms-flex-preferred-size: 83.333%; flex-basis: 83.333%; max-width: 83.333%; } + .col-md-11 { -ms-flex-preferred-size: 91.667%; flex-basis: 91.667%; max-width: 91.667%; } + .col-md-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } + .col-md-offset-1 { margin-left: 8.333%; } + .col-md-offset-2 { margin-left: 16.667%; } + .col-md-offset-3 { margin-left: 25%; } + .col-md-offset-4 { margin-left: 33.333%; } + .col-md-offset-5 { margin-left: 41.667%; } + .col-md-offset-6 { margin-left: 50%; } + .col-md-offset-7 { margin-left: 58.333%; } + .col-md-offset-8 { margin-left: 66.667%; } + .col-md-offset-9 { margin-left: 75%; } + .col-md-offset-10 { margin-left: 83.333%; } + .col-md-offset-11 { margin-left: 91.667%; } + .start-md { -ms-flex-pack: start; -webkit-box-pack: start; justify-content: flex-start; text-align: start; } + .center-md { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; text-align: center; } + .end-md { -ms-flex-pack: end; -webkit-box-pack: end; justify-content: flex-end; text-align: end; } + .top-md { -ms-flex-align: start; -webkit-box-align: start; align-items: flex-start; } + .middle-md { -ms-flex-align: center; -webkit-box-align: center; align-items: center; } + .bottom-md { -ms-flex-align: end; -webkit-box-align: end; align-items: flex-end; } + .around-md { -ms-flex-pack: distribute; justify-content: space-around; } + .between-md { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; } + .first-md { -ms-flex-order: -1; -webkit-box-ordinal-group: 0; order: -1; } + .last-md { -ms-flex-order: 1; -webkit-box-ordinal-group: 2; order: 1; } } - @media only screen and (min-width: 75em) { .container { width: 71rem; } + .lg-col-table { display: inherit; } + .col-lg, .col-lg-1, .col-lg-2, @@ -3087,6 +3007,7 @@ iframe { -webkit-box-flex: 0; flex: 0 0 auto; padding-right: 1rem; } + .col-lg { -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -3095,119 +3016,151 @@ iframe { -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } + .col-lg-1 { -ms-flex-preferred-size: 8.333%; flex-basis: 8.333%; max-width: 8.333%; } + .col-lg-2 { -ms-flex-preferred-size: 16.667%; flex-basis: 16.667%; max-width: 16.667%; } + .col-lg-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } + .col-lg-4 { -ms-flex-preferred-size: 33.333%; flex-basis: 33.333%; max-width: 33.333%; } + .col-lg-5 { -ms-flex-preferred-size: 41.667%; flex-basis: 41.667%; max-width: 41.667%; } + .col-lg-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } + .col-lg-7 { -ms-flex-preferred-size: 58.333%; flex-basis: 58.333%; max-width: 58.333%; } + .col-lg-8 { -ms-flex-preferred-size: 66.667%; flex-basis: 66.667%; max-width: 66.667%; } + .col-lg-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } + .col-lg-10 { -ms-flex-preferred-size: 83.333%; flex-basis: 83.333%; max-width: 83.333%; } + .col-lg-11 { -ms-flex-preferred-size: 91.667%; flex-basis: 91.667%; max-width: 91.667%; } + .col-lg-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } + .col-lg-offset-1 { margin-left: 8.333%; } + .col-lg-offset-2 { margin-left: 16.667%; } + .col-lg-offset-3 { margin-left: 25%; } + .col-lg-offset-4 { margin-left: 33.333%; } + .col-lg-offset-5 { margin-left: 41.667%; } + .col-lg-offset-6 { margin-left: 50%; } + .col-lg-offset-7 { margin-left: 58.333%; } + .col-lg-offset-8 { margin-left: 66.667%; } + .col-lg-offset-9 { margin-left: 75%; } + .col-lg-offset-10 { margin-left: 83.333%; } + .col-lg-offset-11 { margin-left: 91.667%; } + .start-lg { -ms-flex-pack: start; -webkit-box-pack: start; justify-content: flex-start; text-align: start; } + .center-lg { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; text-align: center; } + .end-lg { -ms-flex-pack: end; -webkit-box-pack: end; justify-content: flex-end; text-align: end; } + .top-lg { -ms-flex-align: start; -webkit-box-align: start; align-items: flex-start; } + .middle-lg { -ms-flex-align: center; -webkit-box-align: center; align-items: center; } + .bottom-lg { -ms-flex-align: end; -webkit-box-align: end; align-items: flex-end; } + .around-lg { -ms-flex-pack: distribute; justify-content: space-around; } + .between-lg { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; } + .first-lg { -ms-flex-order: -1; -webkit-box-ordinal-group: 0; order: -1; } + .last-lg { -ms-flex-order: 1; -webkit-box-ordinal-group: 2; order: 1; } } - .portlet-body > article { padding: 0; } @@ -3335,7 +3288,6 @@ p { background-position: 0; } 100% { background-position: -100%; } } - .tooltip { cursor: pointer; color: var(--box-highlight); @@ -3372,7 +3324,6 @@ p { -webkit-transform: perspective(120px) rotateY(180deg); } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } } - @keyframes sk-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); @@ -3383,7 +3334,6 @@ p { 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } - .spinner-2 { text-align: center; } .spinner-2 > div { @@ -3406,7 +3356,6 @@ p { -webkit-transform: scale(0); } 40% { -webkit-transform: scale(1); } } - @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); @@ -3414,7 +3363,6 @@ p { 40% { -webkit-transform: scale(1); transform: scale(1); } } - .spinner-3 { width: 40px; height: 40px; @@ -3430,7 +3378,6 @@ p { 100% { -webkit-transform: scale(1); opacity: 0; } } - @keyframes sk-scaleout { 0% { -webkit-transform: scale(0); @@ -3439,10 +3386,8 @@ p { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } - canvas { background: #fff; - border: 1px solid var(--box-border); user-select: none; } canvas.chart { @@ -3450,29 +3395,46 @@ canvas.chart { form li { margin: 5px 0 5px 0; } - form td { white-space: nowrap; padding-bottom: 5px; } form td textarea + i { vertical-align: top; } - form label { font-size: 1rem; - color: #878787; } - + color: black; } form i + i { margin-left: 3px; } - form .layout td + td { padding-left: 5px; } - form .list { font-size: 1rem; } form .list td { white-space: nowrap; padding: 3px 5px 3px 5px; } +.form-group { + display: flex; + flex-direction: row; + flex-wrap: wrap; } + .form-group + * { + margin-top: .75rem; } + .form-group label { + flex: 0 0 100%; } + .form-group .input-control { + flex: 1; + display: flex; + flex-direction: row; + flex-wrap: wrap; } + .form-group .input-control + .input-control { + margin-left: 1rem; } + +* + .form-group { + margin-top: .75rem; } + +@media (max-width: 768px) { + .form-group { + flex-direction: column; } } .infoIcon { width: var(--badge-size); text-align: center; @@ -3500,24 +3462,20 @@ img.frame-1 { border: 1px solid var(--box-border); box-sizing: border-box; width: 100%; } - img.frame-2 { border: 1px solid var(--box-border); background: #fff; box-sizing: border-box; width: 100%; } - img.frame-3 { padding: 1rem; background: #fff; border: 1px solid var(--box-border); box-sizing: border-box; width: 100%; } - img.rounded { border-radius: 50%; background: #fff; } - img.bordered { border: 1px solid var(--box-border); } @@ -3540,7 +3498,6 @@ img.bordered { left: -300%; } 100% { left: -400%; } } - div.slider-1 { overflow: hidden; } div.slider-1 figure { @@ -3625,7 +3582,7 @@ div.slider-1 { width: 100%; } @keyframes carousel { - 0%, 17.5% { + 0%, 17.5% { transform: translateZ(-35vw) rotateY(0); } 27.5%, 45% { transform: translateZ(-35vw) rotateY(-120deg); } @@ -3633,7 +3590,6 @@ div.slider-1 { transform: translateZ(-35vw) rotateY(-240deg); } 82.5%, 100% { transform: translateZ(-35vw) rotateY(-360deg); } } - /** * @todo Orange-Management/cssOMS#4 * Nicer visual input validation @@ -3777,7 +3733,6 @@ input[type="datetime-local"] { .clickPopup label + input { display: none; } - .clickPopup .popup { box-sizing: border-box; padding: .5rem 1rem .5rem 1rem; @@ -4001,10 +3956,38 @@ select.plain { height: auto; position: relative; z-index: 10; - border-left: 1rem solid var(--box-border); - border-right: 1rem solid var(--box-border); + border-left: 1px solid var(--box-border); + border-right: 1px solid var(--box-border); padding: 1rem; } +.more-container > label { + width: 100%; + display: flex; + flex-direction: row; + border-bottom: 1px solid var(--box-border); + cursor: pointer; + color: var(--link-color); + user-select: none; } + .more-container > label .expand { + transition: all .3s ease; + transform: rotateZ(0deg); } + .more-container > label span { + flex-grow: 1; } + .more-container > label i { + flex-grow: 0; } +.more-container > input { + display: none; } +.more-container > input:checked + label { + border-bottom: none; + margin-bottom: 1rem; } + .more-container > input:checked + label .expand { + transition: all .3s ease; + transform: rotateZ(90deg); } +.more-container > input:checked ~ div { + display: block; } +.more-container > div { + display: none; } + .log-msg { padding: 1rem; margin: 1rem; } @@ -4044,7 +4027,8 @@ blockquote { .crumbs-1, .crumbs-2 { list-style: none; overflow: hidden; - font-size: 1rem; } + font-size: 1rem; + user-select: none; } .crumbs-1 li, .crumbs-2 li { background: #fff; border-left: 1px solid var(--box-border); @@ -4099,21 +4083,18 @@ blockquote { top: 50%; margin-top: -20px; left: 100%; } - .crumbs-1 li.active:not(:last-child):after, .crumbs-1 li:hover:not(:last-child):after { color: var(--text-on-background-color-2); } - .crumbs-1 li.active:not(:last-child):after { border-left: 14px solid var(--button-colored-background); } - .crumbs-1 li:hover:not(:last-child):after { border-left: 14px solid var(--button-colored-background-hover); } - .crumbs-1 :last-child:before { border: none; } .btn { - cursor: pointer; } + cursor: pointer; + user-select: none; } button, input[type="submit"], input[type="button"], label.button, a.button { cursor: pointer; @@ -4131,7 +4112,8 @@ button, input[type="submit"], input[type="button"], label.button, a.button { align-items: center; outline: 0; font-family: inherit; - font-size: .9rem; } + font-size: .9rem; + user-select: none; } button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, label.button::-moz-focus-inner, a.button::-moz-focus-inner { border: 0; } button:hover, button:focus, input[type="submit"]:hover, input[type="submit"]:focus, input[type="button"]:hover, input[type="button"]:focus, label.button:hover, label.button:focus, a.button:hover, a.button:focus { @@ -4177,11 +4159,13 @@ body > nav { color: rgba(255, 255, 255, 0.8); flex-shrink: 0; display: flex; - flex-direction: column; } + flex-direction: column; + user-select: none; } #nav-side-outer { overflow-y: auto; height: 100%; + user-select: none; scrollbar-color: var(--button-colored-background) var(--nav-category-background); scrollbar-width: thin; } #nav-side-outer::-webkit-scrollbar { @@ -4291,27 +4275,25 @@ body > nav { @media only screen and (max-width: 800px) { #nav-trigger:not(:checked) + nav { width: 0%; } + #nav-trigger:checked + nav { width: auto; min-width: 250px; } } - @media only screen and (max-width: 500px) { #nav-trigger:checked + nav { width: 100%; } + #nav-trigger:checked ~ main { display: none; } } - .pagination li { display: inline-block; } .pagination li + li { margin-left: .5rem; } - .pagination a { display: inline-block; border-radius: 3px; background: #ccc; padding: 5px 10px 5px 10px; } - .pagination .active, .pagination a:hover, .pagination a:active { color: #000; background: #fff; } @@ -4353,19 +4335,16 @@ body > nav { background-position: 0 0; } 100% { background-position: 50px 50px; } } - .meter.orange > span { background-color: #f1a165; background-image: -moz-linear-gradient(top, #f1a165, #f36d0a); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a)); background-image: -webkit-linear-gradient(#f1a165, #f36d0a); } - .meter.blue > span { background-color: #96c2f1; background-image: -moz-linear-gradient(top, #96c2f1, #4394f3); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #96c2f1), color-stop(1, #4394f3)); background-image: -webkit-linear-gradient(#96c2f1, #4394f3); } - .meter.red > span { background-color: #f0a3a3; background-image: -moz-linear-gradient(top, #f0a3a3, #f42323); @@ -4495,7 +4474,6 @@ section header > h1 { padding-bottom: 5px; font-size: 1.1em; border-bottom: 1px solid #e1e1e1; } - section > h2 { box-sizing: border-box; font-size: 1.2em; @@ -4508,7 +4486,6 @@ section > h2 { .pagebreak { page-break-after: always; display: block; } } - .tabview .tab-links { color: #000; padding: 0.3rem 0 0 0; } @@ -4529,13 +4506,10 @@ section > h2 { cursor: default; } .tabview .tab-links li { display: inline-block; } - .tabview .tab-content > input { display: none; } - .tabview .tab-content > input + div { display: none; } - .tabview .tab-content > input:checked + div { display: inherit; } @@ -4555,7 +4529,6 @@ section > h2 { border-right: 1px solid var(--box-border); } .tab-1 .tab-links li { margin: 0 5px 0 0; } - .tab-1 .tab-content { box-sizing: border-box; background: var(--button-colored-background); @@ -4563,7 +4536,6 @@ section > h2 { border-right: 1px solid var(--box-border); border-bottom: 1px solid var(--box-border); padding: 10px; } - .tab-1.left { display: flex; } .tab-1.left .tab-links { @@ -4582,10 +4554,8 @@ section > h2 { .tab-2 .tab-links label { padding: 5px 10px 5px 10px; } - .tab-2 .tab-links li { margin: 0 5px 15px 0; } - .tab-2 .tab-links .active a, .tab-2 .tab-links .active label { color: var(--text-on-background-color-2); background: var(--button-colored-background); } @@ -4664,6 +4634,14 @@ table .sort-asc, table .sort-desc, table .filter { white-space: nowrap; text-overflow: ellipsis; } +table.default.sticky { + position: relative; } + table.default.sticky thead th, table.default.sticky thead td { + background: var(--table-head-background); + position: sticky; + top: 0; + z-index: 2; } + table.default { border-radius: 4px; width: 100%; @@ -4700,13 +4678,16 @@ table.default { border-bottom: 1px solid var(--box-border); } table.default tbody tr:last-child td, table.default tbody tr:last-child th { border: none; } - table.default tbody tr:focus { - outline: none; } + table.default tbody tr:focus, table.default tbody tr:hover { + outline: none; + transform: scale(1); + box-shadow: 0 0 5px rgba(90, 71, 114, 0.3); } table.default tbody th { background: var(--table-head-background); } table.default thead { - height: 3rem; background: var(--table-head-background); } + table.default thead tr { + height: 3rem; } table.default thead td { border-bottom: 1px solid var(--box-border); } table.default thead input[type=radio] { @@ -4732,7 +4713,6 @@ table.default { table.list th { text-align: left; padding: 2px 0 2px 0; } - table.list td { padding: 2px 5px 2px 5px; } @@ -4773,7 +4753,6 @@ table.list td { font-weight: bold; } table.table tfoot { display: none; } } - .nobreak { white-space: nowrap; } @@ -4784,7 +4763,8 @@ span.tag { font-size: .8rem; color: var(--text-on-background-color-2); background: var(--button-colored-background); - display: inline-block; } + display: inline-block; + user-select: none; } span.tag i { color: var(--text-on-background-color-2); margin-right: .5rem; } @@ -4806,6 +4786,8 @@ span.tag { border-bottom-right-radius: 4px; border-top: 1px solid #ebedf2; padding: 1rem; } + .portlet .portlet-body > h2 { + border-bottom: 1px solid #ebedf2; } .plain-portlet { box-sizing: border-box; diff --git a/table.scss b/table.scss index ab22db9..a532a26 100644 --- a/table.scss +++ b/table.scss @@ -39,6 +39,19 @@ table .sort-asc, table .sort-desc, table .filter { } } +table.default.sticky { + position: relative; + + thead { + th, td { + background: var(--table-head-background); + position: sticky; + top: 0; + z-index: 2; + } + } +} + table.default { border-radius: 4px; width: 100%; @@ -101,8 +114,10 @@ table.default { border: none; } - &:focus { + &:focus, &:hover { outline: none; + transform: scale(1); + box-shadow: 0 0 5px rgba(90, 71, 114, 0.3); } } @@ -112,9 +127,12 @@ table.default { } thead { - height: 3rem; background: var(--table-head-background); + tr { + height: 3rem; + } + td { border-bottom: 1px solid var(--box-border); } diff --git a/tag.scss b/tag.scss index 7046c50..61e5e41 100644 --- a/tag.scss +++ b/tag.scss @@ -7,6 +7,7 @@ span { color: var(--text-on-background-color-2); background: var(--button-colored-background); display: inline-block; + user-select: none; i { color: var(--text-on-background-color-2);