map-gl-compass-pro/dist/style.css

Compass pro for react-map-gl based projects

.compass-pro-wrapper{perspective:100px}.compass-pro-wrapper[data-size=md]{perspective:150px}.compass-pro-wrapper[data-size=lg],.compass-pro-wrapper[data-size=xl]{perspective:200px}.compass-pro{--compass-size: 32px;--color-compass-background: #282828;--color-compass-north-needle: #b30000;--color-compass-needle: #f2f2f2;background:var(--color-compass-background);border:2px solid var(--color-compass-background);border-radius:50%;box-shadow:-2px -2px 5px #4343437f,inset 2px 2px 5px #0000007f,inset -2px -2px 5px #4343437f,2px 2px 5px #0000004d;height:var(--compass-size);pointer-events:all;position:relative;transform-origin:center;width:var(--compass-size)}.compass-pro,.compass-pro div{box-sizing:border-box}.compass-pro[data-size=sm]{--compass-size: 48px}.compass-pro[data-size=md]{--compass-size: 64px;border-width:5px}.compass-pro[data-size=lg]{--compass-size: 80px;border-width:8px}.compass-pro[data-size=xl]{--compass-size: 96px;border-width:10px}.compass-pro[data-size=md],.compass-pro[data-size=lg],.compass-pro[data-size=xl]{box-shadow:-4px -4px 10px #4343437f,inset 4px 4px 10px #0000007f,inset -4px -4px 10px #4343437f,4px 4px 10px #0000004d}.compass-pro .needle{--width: 1px;background-color:var(--color-compass-needle);height:120%;left:calc(50% - var(--width) / 2);position:absolute;top:-10%;transform:rotate(var(--rotation));transform-origin:center;width:var(--width)}.compass-pro[data-size=md] .needle{height:128%;top:-14%}.compass-pro[data-size=lg] .needle,.compass-pro[data-size=xl] .needle{--width: 2px;height:140%;top:-20%}.compass-pro .needle:nth-of-type(1){--width: 2px;--rotation: 0deg;background-color:var(--color-compass-north-needle)}.compass-pro .needle:nth-of-type(2){--rotation: 30deg}.compass-pro .needle:nth-of-type(3){--rotation: 60deg}.compass-pro .needle:nth-of-type(4){--rotation: 90deg;outline:1px solid var(--color-compass-north-needle)}.compass-pro .needle:nth-of-type(5){--rotation: 120deg}.compass-pro .needle:nth-of-type(6){--rotation: 150deg}.compass-pro[data-size=sm] .needle:nth-of-type(1),.compass-pro[data-size=md] .needle:nth-of-type(1){--width: 2px}.compass-pro[data-size=lg] .needle:nth-of-type(1),.compass-pro[data-size=xl] .needle:nth-of-type(1){--width: 4px}.compass-pro .inner-face{background:var(--color-compass-background);border-color:var(--color-compass-north-needle);border-radius:50%;border-style:double;border-width:2px;display:grid;height:90%;left:5%;opacity:.9;place-items:center;position:relative;top:5%;width:90%;z-index:1}.compass-pro[data-size=xs] .inner-face svg{height:12px;width:12px}.compass-pro[data-size=sm] .inner-face svg{height:18px;width:18px}.compass-pro[data-size=md] .inner-face svg{height:24px;width:24px}.compass-pro[data-size=lg] .inner-face svg{height:30px;width:30px}.compass-pro[data-size=xl] .inner-face svg{height:36px;width:36px}.compass-pro[data-size=sm] .inner-face,.compass-pro[data-size=md] .inner-face{border-width:4px}.compass-pro[data-size=lg] .inner-face,.compass-pro[data-size=xl] .inner-face{border-width:5px;height:95%;left:2.5%;top:2.5%;width:95%}.compass-pro .needlde-north{--width: var(--compass-size);--height: var(--compass-size);background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMDAgMTAwMCI+CiAgICA8cGF0aCBmaWxsPSIjYjMwMDAwIiBmaWxsLXJ1bGU9ImluaGVyaXQiCiAgICAgICAgZD0iTTU3OC44LDQyMS4ybC0zMTUtMTU3LjRsMTU3LjUsMzE0LjlsMzE0LjksMTU3LjVMNTc4LjgsNDIxLjJ6IE00NTcsNTQ0LjdMMzQ2LjEsMzM3LjhsMjA3LjQsMTE5TDQ1Nyw1NDQuN3oiIC8+Cjwvc3ZnPg==);background-position:center;background-size:contain;cursor:pointer;height:var(--height);left:calc(50% - var(--width) / 2);position:absolute;top:calc(50% - var(--height) / 2);transform:rotate(225deg);transform-origin:center;width:var(--width);z-index:3}