// Variables // Welcome UI - Buttons .land-app input[type=submit]:hover { background-color: $ui_green; border: 1px solid $ui_green; } .ui-btn { font-family: 'hk_groteskmedium'; padding: 7px 15px 6px 34px; border-radius: $ui-radius; margin-left: 8px !important; text-decoration: none; } .ui-btn-sm { font-family: 'hk_groteskmedium'; padding: 3px 7px; border-radius: $ui-radius; margin-left: 0px !important; } .ui-btn.btn-primary { background-color: $ui_blue; font-size: $ui_font_normal; background-image: image-url('icons/add.svg'); background-repeat: no-repeat; background-position: left 16px top 14px; font-family: 'hk_groteskmedium'; } .btn-primary { background-color: $ui_blue; font-size: $ui_font_normal; text-decoration: none; } .ui-btn.btn-outline-primary { color: $ui_back; border-color: $ui_darkgray; text-decoration: none; } .btn-outline-primary { color: $ui_blue; border-color: $ui_blue; border: 1px solid $ui_blue; text-decoration: none; } .btn-secondary { color: #fff; background-color: #6c757d; border-color: #6c757d; text-decoration: none; } .btn-outline-primary:hover { color: $ui_white; } .ui-btn.btn-download { background-image: image-url('icons/icn-download.svg'); background-repeat: no-repeat; background-position: left 14px top 14px; } .ui-btn.btn-edit { background-image: image-url('icons/icn-edit.svg'); background-repeat: no-repeat; background-position: left 14px top 14px; } .btn.ui-button-drop { padding-top: $lg-paddingtop; padding-bottom: $lg-paddingbottom; border: 1px dashed $ui_lightgray; font-size: $ui_font_small; } .ui-app-area .dropdown .btn-group .btn { width: 100%; font-size: $ui_font_small; border-bottom: 1px solid $ui_middlegray; text-align: left; padding: 6px 20px 6px 20px; border-color: transparent !important; } .ui-app-area .dropdown .btn-group .btn:hover { color: $ui_white; } .ui-app-area .dropdown .btn-group .btn:last-child { border-bottom: none !important; } /* ========================================= */ .ui-app-area .btn-primary.dropdown-toggle { padding-right: 26px; background-image: image-url('icons/icn-down.svg'); background-repeat: no-repeat; background-size: 8px; background-position: right 10px top 16px; font-family: 'hk_groteskmedium'; } .ui-app-area .btn-success { font-family: 'hk_groteskmedium'; background-color: transparent; border: 1px solid $ui_blue; color: $ui_blue; } .ui-app-area .btn-alternative { font-family: 'hk_groteskmedium'; background-color: transparent; border: 1px solid #D9D9D9; font-weight: normal; color: $ui_back; text-decoration: none; } .btn-blue-alternative { background-color: $ui_white; font-size: $ui_font_normal; color: $ui_blue; border: 1px solid $ui_blue; font-family: 'hk_groteskmedium'; text-decoration: none; } .btn-white { background-color: $ui_white; font-size: $ui_font_normal; color: $ui_back; border: 1px solid $ui_back; font-family: 'hk_groteskmedium'; text-decoration: none; } .btn-gray { background-color: $ui_white; font-size: $ui_font_normal; color: $ui_back; border: 1px solid #D9D9D9; font-family: 'hk_groteskmedium'; font-weight: 400; text-decoration: none; } .btn-black { background-color: $ui_back; font-size: $ui_font_normal; color: $ui_white; border: 1px solid $ui_back; font-family: 'hk_groteskmedium'; text-decoration: none; } .btn-black-alternative { background-color: $ui_white; font-size: $ui_font_normal; color: $ui_back; border: 1px solid $ui_back; font-family: 'hk_groteskmedium'; text-decoration: none; } .btn-pad-lg { padding: 6px 30px !important; } .btn-sm { font-size: 14px !important; } .btn-clipboard { position: absolute; top: 0.65rem; right: 0.65rem; z-index: 10; display: block; padding: 0.25rem 0.5rem; font-size: .65em; color: #0d6efd; background-color: transparent; border: 1px solid; border-radius: 0.25rem; } /* ========================================= */ .btn-dropdown { border: 1px solid #D9D9D9; padding: 7px 35px 7px 15px !important; background-image: image-url('icons/icn-submenu.svg'); background-repeat: no-repeat; background-size: 8px; background-position: right 10px top 16px; } .btn-dropdown:focus { outline-color: transparent !important; outline-style: none !important; box-shadow: none; } /* ========================================= */ .btn-duplicate { padding: 4px 17px !important; text-indent: -9999px; background-image: image-url('icons/icn-duplicate.svg'); background-repeat: no-repeat; background-size: 14px; background-position: top 8px left 9px; background-color: $ui_white; } .btn-edit { padding: 6px 17px !important; text-indent: -9999px; background-image: image-url('icons/icn-edit.svg'); background-repeat: no-repeat; background-size: 16px; background-position: top 8px left 9px; background-color: $ui_white; } .btn-delete, .new-involved-theme .btn.btn-outline-danger, .btn-delete.btn.btn-outline-danger { padding: 6px 17px !important; text-indent: -9999px; background-image: image-url('icons/icn-trash.svg'); background-repeat: no-repeat; background-size: 16px; background-position: top 8px left 9px; background-color: $ui_white; } .btn-full-card { display: block; border: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; background-color: transparent !important; text-indent: -9999px !important; } /* ========================================= */ .btn.btn-right { float: right; } .txt-danger, .txt-danger:hover { color: #DC3545; } /* ========================================= */ .ui-btn-status { text-indent: -9999px; border-radius: 50%; padding: 0px 4px; font-size: 6px; } .ui-btn-status.btn-success { background-color: $ui_green; border: 1px solid $ui_green; } .ui-btn-status.btn-secondary { background-color: $ui_back; border: 1px solid $ui_back; text-decoration: none; } /* ========================================= */ .ui-app-area input[type=submit].btn.btn-outline-primary { background-color: $ui_back; color: $ui_white; border-color: $ui_back; } .main-app .main-content .was-validated .form-control:valid, .form-control.is-valid { background-image: none; } /* ========================================= */ #ui-tabs .btn.btn-select { border: 1px solid #D9D9D9; background-color: $ui_white; margin-top: 30px; margin-left: 0px; width: 420px; text-align: left; padding: 8px 15px !important; background-image: image-url('icons/icn-submenu.svg'); background-repeat: no-repeat; background-size: 8px; background-position: right 10px top 18px; } #ui-tabs .dropdown.dropdown-select .dropdown-menu { width: 300px; } .btn-dot { top: 6px; background-color: #fff; display: block; float: left; position: relative; width: 30px; height: 30px; text-align: center; box-shadow: -1px 1px 5px -1px rgba(123,123,123,0.25); -webkit-box-shadow: -1px 1px 5px -1px rgba(123,123,123,0.25); -moz-box-shadow: -1px 1px 5px -1px rgba(123,123,123,0.25); } .btn-dot img { width: 4px; margin-top: -12px; } .btn-offcanvas { display: block; float: right; position: relative; margin: 0 0 0 12px; } /*.btn-dot a { display: block; width: 30px; height: 30px; }*/ .btn.btn-upload { padding: 6px 12px 6px 30px !important; background-image: image-url('icons/icn-upload.svg'); background-repeat: no-repeat; background-size: 14px; background-position: left 8px top 9px; } /* ========================================= */ .am-content.ui-app-area .btn-add { background-color: #fff; padding: 8px 12px !important; border: 1px solid #007bff; font-weight: bold; font-size: 20px; padding: 3px 12px !important; border-radius: $ui-radius; box-shadow: 1px -1px 13px 0px rgba(174,174,174,0.15); -webkit-box-shadow: 1px -1px 13px 0px rgba(174,174,174,0.15); -moz-box-shadow: 1px -1px 13px 0px rgba(174,174,174,0.15); } .am-content.ui-app-area .btn-add:hover { text-decoration: none; } /* ========================================= */ /* Btn Positions */ .parcel-pdf-dropdown { display: block; position: absolute !important; right: 20px; top: 6px; } /* ========================================= */ /* Links */ .link-icon { color: #4A8FE7; background-image: image-url('icons/icn-link.svg'); background-repeat: no-repeat; background-size: 12px; background-position: left 0px top 5px; padding-left: 18px; } .link-icon:hover { cursor: pointer; } .simple-link, .simple-link:hover, .btn.btn-link, .btn.btn-link:hover { color: #4A8FE7 !important; background-color: transparent !important; border: none; font-weight: normal; padding: 0 !important; margin: 0 5px; } .simple-link:hover, .btn.btn-link:hover { text-decoration: underline; } input[type="submit"].btn-link, input[type="submit"].simple-link { display: block; float: left; } input[type="submit"].btn-link:hover, input[type="submit"].simple-link:hover { background-color: transparent !important; border: none !important; }