diff --git a/accordion.scss b/accordion.scss index 8c3584a..cf446dc 100644 --- a/accordion.scss +++ b/accordion.scss @@ -1,8 +1,6 @@ - - .ac-container { - margin: 1rem auto 1rem auto; text-align: left; + border: 1px solid #c9c9c9; > input { display: none; @@ -14,6 +12,10 @@ + section { display: inherit; } + + &:hover { + background: var(--button-colored-background-hover); + } } + label + section { @@ -28,12 +30,12 @@ z-index: 20; margin-top: -1px; cursor: pointer; - color: var(--text-on-background-color-2); + color: #000; font-size: 1rem; - border: 1rem solid var(--box-border); background: var(--box-border); &:hover { + color: var(--text-on-background-color-2); background: var(--button-colored-background-hover); } } @@ -44,8 +46,6 @@ height: auto; position: relative; z-index: 10; - border-left: 1px solid var(--box-border); - border-right: 1px solid var(--box-border); padding: 1rem; } } diff --git a/article.scss b/article.scss index e99e395..5607114 100644 --- a/article.scss +++ b/article.scss @@ -11,7 +11,7 @@ article { line-height: 2rem; white-space: normal; - del, ins { + del, ins, mark { padding: 3px; text-decoration: none; } @@ -24,6 +24,10 @@ article { background: #b0f3b0; } + mark { + background: #f9ffa1; + } + h1, h2, h3, h4, h5, h6 { font-weight: 500; //padding-bottom: 1rem; diff --git a/button.scss b/button.scss index 33943cc..ef49174 100644 --- a/button.scss +++ b/button.scss @@ -31,10 +31,19 @@ button, input[type="submit"], input[type="button"], label.button, a.button { &:hover, &:focus { background: var(--button-colored-background-hover); } + + i { + margin: 0 .5rem 0 0; + } } button.save, .button.save { + color: rgba(0, 0, 0, 0.75); + background: #8fff79; + &:hover, &:focus { + background: #a1ffa1; + } } button.cancel, .button.cancel { @@ -45,10 +54,21 @@ button.cancel, .button.cancel { } } -button.delete, .button.delete { +button.close, .button.close { + color: rgba(0, 0, 0, 0.75); + background: #f1ff70; + &:hover, &:focus { + background: #faffa1; + } } -button.ok, .button.ok { +button.disabled, .button.disabled { + color: rgba(0, 0, 0, 0.5); + background: #e1e1e1; + cursor: not-allowed; -} \ No newline at end of file + &:hover, &:focus { + background: #e1e1e1; + } +} diff --git a/form.scss b/form.scss index 0dce252..5d38359 100644 --- a/form.scss +++ b/form.scss @@ -62,6 +62,10 @@ form { margin-left: 1rem; } } + + textarea { + height: 8rem; + } } * + .form-group { diff --git a/image.scss b/image.scss index 0690a9a..7a31977 100644 --- a/image.scss +++ b/image.scss @@ -16,14 +16,6 @@ img { width: 100%; } - &.frame-3 { - padding: 1rem; - background: #fff; - border: 1px solid var(--box-border); - box-sizing: border-box; - width: 100%; - } - &.rounded { border-radius: 50%; background: #fff; @@ -32,139 +24,4 @@ img { &.bordered { border: 1px solid var(--box-border);; } -} - -@keyframes slidy { - 0% { left: 0%; } - 20% { left: 0%; } - 25% { left: -100%; } - 45% { left: -100%; } - 50% { left: -200%; } - 70% { left: -200%; } - 75% { left: -300%; } - 95% { left: -300%; } - 100% { left: -400%; } -} - -div.slider-1 { - overflow: hidden; - - figure { - position: relative; - width: 500%; - margin: 0; - left: 0; - text-align: left; - font-size: 0; - animation: 30s slidy infinite; - - img { - width: 20%; float: left; - } - } -} - -.slider-2 { - width: 100%; - position: relative; - text-align: center; - - > img { - width: 100%; - position: absolute; - left: 0; top: 0; - transition: all 0.5s; - box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); - } - - input { - display: none; - - &:checked+label { - border-color: #666; - opacity: 1; - - +img { - opacity: 1; - transform: scale(1); - } - } - - ~ img { - opacity: 0; - transform: scale(1.1); - } - } - - label { - display: inline-block; - margin-top: calc(50% + 15px); - margin-left: 15px; - border: 3px solid #999; - cursor: pointer; - opacity: 0.6; - - img{ - display: block; - } - } -} - -.slider-3 { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - - .icon-cards { - position: relative; - width: 60vw; - height: 40vw; - max-width: 380px; - max-height: 250px; - margin: 0; - perspective: 1000px; - - &-content { - position: absolute; - width: 100%; - height: 100%; - transform-style: preserve-3d; - transform: translateZ(-30vw) rotateY(0); - animation: carousel 30s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards; - } - - &-item { - position: absolute; - top: 0; - left: 0; - width: 60vw; - height: 40vw; - max-width: 380px; - max-height: 250px; - - &:nth-child(1) { - transform: rotateY(0) translateZ(35vw); - } - - &:nth-child(2) { - transform: rotateY(120deg) translateZ(35vw); - } - - &:nth-child(3) { - transform: rotateY(240deg) translateZ(35vw); - } - } - - img { - width: 100%; - } - } -} - -@keyframes carousel { - 0%, 17.5% { transform: translateZ(-35vw) rotateY(0); } - 27.5%, 45% { transform: translateZ(-35vw) rotateY(-120deg); } - 55%, 72.5% { transform: translateZ(-35vw) rotateY(-240deg); } - 82.5%, 100% { transform: translateZ(-35vw) rotateY(-360deg); } } \ No newline at end of file diff --git a/input.scss b/input.scss index 08bba02..e3153c3 100644 --- a/input.scss +++ b/input.scss @@ -46,10 +46,8 @@ input[type="datetime-local"] { color: var(--input-color); background: var(--input-background); width: 100%; - height: 2rem; min-width: 70px; max-width: 100%; - padding: 7px; font-size: 1rem; border: 1px solid var(--input-border); transition: background 0.3s, border 0.3s; @@ -61,10 +59,25 @@ input[type="datetime-local"] { } &:disabled { + cursor: not-allowed; background: #efefef; } } +.textarea, +.tag-input, +textarea, +select:not([multiple]), +input[type="password"], +input[type="text"], +input[type="datetime"], +input[type="email"], +input[type="date"], +input[type="number"], +input[type="datetime-local"] { + height: 2rem; +} + .inputWrapper { display: flex; flex-direction: row; @@ -214,8 +227,10 @@ input[type="datetime-local"] { a { display: block; + /* &:hover, &:focus { } + */ } } @@ -225,7 +240,7 @@ input[type="datetime-local"] { } } -input + .popup { +input ~ .popup { position: absolute; /* All other options e.g. static, relative resize the container which is bad */ display: none; z-index: 3; diff --git a/menu.scss b/menu.scss new file mode 100644 index 0000000..a535f35 --- /dev/null +++ b/menu.scss @@ -0,0 +1,14 @@ +.context-menu { + position: absolute; + background: #fff; + border: 1px solid #ccc; + z-index: 1000; // Table headers are sticky which has a z-index of 999. The menu should be above + + label { + padding: .5rem; + } + + label:hover { + background: var(--table-row-background-hover); + } +} \ No newline at end of file diff --git a/progress.scss b/progress.scss index 425e706..1d5d8ea 100644 --- a/progress.scss +++ b/progress.scss @@ -173,7 +173,7 @@ .timeline label { font-size: 1.3em; position: absolute; - z-index: 100; + z-index: 90; top: 20px; } diff --git a/slider.scss b/slider.scss index a15d59f..99d6aeb 100644 --- a/slider.scss +++ b/slider.scss @@ -5,4 +5,136 @@ ul { display: inline; } +} + +@keyframes slidy { + 0% { left: 0%; } + 20% { left: 0%; } + 25% { left: -100%; } + 45% { left: -100%; } + 50% { left: -200%; } + 70% { left: -200%; } + 75% { left: -300%; } + 95% { left: -300%; } + 100% { left: -400%; } +} + +div.slider-1 { + overflow: hidden; + + figure { + position: relative; + width: 500%; + margin: 0; + left: 0; + text-align: left; + font-size: 0; + animation: 30s slidy infinite; + + img { + width: 20%; float: left; + } + } +} + +.slider-2 { + width: 100%; + position: relative; + text-align: center; + + > img { + width: 100%; + position: absolute; + left: 0; top: 0; + transition: all 0.5s; + } + + input { + display: none; + + &:checked+label { + border-color: #666; + opacity: 1; + + +img { + opacity: 1; + transform: scale(1); + } + } + + ~ img { + opacity: 0; + transform: scale(0.9); + } + } + + label { + display: inline-block; + margin-top: calc(50% + 15px); + margin-left: 15px; + border: 3px solid #999; + cursor: pointer; + opacity: 0.6; + + img{ + display: block; + } + } +} + +.slider-3 { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + .icon-cards { + position: relative; + width: 60vw; + height: 40vw; + max-width: 380px; + max-height: 250px; + margin: 0; + perspective: 1000px; + + &-content { + position: absolute; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transform: translateZ(-30vw) rotateY(0); + animation: carousel 30s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards; + } + + &-item { + position: absolute; + top: 0; + left: 0; + max-width: 380px; + max-height: 250px; + + &:nth-child(1) { + transform: rotateY(0) translateZ(35vw); + } + + &:nth-child(2) { + transform: rotateY(120deg) translateZ(35vw); + } + + &:nth-child(3) { + transform: rotateY(240deg) translateZ(35vw); + } + } + + img { + width: 100%; + } + } +} + +@keyframes carousel { + 0%, 17.5% { transform: translateZ(-35vw) rotateY(0); } + 27.5%, 45% { transform: translateZ(-35vw) rotateY(-120deg); } + 55%, 72.5% { transform: translateZ(-35vw) rotateY(-240deg); } + 82.5%, 100% { transform: translateZ(-35vw) rotateY(-360deg); } } \ No newline at end of file diff --git a/styles.css b/styles.css index 663876d..ce36d57 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; } @@ -3219,13 +3172,15 @@ article { color: #48465b; line-height: 2rem; white-space: normal; } - article del, article ins { + article del, article ins, article mark { padding: 3px; text-decoration: none; } article del { background: #ff9e9e; } article ins { background: #b0f3b0; } + article mark { + background: #f9ffa1; } article h1, article h2, article h3, article h4, article h5, article h6 { font-weight: 500; } article h1 { @@ -3338,7 +3293,6 @@ p { background-position: 0; } 100% { background-position: -100%; } } - .tooltip { cursor: pointer; color: var(--box-highlight); @@ -3375,7 +3329,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); @@ -3386,7 +3339,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 { @@ -3409,7 +3361,6 @@ p { -webkit-transform: scale(0); } 40% { -webkit-transform: scale(1); } } - @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); @@ -3417,7 +3368,6 @@ p { 40% { -webkit-transform: scale(1); transform: scale(1); } } - .spinner-3 { width: 40px; height: 40px; @@ -3433,7 +3383,6 @@ p { 100% { -webkit-transform: scale(1); opacity: 0; } } - @keyframes sk-scaleout { 0% { -webkit-transform: scale(0); @@ -3442,7 +3391,6 @@ p { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } - canvas { background: #fff; user-select: none; } @@ -3452,23 +3400,18 @@ 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: black; } - form i + i { margin-left: 3px; } - form .layout td + td { padding-left: 5px; } - form .list { font-size: 1rem; } form .list td { @@ -3492,6 +3435,8 @@ form .list { flex-wrap: wrap; } .form-group .input-control + .input-control { margin-left: 1rem; } + .form-group textarea { + height: 8rem; } * + .form-group { margin-top: .75rem; } @@ -3499,7 +3444,6 @@ form .list { @media (max-width: 768px) { .form-group { flex-direction: column; } } - .infoIcon { width: var(--badge-size); text-align: center; @@ -3527,140 +3471,17 @@ 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); } -@keyframes slidy { - 0% { - left: 0%; } - 20% { - left: 0%; } - 25% { - left: -100%; } - 45% { - left: -100%; } - 50% { - left: -200%; } - 70% { - left: -200%; } - 75% { - left: -300%; } - 95% { - left: -300%; } - 100% { - left: -400%; } } - -div.slider-1 { - overflow: hidden; } - div.slider-1 figure { - position: relative; - width: 500%; - margin: 0; - left: 0; - text-align: left; - font-size: 0; - animation: 30s slidy infinite; } - div.slider-1 figure img { - width: 20%; - float: left; } - -.slider-2 { - width: 100%; - position: relative; - text-align: center; } - .slider-2 > img { - width: 100%; - position: absolute; - left: 0; - top: 0; - transition: all 0.5s; - box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); } - .slider-2 input { - display: none; } - .slider-2 input:checked + label { - border-color: #666; - opacity: 1; } - .slider-2 input:checked + label + img { - opacity: 1; - transform: scale(1); } - .slider-2 input ~ img { - opacity: 0; - transform: scale(1.1); } - .slider-2 label { - display: inline-block; - margin-top: calc(50% + 15px); - margin-left: 15px; - border: 3px solid #999; - cursor: pointer; - opacity: 0.6; } - .slider-2 label img { - display: block; } - -.slider-3 { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; } - .slider-3 .icon-cards { - position: relative; - width: 60vw; - height: 40vw; - max-width: 380px; - max-height: 250px; - margin: 0; - perspective: 1000px; } - .slider-3 .icon-cards-content { - position: absolute; - width: 100%; - height: 100%; - transform-style: preserve-3d; - transform: translateZ(-30vw) rotateY(0); - animation: carousel 30s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards; } - .slider-3 .icon-cards-item { - position: absolute; - top: 0; - left: 0; - width: 60vw; - height: 40vw; - max-width: 380px; - max-height: 250px; } - .slider-3 .icon-cards-item:nth-child(1) { - transform: rotateY(0) translateZ(35vw); } - .slider-3 .icon-cards-item:nth-child(2) { - transform: rotateY(120deg) translateZ(35vw); } - .slider-3 .icon-cards-item:nth-child(3) { - transform: rotateY(240deg) translateZ(35vw); } - .slider-3 .icon-cards img { - width: 100%; } - -@keyframes carousel { - 0%, 17.5% { - transform: translateZ(-35vw) rotateY(0); } - 27.5%, 45% { - transform: translateZ(-35vw) rotateY(-120deg); } - 55%, 72.5% { - transform: translateZ(-35vw) rotateY(-240deg); } - 82.5%, 100% { - transform: translateZ(-35vw) rotateY(-360deg); } } - /** * @todo Orange-Management/cssOMS#4 * Nicer visual input validation @@ -3703,10 +3524,8 @@ input[type="datetime-local"] { color: var(--input-color); background: var(--input-background); width: 100%; - height: 2rem; min-width: 70px; max-width: 100%; - padding: 7px; font-size: 1rem; border: 1px solid var(--input-border); transition: background 0.3s, border 0.3s; } @@ -3755,8 +3574,22 @@ input[type="datetime-local"] { input[type="date"]:disabled, input[type="number"]:disabled, input[type="datetime-local"]:disabled { + cursor: not-allowed; background: #efefef; } +.textarea, +.tag-input, +textarea, +select:not([multiple]), +input[type="password"], +input[type="text"], +input[type="datetime"], +input[type="email"], +input[type="date"], +input[type="number"], +input[type="datetime-local"] { + height: 2rem; } + .inputWrapper { display: flex; flex-direction: row; } @@ -3804,10 +3637,8 @@ input[type="datetime-local"] { .clickPopup label + input { display: none; } - .clickPopup .more-functions { padding: 0 1rem 0 1rem; } - .clickPopup .popup { box-sizing: border-box; padding: .5rem 1rem .5rem 1rem; @@ -3850,11 +3681,15 @@ input[type="datetime-local"] { .clickPopup .popup > li { display: block; } .clickPopup .popup > li a { - display: block; } + display: block; + /* + &:hover, &:focus { + } + */ } .clickPopup .popup i { flex-grow: 0; } -input + .popup { +input ~ .popup { position: absolute; /* All other options e.g. static, relative resize the container which is bad */ display: none; @@ -4006,8 +3841,8 @@ select.plain { box-shadow: none; } .ac-container { - margin: 1rem auto 1rem auto; - text-align: left; } + text-align: left; + border: 1px solid #c9c9c9; } .ac-container > input { display: none; } .ac-container > input:checked + label { @@ -4015,6 +3850,8 @@ select.plain { color: var(--text-on-background-color-2); } .ac-container > input:checked + label + section { display: inherit; } + .ac-container > input:checked + label:hover { + background: var(--button-colored-background-hover); } .ac-container > input + label + section { display: none; } .ac-container label { @@ -4024,11 +3861,11 @@ select.plain { z-index: 20; margin-top: -1px; cursor: pointer; - color: var(--text-on-background-color-2); + color: #000; font-size: 1rem; - border: 1rem solid var(--box-border); background: var(--box-border); } .ac-container label:hover { + color: var(--text-on-background-color-2); background: var(--button-colored-background-hover); } .ac-container > section { background: #fff; @@ -4036,8 +3873,6 @@ select.plain { height: auto; position: relative; z-index: 10; - border-left: 1px solid var(--box-border); - border-right: 1px solid var(--box-border); padding: 1rem; } .more-container > label { @@ -4055,20 +3890,16 @@ select.plain { 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; } @@ -4102,6 +3933,114 @@ select.plain { .slider ul { display: inline; } +@keyframes slidy { + 0% { + left: 0%; } + 20% { + left: 0%; } + 25% { + left: -100%; } + 45% { + left: -100%; } + 50% { + left: -200%; } + 70% { + left: -200%; } + 75% { + left: -300%; } + 95% { + left: -300%; } + 100% { + left: -400%; } } +div.slider-1 { + overflow: hidden; } + div.slider-1 figure { + position: relative; + width: 500%; + margin: 0; + left: 0; + text-align: left; + font-size: 0; + animation: 30s slidy infinite; } + div.slider-1 figure img { + width: 20%; + float: left; } + +.slider-2 { + width: 100%; + position: relative; + text-align: center; } + .slider-2 > img { + width: 100%; + position: absolute; + left: 0; + top: 0; + transition: all 0.5s; } + .slider-2 input { + display: none; } + .slider-2 input:checked + label { + border-color: #666; + opacity: 1; } + .slider-2 input:checked + label + img { + opacity: 1; + transform: scale(1); } + .slider-2 input ~ img { + opacity: 0; + transform: scale(0.9); } + .slider-2 label { + display: inline-block; + margin-top: calc(50% + 15px); + margin-left: 15px; + border: 3px solid #999; + cursor: pointer; + opacity: 0.6; } + .slider-2 label img { + display: block; } + +.slider-3 { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; } + .slider-3 .icon-cards { + position: relative; + width: 60vw; + height: 40vw; + max-width: 380px; + max-height: 250px; + margin: 0; + perspective: 1000px; } + .slider-3 .icon-cards-content { + position: absolute; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transform: translateZ(-30vw) rotateY(0); + animation: carousel 30s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards; } + .slider-3 .icon-cards-item { + position: absolute; + top: 0; + left: 0; + max-width: 380px; + max-height: 250px; } + .slider-3 .icon-cards-item:nth-child(1) { + transform: rotateY(0) translateZ(35vw); } + .slider-3 .icon-cards-item:nth-child(2) { + transform: rotateY(120deg) translateZ(35vw); } + .slider-3 .icon-cards-item:nth-child(3) { + transform: rotateY(240deg) translateZ(35vw); } + .slider-3 .icon-cards img { + width: 100%; } + +@keyframes carousel { + 0%, 17.5% { + transform: translateZ(-35vw) rotateY(0); } + 27.5%, 45% { + transform: translateZ(-35vw) rotateY(-120deg); } + 55%, 72.5% { + transform: translateZ(-35vw) rotateY(-240deg); } + 82.5%, 100% { + transform: translateZ(-35vw) rotateY(-360deg); } } blockquote { border: 1px solid var(--box-border); background: #ccc; @@ -4167,16 +4106,12 @@ 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; } @@ -4206,12 +4141,33 @@ button, input[type="submit"], input[type="button"], label.button, a.button { 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 { background: var(--button-colored-background-hover); } + button i, input[type="submit"] i, input[type="button"] i, label.button i, a.button i { + margin: 0 .5rem 0 0; } + +button.save, .button.save { + color: rgba(0, 0, 0, 0.75); + background: #8fff79; } + button.save:hover, button.save:focus, .button.save:hover, .button.save:focus { + background: #a1ffa1; } button.cancel, .button.cancel { background: #ee5649; } button.cancel:hover, button.cancel:focus, .button.cancel:hover, .button.cancel:focus { background: #ff7d79; } +button.close, .button.close { + color: rgba(0, 0, 0, 0.75); + background: #f1ff70; } + button.close:hover, button.close:focus, .button.close:hover, .button.close:focus { + background: #faffa1; } + +button.disabled, .button.disabled { + color: rgba(0, 0, 0, 0.5); + background: #e1e1e1; + cursor: not-allowed; } + button.disabled:hover, button.disabled:focus, .button.disabled:hover, .button.disabled:focus { + background: #e1e1e1; } + .unseen { font-weight: bold; } @@ -4363,27 +4319,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; } @@ -4425,19 +4379,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); @@ -4519,7 +4470,7 @@ body > nav { .timeline label { font-size: 1.3em; position: absolute; - z-index: 100; + z-index: 90; top: 20px; } .timeline-radio { @@ -4580,7 +4531,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; @@ -4593,7 +4543,6 @@ section > h2 { .pagebreak { page-break-after: always; display: block; } } - .tabview .tab-links { color: #000; padding: 0.3rem 0 0 0; } @@ -4601,54 +4550,51 @@ section > h2 { font-size: 0.9em; user-select: none; cursor: pointer; - border: 1px solid var(--button-colored-background-hover); } + border: 1px solid var(--button-colored-background); + white-space: nowrap; } .tabview .tab-links label:hover, .tabview .tab-links label:focus { color: var(--text-on-background-color-2); background: var(--button-colored-background-hover); + border: 1px solid var(--button-colored-background-hover); outline: none; } .tabview .tab-links .active label:hover, .tabview .tab-links .active label:focus { color: var(--text-on-background-color-2); background: var(--button-colored-background-hover); + border: 1px solid var(--button-colored-background-hover); outline: none; } - .tabview .tab-links .active a { + .tabview .tab-links .active label { 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; } .tab-1 .tab-links { - margin: 0; - border-bottom: 1px solid var(--box-border); } + margin: 0 0 10px 1px; + /* + .active label { + border: 1px solid var(--box-border); + } + */ } .tab-1 .tab-links label { - padding: 5px 10px 1px 10px; + padding: 5px; background: none; - overflow: auto; } + overflow: auto; + background: #fff; } .tab-1 .tab-links .active, .tab-1 .tab-links .active label { - background: var(--button-colored-background); - border-bottom: 1px solid var(--button-colored-background); } - .tab-1 .tab-links .active label { - border-top: 1px solid var(--box-border); - border-left: 1px solid var(--box-border); - border-right: 1px solid var(--box-border); } + color: var(--text-on-background-color-2); + background: var(--button-colored-background); } .tab-1 .tab-links li { margin: 0 5px 0 0; } - .tab-1 .tab-content { box-sizing: border-box; - background: var(--button-colored-background); - border-left: 1px solid var(--box-border); - border-right: 1px solid var(--box-border); - border-bottom: 1px solid var(--box-border); + border: 1px solid var(--button-colored-background); + background: #fff; padding: 10px; } - .tab-1.left { display: flex; } .tab-1.left .tab-links { @@ -4657,27 +4603,37 @@ section > h2 { .tab-1.left .tab-links li { display: block; margin-bottom: 20px; } - .tab-1.left .tab-links label { - padding-bottom: 5px; } .tab-1.left .tab-links .active label { - border-bottom: 1px solid var(--box-border); } + border: 1px solid var(--box-border); } .tab-1.left .tab-content { - width: 100%; - border-top: 1px solid var(--box-border); } + width: 100%; } .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); } +.tab-2.left { + display: flex; } + .tab-2.left .tab-links { + margin: 0; + border: none; } + .tab-2.left .tab-links li { + display: block; + margin-bottom: 20px; } + .tab-2.left .tab-links .active label { + border: 1px solid var(--box-border); } + .tab-2.left .tab-content { + width: 100%; } table.fixed { table-layout: fixed; } +table.default tbody tr.drag-placeholder td { + border: 2px dashed rgba(0, 0, 0, 0.5) !important; } + table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc { display: none; } @@ -4695,6 +4651,9 @@ table thead i.fa { table input[type=radio]:checked + i { color: var(--button-colored-background); } +table input[type=checkbox]:checked + label i { + color: var(--button-colored-background); } + table .sort-asc, table .sort-desc, table .filter { padding: 0 2px 0 2px; cursor: pointer; } @@ -4828,7 +4787,6 @@ table.default { table.list th { text-align: left; padding: 2px 0 2px 0; } - table.list td { padding: 2px 5px 2px 5px; } @@ -4869,7 +4827,6 @@ table.list td { font-weight: bold; } table.table tfoot { display: none; } } - .nobreak { white-space: nowrap; } @@ -4974,3 +4931,13 @@ span.tag { .portlet.highlight-4 .portlet-body, .portlet.highlight-4 .portlet-head { background: var(--color-yellow); border: 0; } + +.context-menu { + position: absolute; + background: #fff; + border: 1px solid #ccc; + z-index: 1000; } + .context-menu label { + padding: .5rem; } + .context-menu label:hover { + background: var(--table-row-background-hover); } diff --git a/styles.scss b/styles.scss index c68e611..1c90269 100644 --- a/styles.scss +++ b/styles.scss @@ -1,4 +1,4 @@ @import "clean", "default", "size", "transformation", "alignment", "visibility", "animate", "grid"; @import "article", "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "badge", "slider", "blockquote", "breadcrumb", "button", "link", "list", "nav", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag"; @import "media"; -@import "portlet"; \ No newline at end of file +@import "portlet", "menu"; \ No newline at end of file diff --git a/tab.scss b/tab.scss index 8316b71..3c6a479 100644 --- a/tab.scss +++ b/tab.scss @@ -7,11 +7,13 @@ font-size: 0.9em; user-select: none; cursor: pointer; - border: 1px solid var(--button-colored-background-hover); + border: 1px solid var(--button-colored-background); + white-space: nowrap; &:hover, &:focus { color: var(--text-on-background-color-2); background: var(--button-colored-background-hover); + border: 1px solid var(--button-colored-background-hover); outline: none; } } @@ -19,11 +21,14 @@ .active label:hover, .active label:focus { color: var(--text-on-background-color-2); background: var(--button-colored-background-hover); + border: 1px solid var(--button-colored-background-hover); outline: none; } - .active a { - cursor: default; + .active { + label { + cursor: default; + } } li { @@ -48,25 +53,25 @@ .tab-1 { .tab-links { - margin: 0; - border-bottom: 1px solid var(--box-border); + margin: 0 0 10px 1px; label { - padding: 5px 10px 1px 10px; + padding: 5px; background: none; overflow: auto; + background: #fff; } .active, .active label { + color: var(--text-on-background-color-2); background: var(--button-colored-background); - border-bottom: 1px solid var(--button-colored-background); } + /* .active label { - border-top: 1px solid var(--box-border); - border-left: 1px solid var(--box-border); - border-right: 1px solid var(--box-border); + border: 1px solid var(--box-border); } + */ li { margin: 0 5px 0 0; @@ -75,10 +80,8 @@ .tab-content { box-sizing: border-box; - background: var(--button-colored-background); - border-left: 1px solid var(--box-border); - border-right: 1px solid var(--box-border); - border-bottom: 1px solid var(--box-border); + border: 1px solid var(--button-colored-background); + background: #fff; padding: 10px; } @@ -95,18 +98,13 @@ margin-bottom: 20px; } - label { - padding-bottom: 5px; - } - .active label { - border-bottom: 1px solid var(--box-border); + border: 1px solid var(--box-border); } } .tab-content { width: 100%; - border-top: 1px solid var(--box-border); } } } @@ -126,4 +124,26 @@ background: var(--button-colored-background) } } + + &.left { + display: flex; + + .tab-links { + margin: 0; + border: none; + + li { + display: block; + margin-bottom: 20px; + } + + .active label { + border: 1px solid var(--box-border); + } + } + + .tab-content { + width: 100%; + } + } } diff --git a/table.scss b/table.scss index a532a26..7f719f3 100644 --- a/table.scss +++ b/table.scss @@ -1,9 +1,11 @@ - - table.fixed { table-layout: fixed; } +table.default tbody tr.drag-placeholder td { + border: 2px dashed rgba(0, 0, 0, 0.5) !important; +} + table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc { display: none; } @@ -26,6 +28,11 @@ table input[type=radio]:checked + i { color: var(--button-colored-background); } +// @todo: check!!!! +table input[type=checkbox]:checked + label i { + color: var(--button-colored-background); +} + table .sort-asc, table .sort-desc, table .filter { padding: 0 2px 0 2px; cursor: pointer; diff --git a/tests/StandardElements.htm b/tests/StandardElements.htm deleted file mode 100644 index 9dbd71e..0000000 --- a/tests/StandardElements.htm +++ /dev/null @@ -1,873 +0,0 @@ - - - - - Style Test - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Boxes

-

Simple

-
This is some test text.
-
This is some text in a inner box
-

Headline

This is some text in a inner box
-

Header1

This is some text in a inner box
- -

Colored

-

Header1

This is some text in a inner box
-

Header1

This is some text in a inner box
-

Header1

This is some text in a inner box
-

Header1

This is some text in a inner box
-

Header1

This is some text in a inner box
-

Header1

This is some text in a inner box
- -

Article

-
-
-

Headline1

-

Headline2

-

Headline3

-

Headline4

-
Headline5
-
Headline6
- Headline7 -

TooltipMy Tooltip asd a sd
asdfsdf adf asd ipsum dolor sit amet, - consectetur adipiscing elit. Duis posuere, nulla eu condimentum eleifend, nulla magna viverra risus, ut - faucibus libero libero nec est. Nunc quis rhoncus est, ac sodales lorem. Suspendisse convallis, massa eu - volutpat posuere, justo dolor porta dui, a ullamcorper ex ipsum eget arcu. Cras quis - ante placerat, tempus orci vitae, semper nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere - cubilia Curae; Duis at sodales sapien. Morbi dolor risus, finibus ut ipsum non, pellentesque varius ex. Etiam - pretium tempus diam at eleifend. Quisque a tortor et nisi commodo pretium ac at erat. Nam non iaculis - ipsum, ultrices tempus nisl. Pellentesque ornare tellus vehicula sapien fringilla cursus. Duis sed tellus - sagittis elit accumsan placerat et nec ex. In sit amet blandit nunc, a pulvinar nunc. Phasellus vulputate - facilisis lorem eget aliquet. Curabitur odio ante, lobortis vitae est at, consequat posuere elit.

- -

LoremMy Tooltip asd a sd asdfsdf adf asd sed nulla et ante - consectetur dictum. Nunc molestie ligula eget felis tincidunt suscipit. Fusce scelerisque diam lectus, non faucibus - ligula sagittis eu. Sed id porttitor purus. Donec in dolor scelerisque, suscipit metus in, molestie sem. - Nulla facilisi. Nunc eu lobortis tellus.

-
This is a blockquote
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table Title
Col1 TitleCol2 TitleCol3 TitleCol4 Title
Col1Col2Col3Col4
Col1Col2Col3Col4
Col1Col2Col3Col4
Col1Col2Col3Col4
- - -
-
- -

Buttons

-

Normal

-
- - - - - - - - -
- -

Connected

-
-
    -
  • One -
  • Two -
  • Three -
  • Four -
-
- -

Tags

-
- Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag -
- -

Tooltips

-
TooltipMy Tooltip asd a sd
asdfsdf adf asd
- -

Widths

-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
- -

Icons

-
- - 777 - - - 5 - - - 999 - - - 123 - - - 33 - -
- -

Form

-

Default

-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - -
- - - - - - - - - - - - - - - - -
Value to changeValue to change2
Value to changeValue to change2
Value to changeValue to change2
-
- - - - - - - -
-
-
-
-
-
Check - Radio -
Check - Radio -
Radio -
-
-
- -
-
-
-
-
-
- -

Input

-
-
-
- - - - - - - - - - -
-
-
-
- -
-
-
- - - - -
-
-
- -
-
-
-
-
-
- -

To List

-
-
-
- - - - - - - - - - -
-
-
-
- -
-
-
- -
-
- -
-
-
-
-
-
- -

Dropdown

-
-
-
- - - - - - - - - - -
-
-
-
- -
-
-
- -
-
- -
-
-
-
-
-
- -

Navigation

-

Content

-
-
    -
  • About
    • -
  • - Portfolio -
      -
    • Web Design
      • -
    • Web Development
      • -
    • Illustrations
      • -
    -
    • -
  • Blog
    • -
  • Contact
    • -
-
- -

Tables

-

Neutral

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table Title
Col1 TitleCol2 TitleCol3 TitleCol4 Title
Col1Col2Col3Col4
Col1Col2Col3Col4
Col1Col2Col3Col4
Col1Col2Col3Col4
- - -
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
  • 4
    • -
  • ...
    • -
  • 20
    • -
-
-
- -

Tabs

-

With Container

-
-
-
    -
    • -
    • -
-
- -
- Test content -
- -
-

Test content 2

asdf

-
-
-
-
- -

Without Container

-
-
-
    -
    • -
    • -
-
- -
- Test content -
- -
-

Test content 2

asdf

-
-
-
-
- -

Accordion

-
- - -
-

Well, the way they make shows is, they make one show. That show's called a pilot. Then they show - that show to the people who make shows, and on the strength of that one show they decide if - they're going to make more shows.

-
- - -
-

Like you, I used to think the world was this great place where everybody lived by the same - standards I did, then some kid with a nail showed me I was living in his world, a world where - chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if - you're not willing to play by his rules, then you're gonna have to pay the price.

-
- - -
-

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it - killed the world once and got a taste for murder. After the avalanche, it took us a week to - climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us - survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We - said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it - doesn't hold a candle to man.

- -

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it - killed the world once and got a taste for murder. After the avalanche, it took us a week to - climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us - survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We - said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it - doesn't hold a candle to man.

-
- - -
-

You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell - everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in - the future when the spacecraft encounters a black hole does the computer call it an 'unknown - entry event'? Why don't they know? If they don't know, that means we never told anyone. And if - we never told anyone it means we never made it back. Hence we die down here. Just as a matter of - deductive logic.

-
-
- -

Breadcrumbs

-
-
    -
  • One
    • -
  • Two
    • -
  • Three
    • -
  • Four
    • -
-
- -
-
    -
  • One
    • -
  • Two
    • -
  • Three
    • -
  • Four
    • -
  • Five
    • -
-
-
- -

Alerts

-
-
This is ok
-
-
-
This is a info
-
-
-
This is a warning
-
-
-
This is an error
-
- -

Images

-
- -
-
- -
-
- -
-
- -

Ranges

-
-
- -
-
-
-
- -
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
- -

Spinner

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -

Slider

-

Automatic

-
-
-
- - - - - -
-
-
- -

Clickable

-
-
- - - - - - - - - - - - - - - - -
-
-
- - diff --git a/tests/app/alerts.php b/tests/app/alerts.php new file mode 100644 index 0000000..f1882c9 --- /dev/null +++ b/tests/app/alerts.php @@ -0,0 +1,9 @@ +
This is ok
+
This is a info
+
This is a warning
+
This is an error
+ +
+

This is a Title

+
This is a message
+
\ No newline at end of file diff --git a/tests/app/article.php b/tests/app/article.php index 3eef5cb..a6d8553 100644 --- a/tests/app/article.php +++ b/tests/app/article.php @@ -1,104 +1,102 @@
-
-
-

Ordered List

-
    -
  1. one
    2. -
  2. two
    3. -
-

repeating numbers:

-
    -
  1. one
    2. -
  2. two
    3. -
-

large numbers:

-
    -
  1. one
    2. -
-

Unordered List

-
    -
  • li
    • -
  • li
    • -
-

mixed markers:

-
    -
  • li
    • -
  • li
    • -
  • li
    • -
-

Code

-

a code span

-

this is also a codespan trailing text

-

and look at this one!

-

single backtick in a code span: `

-

backtick-delimited string in a code span: `foo`

-

sth `` sth

-

Code

- 
<?php
+        

+            

+                

+                    
Text

+                    
TooltipMy Tooltip asd a sd 
asdfsdf adf asd ipsum dolor sit amet,
+                        consectetur adipiscing elit. Duis posuere, nulla eu condimentum eleifend, nulla magna viverra risus, ut
+                        faucibus libero libero nec est. Nunc quis rhoncus est, ac sodales lorem. Suspendisse convallis, massa eu
+                        volutpat posuere, justo dolor porta dui, a ullamcorper ex ipsum eget arcu. Cras quis
+                        ante placerat, tempus orci vitae, semper nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+                        cubilia Curae; Duis at sodales sapien. Morbi dolor risus, finibus ut ipsum non, pellentesque varius ex. Etiam
+                        pretium tempus diam at eleifend. Quisque a tortor et nisi commodo pretium ac at erat. Nam non iaculis
+                        ipsum, ultrices tempus nisl. Pellentesque ornare tellus vehicula sapien fringilla cursus. Duis sed tellus
+                        sagittis elit accumsan placerat et nec ex. In sit amet blandit nunc, a pulvinar nunc. Phasellus vulputate
+                        facilisis lorem eget aliquet. Curabitur odio ante, lobortis vitae est at, consequat posuere elit.

 
-                $message = 'fenced code block';
-                echo $message;
- 
tilde
- 
echo 'language identifier';
-
Table
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table Title
Col1 TitleCol2 TitleCol3 TitleCol4 Title
Col1Col2Col3Col4
Col1Col2Col3Col4
Col1Col2Col3Col4
Col1Col2Col3Col4
-
Headline6
-

TooltipMy Tooltip asd a sd
asdfsdf adf asd ipsum dolor sit amet, - consectetur adipiscing elit. Duis posuere, nulla eu condimentum eleifend, nulla magna viverra risus, ut - faucibus libero libero nec est. Nunc quis rhoncus est, ac sodales lorem. Suspendisse convallis, massa eu - volutpat posuere, justo dolor porta dui, a ullamcorper ex ipsum eget arcu. Cras quis - ante placerat, tempus orci vitae, semper nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere - cubilia Curae; Duis at sodales sapien. Morbi dolor risus, finibus ut ipsum non, pellentesque varius ex. Etiam - pretium tempus diam at eleifend. Quisque a tortor et nisi commodo pretium ac at erat. Nam non iaculis - ipsum, ultrices tempus nisl. Pellentesque ornare tellus vehicula sapien fringilla cursus. Duis sed tellus - sagittis elit accumsan placerat et nec ex. In sit amet blandit nunc, a pulvinar nunc. Phasellus vulputate - facilisis lorem eget aliquet. Curabitur odio ante, lobortis vitae est at, consequat posuere elit.

- -

LoremMy Tooltip asd a sd asdfsdf adf asd sed nulla et ante - consectetur dictum. Nunc molestie ligula eget felis tincidunt suscipit. Fusce scelerisque diam lectus, non faucibus - ligula sagittis eu. Sed id porttitor purus. Donec in dolor scelerisque, suscipit metus in, molestie sem. - Nulla facilisi. Nunc eu lobortis tellus.

-
This is a blockquote
+

LoremMy Tooltip asd a sd asdfsdf adf asd sed nulla et ante + consectetur dictum. Nunc molestie ligula eget felis tincidunt suscipit. Fusce scelerisque diam lectus, non faucibus + ligula sagittis eu. Sed id porttitor purus. Donec in dolor scelerisque, suscipit metus in, molestie sem. + Nulla facilisi. Nunc eu lobortis tellus.

+
This is a blockquote
-
+ +

Ordered List

+
    +
  1. one
    2. +
  2. two
    3. +
+

repeating numbers:

+
    +
  1. one
    2. +
  2. two
    3. +
+

large numbers:

+
    +
  1. one
    2. +
+ +

Unordered List

+
    +
  • first element
    • +
  • second element
    • +
      +
    • next level
      • +
    +
+ +

Code

+

This is a inline codespan with text in front and at the end.

+ +
Code
+ 
<?php
+
+                    $message = 'fenced code block';
+                    echo $message;
+ 
echo 'language identifier';
+
Table
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table Title
Col1 TitleCol2 TitleCol3 TitleCol4 Title
Col1Col2Col3Col4
Col1Col2Col3Col4
Col1Col2Col3Col4
Col1Col2Col3Col4
+ + +
\ No newline at end of file diff --git a/tests/app/buttons.php b/tests/app/buttons.php index 2f4176e..55e906f 100644 --- a/tests/app/buttons.php +++ b/tests/app/buttons.php @@ -1,43 +1,32 @@
-
-
-
    -
  • One -
  • Two -
  • Three -
  • Four -
-
-
-
- -
-
-
- - - - - - - - -
-
-
- -
-
-
-
- - - - - - - - +
+
+
+
+ Normal: + + +
+
+ Cancel: + + +
+
+ Save: + + +
+
+ Close: + + +
+
+ Disabled: + + +
diff --git a/tests/app/data/account.json b/tests/app/data/account.json new file mode 100644 index 0000000..12880c9 --- /dev/null +++ b/tests/app/data/account.json @@ -0,0 +1 @@ +[[{"id":1,"name":["admin","",""],"email":"admin@oms.com","login":"admin","groups":[],"permissions":[],"type":0,"status":1,"type_prefix":"a","type_name":"Account"},{"id":3,"name":["admin"],"description":"","permissions":[],"members":[],"email":"---","type_prefix":"g","type_name":"Group"}]] \ No newline at end of file diff --git a/tests/app/forms.php b/tests/app/forms.php index 923138d..c1647b9 100644 --- a/tests/app/forms.php +++ b/tests/app/forms.php @@ -1,119 +1,170 @@
-
-
-

Default

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
+
+
+ +
Default
+
+
+ + +
+ +
+ + +
+ +
+ +
+
+
+
+
+ +
+ + +
+ +
+ + + + + + + + + +
+ +
+
+ +
-
-
+
+ + +
-
-
- - - - - - - -
-
-
-
-
-
-
Check - Radio -
Check - Radio -
Radio -
+ + + +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+ +
+ + +
+ +
+ + +
+ +
+
+ + -
- + -
-
- - - -
-
-
-
-
+
+
+ +
+ + +
+
+
+ +
+
\ No newline at end of file diff --git a/tests/app/forms_data_selection.php b/tests/app/forms_data_selection.php new file mode 100644 index 0000000..85452cf --- /dev/null +++ b/tests/app/forms_data_selection.php @@ -0,0 +1,468 @@ +
+
+
+
Input+Autocomplete+Dropdown+Remote
+
+
+
+
+
+
+ +
+
+
Input+Autocomplete+Dropdown+Local
+
+
+ +
+
+
+
+
+ +
+
+
+
Input+Autocomplete+Dropdown+Badge+Remote
+
+
+
+ +
+
+
+ + +
+ + +
+ + + + + + +
Type + ID + Name + Email +
+
+
+ +
+
+
+
+ +
+
+
+ +
+ +
+
+
+ + +
+ + +
+ + + + + + +
Type + ID + Name + Email +
+
+
+ +
+
+
+
+ +
+
+
+ +
+ +
+
+
+ + +
+ + +
+ + + + + + +
Type + ID + Name + Email +
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
Input+Autocomplete+Dropdown+Badge+Local
+
+
+
+
+
+
+
+ +
+
+
+
Input+Autocomplete+Dropdown+Table+Remote
+
+
+
+ +
+
+
+ + +
+ + +
+ + + + + + +
Type + ID + Name + Email +
+
+
+ +
+
+
+
+
+ + + + + + +
+ Type + ID + Name + Email +
+ +
+ +
+
+
+ + +
+ + +
+ + + + + + +
Type + ID + Name + Email +
+
+
+ +
+
+
+
+
+ + + + + + +
+ Type + ID + Name + Email +
+ +
+ +
+
+
+ + +
+ + +
+ + + + + + +
Type + ID + Name + Email +
+
+
+ +
+
+
+
+
+ + + + + + +
+ Type + ID + Name + Email +
+
+
+
+
+ +
+
+
Input+Autocomplete+Dropdown+Table+Local
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/tests/app/forms_input.php b/tests/app/forms_input.php index d37075f..ce16e8e 100644 --- a/tests/app/forms_input.php +++ b/tests/app/forms_input.php @@ -1,189 +1,60 @@
-
-

Custom

-
+
+
Dropdown
+
+
+
+
+
+
+ +
+
+
Multiple Data Dropdown
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
- -
- - - - - - -
ID - Name - Email -
-
-
-
-
- -
-
-
-
-
-
- -
- - - - - - -
ID - Name - Email -
-
-
-
- - - - - -
ID - Name - Email -
-
-
-
-
-
- -
-
-
-
- - - - - - -
ID - Name - Email -
-
- - - - - -
ID - Name - Email -
-
-
-
-
- -
- - - - - - -
ID - Name - Email -
-
-
-
-
-
-
+
+
+
+
Calendar
+
+
+
+
+
+
+ +
+
+
Slider Start/End
+
+
+
+
+
+
+
+ +
+
+
+
Slider
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/tests/app/globalTemplates.tpl.php b/tests/app/globalTemplates.tpl.php new file mode 100644 index 0000000..f91ff0d --- /dev/null +++ b/tests/app/globalTemplates.tpl.php @@ -0,0 +1,21 @@ + + +
+ +
diff --git a/tests/app/helper/additional-functions.tpl.php b/tests/app/helper/additional-functions.tpl.php new file mode 100644 index 0000000..5a25dfa --- /dev/null +++ b/tests/app/helper/additional-functions.tpl.php @@ -0,0 +1,39 @@ + + + +
+
    +
  • + +
      +
    • + +
    • Template1 +
    • Template2 is a long name +
    • Template3 +
    +
  • PDF +
  • Word +
  • + +
      +
    • + +
    • Template2 +
    • Template3 +
    +
  • Csv +
  • E-Mail +
  • Download +
  • +
+
+ diff --git a/tests/app/helper/checkbox.tpl.php b/tests/app/helper/checkbox.tpl.php new file mode 100644 index 0000000..196b1bd --- /dev/null +++ b/tests/app/helper/checkbox.tpl.php @@ -0,0 +1,5 @@ + + \ No newline at end of file diff --git a/tests/app/helper/drag-drop-inline.tpl.php b/tests/app/helper/drag-drop-inline.tpl.php new file mode 100644 index 0000000..e69de29 diff --git a/tests/app/helper/export-data.tpl.php b/tests/app/helper/export-data.tpl.php new file mode 100644 index 0000000..f0f0724 --- /dev/null +++ b/tests/app/helper/export-data.tpl.php @@ -0,0 +1,39 @@ + + + +
+
    +
  • + +
      +
    • + +
    • Template1 +
    • Template2 is a long name +
    • Template3 +
    +
  • PDF +
  • Word +
  • + +
      +
    • + +
    • Template2 +
    • Template3 +
    +
  • Csv +
  • E-Mail +
  • Download +
  • +
+
+ \ No newline at end of file diff --git a/tests/app/helper/filter.tpl.php b/tests/app/helper/filter.tpl.php new file mode 100644 index 0000000..c332e86 --- /dev/null +++ b/tests/app/helper/filter.tpl.php @@ -0,0 +1,35 @@ + + + + + + +
+ + + + + + + +
+ + + \ No newline at end of file diff --git a/tests/app/helper/sort.tpl.php b/tests/app/helper/sort.tpl.php new file mode 100644 index 0000000..70495ec --- /dev/null +++ b/tests/app/helper/sort.tpl.php @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/tests/app/images.php b/tests/app/images.php index 06fa507..426f4cb 100644 --- a/tests/app/images.php +++ b/tests/app/images.php @@ -18,10 +18,4 @@
- -
-
- -
-
\ No newline at end of file diff --git a/tests/app/index.php b/tests/app/index.php index 31f9760..e57017b 100644 --- a/tests/app/index.php +++ b/tests/app/index.php @@ -5,186 +5,186 @@ Style Test - + - + -
+
- - + + User Image - - AccountName - - + +
 
+ +
+ + -
    -
  • -
      -
    • -
      • -
    • Form
      • -
    • Input
      • -
    • Table
      • -
    -
    • -
  • -
      -
    • -
      • -
    • Articles
      • -
    • Buttons
      • -
    • Tags
      • -
    • Panels
      • -
    • Loaders
      • -
    • Tabs
      • -
    • Breadcrumbs
      • -
    • Progress
      • -
    -
    • -
  • -
      -
    • -
      • -
    • Images
      • -
    • Sliders
      • -
    • Lazyload
      • -
    -
    • -
  • -
      -
    • -
      • -
    • Tables
      • -
    • Lists
      • -
    -
    • -
  • -
      -
    • -
      • -
    • Grid
      • -
    • Sizes
      • -
    -
    • -
  • -
      -
    • -
      • -
    • Popups
      • -
    • Notifications
      • -
    -
    • -
  • -
      -
    • -
      • -
    • Editor
      • -
    • Calendar
      • -
    • Navigations
      • -
    -
    • -
  • -
      -
    • -
      • -
    • 3D
      • -
    • Actions
      • -
    -
    • -
  • -
      -
    • -
      • -
    • Line Chart
      • -
    • Area Chart
      • -
    • Bar Chart
      • -
    • Column Chart
      • -
    • Waterfall Chart
      • -
    • Pie Chart
      • -
    • Radar Chart
      • -
    • Pyramid Chart
      • -
    • Gouge Chart
      • -
    • Scatterplot Chart
      • -
    • Boxplot Chart
      • -
    • Candlestick Chart
      • -
    • OHLC Chart
      • -
    • Calendar Chart
      • -
    • Gantt Chart
      • -
    • Bubblemap
      • -
    • Tree Chart
      • -
    • BCG Chart
      • -
    • Map Chart
      • -
    -
    • -
+ +
+ + + +
+
    +
  • +
      +
    • +
      • +
    • Form
      • +
    • Input
      • +
    • Data Selection
      • +
    • Table
      • +
    +
    • +
  • +
      +
    • +
      • +
    • Alerts
      • +
    • Articles
      • +
    • Buttons
      • +
    • Tags
      • +
    • Panels
      • +
    • Loaders
      • +
    • Tabs
      • +
    • Breadcrumbs
      • +
    • Progress
      • +
    +
    • +
  • +
      +
    • +
      • +
    • Images
      • +
    • Sliders
      • +
    • Lazyload
      • +
    +
    • +
  • +
      +
    • +
      • +
    • Tables
      • +
    • Lists
      • +
    +
    • +
  • +
      +
    • +
      • +
    • Grid
      • +
    • Sizes
      • +
    +
    • +
  • +
      +
    • +
      • +
    • Popups
      • +
    • Notifications
      • +
    +
    • +
  • +
      +
    • +
      • +
    • Editor
      • +
    • Calendar
      • +
    • Navigations
      • +
    +
    • +
  • +
      +
    • +
      • +
    • 3D
      • +
    • Actions
      • +
    +
    • +
  • +
      +
    • +
      • +
    • Line Chart
      • +
    • Area Chart
      • +
    • Bar Chart
      • +
    • Column Chart
      • +
    • Waterfall Chart
      • +
    • Pie Chart
      • +
    • Radar Chart
      • +
    • Pyramid Chart
      • +
    • Gouge Chart
      • +
    • Scatterplot Chart
      • +
    • Boxplot Chart
      • +
    • Candlestick Chart
      • +
    • OHLC Chart
      • +
    • Calendar Chart
      • +
    • Gantt Chart
      • +
    • Bubblemap
      • +
    • Tree Chart
      • +
    • BCG Chart
      • +
    • Map Chart
      • +
    +
    • +
+
@@ -220,6 +220,8 @@
+
+ \ No newline at end of file diff --git a/tests/app/lazyload.php b/tests/app/lazyload.php index 10da772..b55effb 100644 --- a/tests/app/lazyload.php +++ b/tests/app/lazyload.php @@ -55,5 +55,3 @@ - -  \ No newline at end of file diff --git a/tests/load.js b/tests/app/load.js similarity index 67% rename from tests/load.js rename to tests/app/load.js index 27750e8..a1c681f 100644 --- a/tests/load.js +++ b/tests/app/load.js @@ -1,26 +1,25 @@ -import { AssetManager } from '../../jsOMS/Asset/AssetManager.js'; -import { Logger } from '../../jsOMS/Log/Logger.js'; -import { CacheManager } from '../../jsOMS/DataStorage/CacheManager.js'; -import { StorageManager } from '../../jsOMS/DataStorage/StorageManager.js'; -import { EventManager } from '../../jsOMS/Event/EventManager.js'; -import { ResponseManager } from '../../jsOMS/Message/Response/ResponseManager.js'; -import { Dispatcher } from '../../jsOMS/Dispatcher/Dispatcher.js'; -import { AccountManager } from '../../jsOMS/Account/AccountManager.js'; -import { UIManager } from '../../jsOMS/UI/UIManager.js'; -import { InputManager } from '../../jsOMS/UI/Input/InputManager.js'; -import { ModuleManager } from '../../jsOMS/Module/ModuleManager.js'; -import { ReadManager } from '../../jsOMS/UI/Input/Voice/ReadManager.js'; -import { VoiceManager } from '../../jsOMS/UI/Input/Voice/VoiceManager.js'; -import { NotificationManager } from '../../jsOMS/Message/Notification/NotificationManager.js'; -import { HttpUri } from '../../jsOMS/Uri/HttpUri.js'; -import { UriFactory } from '../../jsOMS/Uri/UriFactory.js'; - -import { ACTION_EVENTS } from '../../Web/Backend/js/global/ActionEvents.js'; -import { KEYBOARD_EVENTS } from '../../Web/Backend/js/global/KeyboardEvents.js'; -import { MOUSE_EVENTS } from '../../Web/Backend/js/global/MouseEvents.js'; -import { RESPONSE_EVENTS } from '../../Web/Backend/js/global/ResponseEvents.js'; -import { TOUCH_EVENTS } from '../../Web/Backend/js/global/TouchEvents.js'; -import { VOICE_EVENTS } from '../../Web/Backend/js/global/VoiceEvents.js'; +import { AssetManager } from '../../../jsOMS/Asset/AssetManager.js'; +import { Logger } from '../../../jsOMS/Log/Logger.js'; +import { CacheManager } from '../../../jsOMS/DataStorage/CacheManager.js'; +import { StorageManager } from '../../../jsOMS/DataStorage/StorageManager.js'; +import { EventManager } from '../../../jsOMS/Event/EventManager.js'; +import { ResponseManager } from '../../../jsOMS/Message/Response/ResponseManager.js'; +import { Dispatcher } from '../../../jsOMS/Dispatcher/Dispatcher.js'; +import { AccountManager } from '../../../jsOMS/Account/AccountManager.js'; +import { UIManager } from '../../../jsOMS/UI/UIManager.js'; +import { InputManager } from '../../../jsOMS/UI/Input/InputManager.js'; +import { ModuleManager } from '../../../jsOMS/Module/ModuleManager.js'; +import { ReadManager } from '../../../jsOMS/UI/Input/Voice/ReadManager.js'; +import { VoiceManager } from '../../../jsOMS/UI/Input/Voice/VoiceManager.js'; +import { NotificationManager } from '../../../jsOMS/Message/Notification/NotificationManager.js'; +import { HttpUri } from '../../../jsOMS/Uri/HttpUri.js'; +import { UriFactory } from '../../../jsOMS/Uri/UriFactory.js'; +import { ACTION_EVENTS } from '../../../Web/Backend/js/global/ActionEvents.js'; +import { KEYBOARD_EVENTS } from '../../../Web/Backend/js/global/KeyboardEvents.js'; +import { MOUSE_EVENTS } from '../../../Web/Backend/js/global/MouseEvents.js'; +import { RESPONSE_EVENTS } from '../../../Web/Backend/js/global/ResponseEvents.js'; +import { TOUCH_EVENTS } from '../../../Web/Backend/js/global/TouchEvents.js'; +import { VOICE_EVENTS } from '../../../Web/Backend/js/global/VoiceEvents.js'; export class Application { constructor () diff --git a/tests/app/notifications.php b/tests/app/notifications.php index 0d0acc3..c1e7f82 100644 --- a/tests/app/notifications.php +++ b/tests/app/notifications.php @@ -1,8 +1,8 @@
-
-

App Notifications

-
+
+
App Notifications
+
@@ -12,16 +12,22 @@
-
- +
+
+
+
Special
+
+ + +
+
+
+ \ No newline at end of file diff --git a/tests/app/panels.php b/tests/app/panels.php index 56bc193..bd849d7 100644 --- a/tests/app/panels.php +++ b/tests/app/panels.php @@ -1,117 +1,18 @@
-
-

Header

-
-   -
-
-
- -
-
-

Header

-
-   -
-
-
-
- -
-
-
-

Header

-
-   -
-
-
- -
-
-

Header

-
-   -
-
-
-
- -
-
-
-

Header

-
-   -
-
-
- -
-
-

Header

-
-   -
-
-
-
- -
-
-
-

Header

-
-   -
-
-
- -
-
-

Header

-
-   -
-
-
-
- -
-
-
-

Header

-
-   -
-
-
- -
-
-

Header

-
-   -
-
-
-
- -
-
-
-

Header

-
-   +
+
Header
+
+ Duis posuere, nulla eu condimentum eleifend, nulla magna viverra risus, ut faucibus libero libero nec est. Nunc quis rhoncus est, ac sodales lorem. Suspendisse convallis, massa eu volutpat posuere, justo dolor porta dui, a ullamcorper ex ipsum eget arcu. Cras quis ante placerat, tempus orci vitae, semper nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis at sodales sapien. Morbi dolor risus, finibus ut ipsum non, pellentesque varius ex.
+
Footer
-   + Duis posuere, nulla eu condimentum eleifend, nulla magna viverra risus, ut faucibus libero libero nec est. Nunc quis rhoncus est, ac sodales lorem. Suspendisse convallis, massa eu volutpat posuere, justo dolor porta dui, a ullamcorper ex ipsum eget arcu. Cras quis ante placerat, tempus orci vitae, semper nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis at sodales sapien. Morbi dolor risus, finibus ut ipsum non, pellentesque varius ex.;
diff --git a/tests/app/sizes.php b/tests/app/sizes.php index 63516a6..16dc4f9 100644 --- a/tests/app/sizes.php +++ b/tests/app/sizes.php @@ -1,51 +1,53 @@ -
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
-
-
 
-
\ No newline at end of file +
+
+
 
+
+
+
 
+
+
+
 
+
+
+
 
+
+
+
 
+
+
+
 
+
+
+
 
+
+
+
 
+
+
+
 
+
+
+
 
+
+
+
 
+
+
+
 
+
+
+
 
+
+
+
 
+
+
+
 
+
+
+
 
+
+
+
 
+
+
\ No newline at end of file diff --git a/tests/app/sliders.php b/tests/app/sliders.php index 2a02976..e87ab01 100644 --- a/tests/app/sliders.php +++ b/tests/app/sliders.php @@ -1,6 +1,6 @@
-
-
+
+
@@ -10,11 +10,13 @@
-
+
+
-
-
+
+
+
-
+
-
+
@@ -63,6 +65,6 @@
-
+
\ No newline at end of file diff --git a/tests/app/tables.php b/tests/app/tables.php index b50d675..36fc443 100644 --- a/tests/app/tables.php +++ b/tests/app/tables.php @@ -1,479 +1,200 @@
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table Title
Col1 TitleCol2 TitleCol3 TitleCol4 Title
Col2Col1Col4Col3
Col4Col1Col2Col3
Col1Col2Col3Col4
Col2Col1Col3Col4
- - -
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
  • 4
    • -
  • ...
    • -
  • 20
    • -
-
-
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table Title
Col1 TitleCol2 TitleCol3 TitleCol4 Title
Col3Col4Col2Col1
Col1Col2Col4Col3
Col1Col2Col3Col4
Col4Col2Col1Col3
- - -
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
  • 4
    • -
  • ...
    • -
  • 20
    • -
-
-
-
-
- -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table Title
Col1 TitleCol2 TitleCol3 TitleCol4 Title
- Col1Col2Col3Col4
- Col2Col2Col3Col4
- Col3Col2Col3Col4
- Col4Col2Col3Col4
- - -
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
  • 4
    • -
  • ...
    • -
  • 20
    • -
-
-
-
-
- -
-
-
- - - +
+
+ Table Title + + +
+
+
Remote Data
+ - - - - - - -
- IDNameEmail
+ Col1 Title + Col2 Title + Col3 Title + Col4 Title + + + + + Col2 + Col1 + Col4 + Col3 + + + Col4 + Col1 + Col2 + Col3 + + + Col1 + Col2 + Col3 + Col4 + + + Col2 + Col1 + Col3 + Col4 + + + +
+
+ Previous + Next +
+
+
+ +
+
+
+ Table Title + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Col1 TitleCol2 TitleCol3 TitleCol4 Title
Col3Col4Col2Col1
Col1Col2Col4Col3
Col1Col2Col3Col4
Col4Col2Col1Col3
+
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table Title
Col1 TitleCol2 TitleCol3 TitleCol4 Title
Col2Col1Col4Col3
Col4Col1Col2Col3
Col1Col2Col3Col4
Col2Col1Col3Col4
- - -
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
  • 4
    • -
  • ...
    • -
  • 20
    • -
-
-
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table Title
Col1 TitleCol2 TitleCol3 TitleCol4 Title
Col3Col4Col2Col1
Col1Col2Col4Col3
Col1Col2Col3Col4
Col4Col2Col1Col3
- - -
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
  • 4
    • -
  • ...
    • -
  • 20
    • -
-
+
+
+
+ Table Title + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Col1 TitleCol2 TitleCol3 TitleCol4 Title
+ Col1Col2Col3Col4
+ Col2Col2Col3Col4
+ Col3Col2Col3Col4
+ Col4Col2Col3Col4
+ +
+
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table Title
Col1 TitleCol2 TitleCol3 TitleCol4 Title
Col2Col1Col4Col3
Col4Col1Col2Col3
Col1Col2Col3Col4
Col2Col1Col3Col4
- - -
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
  • 4
    • -
  • ...
    • -
  • 20
    • -
-
-
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table Title
Col1 TitleCol2 TitleCol3 TitleCol4 Title
Col3Col4Col2Col1
Col1Col2Col4Col3
Col1Col2Col3Col4
Col4Col2Col1Col3
- - -
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
  • 4
    • -
  • ...
    • -
  • 20
    • -
-
+
+
+
+ Remote Data + + +
+
+ + + + + + + + + +
+ IDNameEmail
+
diff --git a/tests/app/tabs.php b/tests/app/tabs.php index 12fcd09..339a4f0 100644 --- a/tests/app/tabs.php +++ b/tests/app/tabs.php @@ -1,10 +1,11 @@
+

Horizontal tabs

    -
    • -
    • +
    • +
@@ -22,12 +23,13 @@
-
+
+

Vertical tabs

    -
    • -
    • +
    • +
@@ -47,10 +49,11 @@
+

Horizontal tabs2

    -
    • -
    • +
    • +
@@ -69,6 +72,31 @@
+
+

Vertical tabs 2

+
+
    +
    • +
    • +
+
+ +
+ Test content +
+ +
+

Test content 2

asdf

+
+
+
+
+
+
+ +
+
+

Accordion

@@ -114,4 +142,29 @@
+
+ +
+
+
+
More/detail area
+
+
+ + +
+

You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell + everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in + the future when the spacecraft encounters a black hole does the computer call it an 'unknown + entry event'? Why don't they know? If they don't know, that means we never told anyone. And if + we never told anyone it means we never made it back. Hence we die down here. Just as a matter of + deductive logic.

+
+
+
+
+
\ No newline at end of file diff --git a/tests/app/tags.php b/tests/app/tags.php index b0985a7..5f81d72 100644 --- a/tests/app/tags.php +++ b/tests/app/tags.php @@ -1,38 +1,10 @@
-
- Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag -
-
-
- -
-
-
-
- Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag - Test Tag +
+
+ Test Tag + Test Tag + Test Tag
diff --git a/tests/app/welcome.php b/tests/app/welcome.php index 451f526..655e715 100644 --- a/tests/app/welcome.php +++ b/tests/app/welcome.php @@ -1 +1 @@ -Test welcome page \ No newline at end of file +
\ No newline at end of file