lapras/lib/index.css

A React library to create guided walkthroughs and tours

.lapras{--theme: #06c8ed;--theme-color: #000;--font-size: 12px;--tooltip-arrow-color: #fff;--tooltip-arrow-size: 10px;--tooltip-color: #000;--tooltip-border-radius: 5px}.lapras .lapras-btn{cursor:pointer;display:inline-block;min-height:1em;outline:0;border:none;vertical-align:baseline;background:var(--theme);color:var(--theme-color);margin:0 0.25em 0 0;padding:0.78571429em 1.5em 0.78571429em;text-align:center;-webkit-box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,0.15) inset;box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,0.15) inset;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;transition:opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;transition:opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;transition:opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease}.lapras .lapras-btn.lapras-loading::before{position:absolute;content:'';top:50%;left:50%;margin:-0.64285714em 0 0 -0.64285714em;width:1.28571429em;height:1.28571429em;border-radius:500rem;border:0.2em solid rgba(0,0,0,0.15)}.lapras .lapras-btn.lapras-loading::after{position:relative;cursor:default;text-shadow:none !important;color:transparent !important;opacity:1;pointer-events:auto;-webkit-transition:all 0s linear, opacity 0.1s ease;transition:all 0s linear, opacity 0.1s ease}.lapras .lapras-tooltip{background:white;border-radius:var(--tooltip-border-radius);-webkit-box-shadow:0 0 2px rgba(127,127,127,0.2);box-shadow:0 0 2px rgba(127,127,127,0.2);color:var(--tooltip-color);font-size:12px;max-width:300px;padding:0.5em 1em;padding:10px;position:absolute;text-align:left;width:auto;z-index:100001}.lapras .lapras-tooltip .lapras-arrow{width:0;height:0;border-style:solid;position:absolute;margin:var(--tooltip-arrow-size);color:var(--tooltip-arrow-color)}.lapras .lapras-tooltip[x-placement^='top']{margin-bottom:var(--tooltip-arrow-size)}.lapras .lapras-tooltip[x-placement^='top'] .lapras-arrow{border-width:var(--tooltip-arrow-size) var(--tooltip-arrow-size) 0;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;bottom:calc(-1 * var(--tooltip-arrow-size));left:calc(50% - var(--tooltip-arrow-size));margin-top:0;margin-bottom:0}.lapras .lapras-tooltip[x-placement^='bottom']{margin-top:var(--tooltip-arrow-size)}.lapras .lapras-tooltip[x-placement^='bottom'] .lapras-arrow{border-width:0 var(--tooltip-arrow-size) var(--tooltip-arrow-size);border-left-color:transparent;border-right-color:transparent;border-top-color:transparent;top:calc(-1 * var(--tooltip-arrow-size));left:calc(50% - var(--tooltip-arrow-size));margin-top:0;margin-bottom:0}.lapras .lapras-tooltip[x-placement^='right']{margin-left:var(--tooltip-arrow-size)}.lapras .lapras-tooltip[x-placement^='right'] .lapras-arrow{border-width:var(--tooltip-arrow-size) var(--tooltip-arrow-size) var(--tooltip-arrow-size) 0;border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent;left:calc(-1 * var(--tooltip-arrow-size));top:calc(50% - var(--tooltip-arrow-size));margin-left:0;margin-right:0}.lapras .lapras-tooltip[x-placement^='left']{margin-right:var(--tooltip-arrow-size)}.lapras .lapras-tooltip[x-placement^='left'] .lapras-arrow{border-width:var(--tooltip-arrow-size) 0 var(--tooltip-arrow-size) var(--tooltip-arrow-size);border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;right:calc(-1 * var(--tooltip-arrow-size));top:calc(50% - var(--tooltip-arrow-size));margin-left:0;margin-right:0}.lapras .lapras-tooltip .lapras-controls{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;margin-top:10px}.lapras .lapras-highlight{position:fixed;left:0;top:0;z-index:10000;fill:rgba(0,0,0,0.7);pointer-events:none}.lapras .lapras-highlight #lapras-mask{position:relative;pointer-events:all;fill:rgba(0,0,0,0.8)}