diff --git a/examples/Components/App/style.scss b/examples/Components/App/style.scss index 8a877b66..7026e2cc 100644 --- a/examples/Components/App/style.scss +++ b/examples/Components/App/style.scss @@ -24,239 +24,3 @@ } } - -.editor { - position: relative; - max-width: 30rem; - margin: 0 auto 5rem auto; - - &__content { - pre { - padding: 0.7rem 1rem; - border-radius: 5px; - background: $color-black; - color: $color-white; - font-size: 0.8rem; - overflow-x: auto; - - code { - display: block; - } - } - - p code { - display: inline-block; - padding: 0 0.4rem; - border-radius: 5px; - font-size: 0.8rem; - font-weight: bold; - background: rgba($color-black, 0.1); - color: rgba($color-black, 0.8); - } - - ul, - ol { - padding-left: 1rem; - } - - a { - color: inherit; - } - - blockquote { - border-left: 3px solid rgba($color-black, 0.1); - color: rgba($color-black, 0.8); - padding-left: 0.8rem; - font-style: italic; - - p { - margin: 0; - } - } - - img { - max-width: 100%; - border-radius: 3px; - } - - table { - border-collapse: collapse; - table-layout: fixed; - width: 100%; - margin: 0; - overflow: hidden; - td, th { - min-width: 1em; - border: 1px solid #ddd; - padding: 3px 5px; - vertical-align: top; - box-sizing: border-box; - position: relative; - > * { - margin-bottom: 0; - } - } - th { - font-weight: bold; - text-align: left; - } - .selectedCell:after { - z-index: 2; - position: absolute; - content: ""; - left: 0; right: 0; top: 0; bottom: 0; - background: rgba(200, 200, 255, 0.4); - pointer-events: none; - } - .column-resize-handle { - position: absolute; - right: -2px; top: 0; bottom: 0; - width: 4px; - z-index: 20; - background-color: #adf; - pointer-events: none; - } - } - .tableWrapper { - margin: 1em 0; - overflow-x: auto; - } - .resize-cursor { - cursor: ew-resize; - cursor: col-resize; - } - - } -} - -.menububble { - position: absolute; - display: flex; - z-index: 20; - background: $color-black; - border-radius: 5px; - padding: 0.3rem; - margin-bottom: 0.5rem; - transform: translateX(-50%); - visibility: hidden; - opacity: 0; - transition: opacity 0.2s, visibility 0.2s; - - &.is-active { - opacity: 1; - visibility: visible; - } - - &__button { - display: inline-flex; - background: transparent; - border: 0; - color: $color-white; - padding: 0.2rem 0.5rem; - margin-right: 0.2rem; - border-radius: 3px; - cursor: pointer; - - &:last-child { - margin-right: 0; - } - - &:hover { - background-color: rgba($color-white, 0.1); - } - - &.is-active { - background-color: rgba($color-white, 0.2); - } - } - - &__form { - display: flex; - align-items: center; - } - - &__input { - font: inherit; - border: none; - background: transparent; - color: $color-white; - } -} - -.menubar { - - display: flex; - margin-bottom: 1rem; - transition: visibility 0.2s 0.4s, opacity 0.2s 0.4s; - - &.is-hidden { - visibility: hidden; - opacity: 0; - } - - &.is-focused { - visibility: visible; - opacity: 1; - transition: visibility 0.2s, opacity 0.2s; - } - - &__button { - font-weight: bold; - display: inline-flex; - background: transparent; - border: 0; - color: $color-black; - padding: 0.2rem 0.5rem; - margin-right: 0.2rem; - border-radius: 3px; - cursor: pointer; - - &:hover { - background-color: rgba($color-black, 0.05); - } - - &.is-active { - background-color: rgba($color-black, 0.1); - } - } -} - -ul[data-type="todo_list"] { - padding-left: 0; -} - -li[data-type="todo_item"] { - display: flex; - flex-direction: row; -} - -.todo-checkbox { - border: 2px solid $color-black; - height: 0.9em; - width: 0.9em; - box-sizing: border-box; - margin-right: 10px; - margin-top: 0.3rem; - user-select: none; - -webkit-user-select: none; - cursor: pointer; - border-radius: 0.2em; - background-color: transparent; - transition: 0.4s background; -} - -.todo-content { - flex: 1; -} - -li[data-done="true"] { - text-decoration: line-through; -} - -li[data-done="true"] .todo-checkbox { - background-color: $color-black; -} - -li[data-done="false"] { - text-decoration: none; -} diff --git a/examples/assets/sass/menububble.scss b/examples/assets/sass/menububble.scss index e408465f..54c4c258 100644 --- a/examples/assets/sass/menububble.scss +++ b/examples/assets/sass/menububble.scss @@ -11,6 +11,11 @@ opacity: 0; transition: opacity 0.2s, visibility 0.2s; + &.is-active { + opacity: 1; + visibility: visible; + } + &__button { display: inline-flex; background: transparent;