ui: fixes
This commit is contained in:
Andras Bacsai
@@ -160,220 +160,11 @@ a {
|
||||
);
|
||||
border-image-slice: 1;
|
||||
}
|
||||
/**
|
||||
* Tooltip Styles
|
||||
*/
|
||||
|
||||
/* Base styles for the element that has a tooltip */
|
||||
[data-tooltip],
|
||||
.tooltip {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Base styles for the entire tooltip */
|
||||
[data-tooltip]:before,
|
||||
[data-tooltip]:after,
|
||||
.tooltip:before,
|
||||
.tooltip:after {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,
|
||||
transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
|
||||
transform: translate3d(0, 0, 0);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Show the entire tooltip on hover and focus */
|
||||
[data-tooltip]:hover:before,
|
||||
[data-tooltip]:hover:after,
|
||||
[data-tooltip]:focus:before,
|
||||
[data-tooltip]:focus:after,
|
||||
.tooltip:hover:before,
|
||||
.tooltip:hover:after,
|
||||
.tooltip:focus:before,
|
||||
.tooltip:focus:after {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Base styles for the tooltip's directional arrow */
|
||||
.tooltip:before,
|
||||
[data-tooltip]:before {
|
||||
z-index: 1001;
|
||||
border: 6px solid transparent;
|
||||
background: transparent;
|
||||
content: '';
|
||||
}
|
||||
|
||||
/* Base styles for the tooltip's content area */
|
||||
.tooltip:after,
|
||||
[data-tooltip]:after {
|
||||
z-index: 1000;
|
||||
padding: 8px;
|
||||
color: #fff;
|
||||
content: attr(data-tooltip);
|
||||
@apply min-w-[100px] rounded text-center font-normal;
|
||||
}
|
||||
|
||||
/* Base colours for tooltips */
|
||||
|
||||
/* coollabs - default */
|
||||
.tooltip:after,
|
||||
[data-tooltip]:after {
|
||||
@apply bg-coollabs;
|
||||
}
|
||||
|
||||
/* Green 500 */
|
||||
.tooltip-green-500:after {
|
||||
@apply bg-green-500;
|
||||
}
|
||||
|
||||
/* Orange 500 */
|
||||
.tooltip-orange-500:after {
|
||||
@apply bg-orange-500;
|
||||
}
|
||||
|
||||
/* Sky 500 */
|
||||
.tooltip-sky-500:after {
|
||||
@apply bg-sky-500;
|
||||
}
|
||||
|
||||
/* Purple 500 */
|
||||
.tooltip-purple-500:after {
|
||||
@apply bg-purple-500;
|
||||
}
|
||||
|
||||
/* Pink 500 */
|
||||
.tooltip-pink-500:after {
|
||||
@apply bg-pink-500;
|
||||
}
|
||||
|
||||
/* Fuchsia 500 */
|
||||
.tooltip-fuchsia-500:after {
|
||||
@apply bg-fuchsia-500;
|
||||
}
|
||||
|
||||
/* Yellow 500 */
|
||||
.tooltip-yellow-500:after {
|
||||
@apply bg-yellow-500;
|
||||
}
|
||||
|
||||
/* Red-500 */
|
||||
.tooltip-red-500:after {
|
||||
@apply bg-red-500;
|
||||
}
|
||||
|
||||
/* Directions */
|
||||
|
||||
/* Top (default) */
|
||||
[data-tooltip]:before,
|
||||
[data-tooltip]:after,
|
||||
.tooltip:before,
|
||||
.tooltip:after,
|
||||
.tooltip-top:before,
|
||||
.tooltip-top:after {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
/* Horizontally align top/bottom tooltips */
|
||||
[data-tooltip]:after,
|
||||
.tooltip:after,
|
||||
.tooltip-top:after {
|
||||
margin-left: -80px;
|
||||
}
|
||||
|
||||
[data-tooltip]:hover:before,
|
||||
[data-tooltip]:hover:after,
|
||||
[data-tooltip]:focus:before,
|
||||
[data-tooltip]:focus:after,
|
||||
.tooltip:hover:before,
|
||||
.tooltip:hover:after,
|
||||
.tooltip:focus:before,
|
||||
.tooltip:focus:after,
|
||||
.tooltip-top:hover:before,
|
||||
.tooltip-top:hover:after,
|
||||
.tooltip-top:focus:before,
|
||||
.tooltip-top:focus:after {
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
|
||||
/* Left */
|
||||
.tooltip-left:before,
|
||||
.tooltip-left:after {
|
||||
right: 100%;
|
||||
bottom: 50%;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.tooltip-left:hover:before,
|
||||
.tooltip-left:hover:after,
|
||||
.tooltip-left:focus:before,
|
||||
.tooltip-left:focus:after {
|
||||
transform: translateX(-12px);
|
||||
}
|
||||
|
||||
/* Bottom */
|
||||
.tooltip-bottom:before,
|
||||
.tooltip-bottom:after {
|
||||
top: 100%;
|
||||
bottom: auto;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.tooltip-bottom:hover:before,
|
||||
.tooltip-bottom:hover:after,
|
||||
.tooltip-bottom:focus:before,
|
||||
.tooltip-bottom:focus:after {
|
||||
transform: translateY(12px);
|
||||
}
|
||||
|
||||
/* Right */
|
||||
.tooltip-right:before,
|
||||
.tooltip-right:after {
|
||||
bottom: 50%;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.tooltip-right:hover:before,
|
||||
.tooltip-right:hover:after,
|
||||
.tooltip-right:focus:before,
|
||||
.tooltip-right:focus:after {
|
||||
transform: translateX(12px);
|
||||
}
|
||||
|
||||
/* Move directional arrows down a bit for left/right tooltips */
|
||||
.tooltip-left:before,
|
||||
.tooltip-right:before {
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
/* Vertically center tooltip content for left/right tooltips */
|
||||
.tooltip-left:after,
|
||||
.tooltip-right:after {
|
||||
margin-left: 0;
|
||||
margin-bottom: -16px;
|
||||
}
|
||||
|
||||
.box-selection {
|
||||
@apply min-w-[16rem] max-w-[24rem] justify-center rounded border-transparent bg-coolgray-200 p-6 hover:border-transparent hover:bg-coolgray-400;
|
||||
}
|
||||
|
||||
._toastBar {
|
||||
@apply hidden !important;
|
||||
}
|
||||
._toastMsg {
|
||||
@apply text-xs !important;
|
||||
}
|
||||
._toastBtn {
|
||||
@apply text-xs !important;
|
||||
}
|
||||
._toastItem {
|
||||
@apply bg-coollabs bg-opacity-80 !important;
|
||||
}
|
||||
|
||||
.lds-heart {
|
||||
animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
@@ -399,7 +190,7 @@ a {
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
@apply text-xl font-bold hover:bg-coolgray-500 rounded p-2 hover:text-white text-stone-200 cursor-pointer;
|
||||
@apply w-48 text-base font-bold hover:bg-coolgray-500 rounded p-2 hover:text-white text-stone-200 cursor-pointer;
|
||||
}
|
||||
|
||||
.sub-menu-active {
|
||||
|
||||
Reference in New Issue
Block a user