aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/button/FontIconBox.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/button/FontIconBox.scss')
-rw-r--r--src/client/views/nodes/button/FontIconBox.scss438
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;
- }
-}