diff options
Diffstat (limited to 'src/client/views/nodes/button/FontIconBox.scss')
-rw-r--r-- | src/client/views/nodes/button/FontIconBox.scss | 438 |
1 files changed, 0 insertions, 438 deletions
diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss deleted file mode 100644 index 9d9fa26b0..000000000 --- a/src/client/views/nodes/button/FontIconBox.scss +++ /dev/null @@ -1,438 +0,0 @@ -@import '../../global/globalCssVariables'; - -.menuButton { - height: 100%; - display: flex; - justify-content: center; - align-items: center; - font-size: 80%; - border-radius: $standard-border-radius; - transition: 0.15s; - - .menuButton-wrap { - grid-column: 1; - justify-content: center; - align-items: center; - text-align: center; - } - - .fontIconBox-label { - color: $white; - bottom: -1; - position: absolute; - text-align: center; - font-size: 7px; - letter-spacing: normal; - background-color: inherit; - border-radius: 8px; - padding: 0; - width: 100%; - font-family: 'system-ui'; - text-transform: uppercase; - font-weight: bold; - transition: 0.15s; - } - - .fontIconBox-icon { - width: 80%; - height: 80%; - } - - &.clickBtn, - &.clickBtnLabel { - cursor: pointer; - flex-direction: column; - - svg { - width: 50% !important; - height: 50%; - } - } - - &.clickBtnLabel { - svg { - margin-top: -4px; - } - } - - &.textBtn { - display: grid; - /* grid-row: auto; */ - grid-auto-flow: column; - cursor: pointer; - width: 100%; - justify-content: center; - align-items: center; - justify-items: center; - } - - &.tglBtn, - &.tglBtnLabel { - cursor: pointer; - flex-direction: column; - - &.switch { - //TOGGLE - - .switch { - position: relative; - display: inline-block; - width: 100%; - height: 25px; - margin: 0; - } - - .switch input { - opacity: 0; - width: 0; - height: 0; - } - - .slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: lightgrey; - -webkit-transition: 0.4s; - transition: 0.4s; - } - - .slider:before { - position: absolute; - content: ''; - height: 21px; - width: 21px; - left: 2px; - bottom: 2px; - background-color: $white; - -webkit-transition: 0.4s; - transition: 0.4s; - } - - input:checked + .slider { - background-color: $medium-blue; - } - - input:focus + .slider { - box-shadow: 0 0 1px $medium-blue; - } - - input:checked + .slider:before { - -webkit-transform: translateX(26px); - -ms-transform: translateX(26px); - transform: translateX(26px); - } - - /* Rounded sliders */ - .slider.round { - border-radius: $standard-border-radius; - } - - .slider.round:before { - border-radius: $standard-border-radius; - } - } - - svg { - width: 50% !important; - height: 50%; - } - - &:hover { - background-color: rgba(0, 0, 0, 0.3); - } - } - - &.tglBtnLabel { - svg { - margin-top: -4px; - } - } - - &.toolBtn, - &.toolBtnLabel { - cursor: pointer; - width: 100%; - border-radius: 100%; - flex-direction: column; - // margin-top: -4px; - - svg { - width: 60% !important; - height: 60%; - } - } - - &.toolBtnLabel { - svg { - margin-top: -4px; - } - } - - &.menuBtn { - cursor: pointer !important; - border-radius: 0px; - flex-direction: column; - - svg { - width: 45% !important; - height: 45%; - } - - &:hover { - filter: brightness(0.85); - } - } - - &.colorBtn, - &.colorBtnLabel { - color: black; - cursor: pointer; - flex-direction: column; - background: transparent; - - .colorButton-color { - margin-top: 3px; - width: 80%; - height: 3px; - } - - .menuButton-dropdownBox { - position: absolute; - width: fit-content; - height: fit-content; - color: black; - top: 100%; - left: 0; - z-index: 21; - background-color: #e3e3e3; - box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); - border-radius: 3px; - } - } - - &.colorBtnLabel { - svg { - margin-top: -4px; - } - } - - &.drpdownList { - width: 100%; - display: grid; - grid-auto-columns: 80px 20px; - justify-items: center; - font-family: 'Roboto'; - white-space: nowrap; - text-overflow: ellipsis; - font-size: 13; - font-weight: 600; - overflow: hidden; - cursor: pointer; - background: transparent; - align-content: center; - align-items: center; - - .menuButton-dropdownList { - position: absolute; - width: 150px; - height: fit-content; - top: 100%; - z-index: 21; - background-color: $white; - box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); - padding: 1px; - - .list-item { - color: $black; - width: 100%; - height: 25px; - font-weight: 400; - display: flex; - justify-content: left; - align-items: center; - padding-left: 5px; - } - - .list-item:hover { - background-color: lightgrey; - } - } - } - - &.numBtn { - cursor: pointer; - background: transparent; - - &.slider { - color: $white; - cursor: pointer; - flex-direction: column; - background: transparent; - - .menu-slider { - width: 100px; - } - - .menuButton-dropdownBox { - position: absolute; - width: fit-content; - height: fit-content; - top: 100%; - z-index: 21; - background-color: #e3e3e3; - box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); - border-radius: $standard-border-radius; - - .menu-slider { - height: 10px; - } - input[type='range']::-webkit-slider-runnable-track { - background: gray; - height: 3px; - } - - input[type='range']::-webkit-slider-thumb { - box-shadow: 1px 1px 1px #000000; - border: 1px solid #000000; - height: 10px; - width: 10px; - border-radius: 5px; - background: #ffffff; - cursor: pointer; - -webkit-appearance: none; - margin-top: -4px; - } - } - } - - .button { - width: 25%; - display: flex; - align-items: center; - justify-content: center; - - &.number { - width: 50%; - - .button-input { - background: none; - border: none; - text-align: right; - width: 100%; - color: $white; - height: 100%; - text-align: center; - } - - .button-input:focus { - outline: none; - } - } - } - - &.list { - width: 100%; - justify-content: space-around; - border: $standard-border; - - .menuButton-dropdownList { - position: absolute; - width: fit-content; - height: fit-content; - min-width: 50%; - max-height: 50vh; - overflow-y: scroll; - top: 100%; - z-index: 21; - background-color: $white; - box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); - padding: 1px; - - .list-item { - color: $black; - width: 100%; - height: 25px; - font-weight: 400; - display: flex; - justify-content: center; - align-items: center; - } - - .list-item:hover { - background-color: lightgrey; - } - } - } - } - - &.editableText { - cursor: text; - display: flex; - flex-direction: row; - gap: 5px; - padding-left: 10px; - justify-content: flex-start; - color: black; - background-color: $light-gray; - padding: 5px; - padding-left: 10px; - width: 100%; - height: 100%; - } - - &.drpDownBtn { - cursor: pointer; - background: transparent; - border: solid 0.5px grey; - - &.true { - background: rgba(0, 0, 0, 0.3); - } - - .menuButton-dropdownBox { - position: absolute; - width: 150px; - height: 250px; - top: 100%; - background-color: #e3e3e3; - box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); - border-radius: $standard-border-radius; - } - } - - .menuButton-dropdown { - display: flex; - justify-content: center; - align-items: center; - font-size: 15px; - grid-column: 2; - border-radius: 0px 7px 7px 0px; - width: 13px; - height: 100%; - right: 0; - } - - .menuButton-dropdown-header { - width: 100%; - font-weight: 300; - padding: 5px; - overflow: hidden; - font-size: 12px; - white-space: nowrap; - text-overflow: ellipsis; - } - - .dropbox-background { - width: 200vw; - height: 200vh; - top: -100vh; - z-index: 20; - left: -100vw; - background: transparent; - position: fixed; - } -} |