diff options
Diffstat (limited to 'src/client/views/nodes/button/FontIconBox.scss')
| -rw-r--r-- | src/client/views/nodes/button/FontIconBox.scss | 411 |
1 files changed, 411 insertions, 0 deletions
diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss new file mode 100644 index 000000000..079c767b9 --- /dev/null +++ b/src/client/views/nodes/button/FontIconBox.scss @@ -0,0 +1,411 @@ +@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; + position: relative; + text-align: center; + font-size: 7px; + letter-spacing: normal; + background-color: inherit; + margin-top: 5px; + border-radius: 8px; + padding: 0; + width: 100%; + font-family: 'ROBOTO'; + text-transform: uppercase; + font-weight: bold; + transition: 0.15s; + + + } + + .fontIconBox-icon { + width: 80%; + height: 80%; + } + + &.clickBtn { + cursor: pointer; + + &:hover { + background-color: rgba(0, 0, 0, 0.3) !important; + } + + svg { + width: 50% !important; + height: 50%; + } + } + + &.textBtn { + display: grid; + /* grid-row: auto; */ + grid-auto-flow: column; + cursor: pointer; + width: 100%; + justify-content: center; + align-items: center; + justify-items: center; + + &:hover { + filter:brightness(0.85) !important; + } + } + + &.tglBtn { + cursor: pointer; + + &.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: .4s; + transition: .4s; + } + + .slider:before { + position: absolute; + content: ""; + height: 21px; + width: 21px; + left: 2px; + bottom: 2px; + background-color: $white; + -webkit-transition: .4s; + transition: .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); + } + } + + &.toolBtn { + cursor: pointer; + width: 100%; + border-radius: 100%; + + svg { + width: 60% !important; + height: 60%; + } + } + + &.menuBtn { + cursor: pointer !important; + border-radius: 0px; + flex-direction: column; + + svg { + width: 45% !important; + height: 45%; + } + + &:hover{ + filter: brightness(0.85); + } + } + + + + &.colorBtn { + 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; + } + + &:hover { + background-color: rgba(0, 0, 0, 0.3) !important; + } + } + + &.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; + + &:hover { + background-color: rgba(0, 0, 0, 0.3) !important; + } + + .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; + + &:hover { + background-color: rgba(0, 0, 0, 0.3) !important; + } + + &.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; + } + } + + .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: 100vw; + height: 100vh; + top: 0; + z-index: 20; + left: 0; + background: transparent; + position: fixed; + } + +}
\ No newline at end of file |