Skip to content

Instantly share code, notes, and snippets.

@AndreiF13
Forked from tomyshoam/style.css
Created November 8, 2021 11:56
Show Gist options
  • Save AndreiF13/42ec45d58d4df6d72c472ce5bd3def55 to your computer and use it in GitHub Desktop.
Save AndreiF13/42ec45d58d4df6d72c472ce5bd3def55 to your computer and use it in GitHub Desktop.
style.css
.eui-item-text-see-more {
color: #9a9b9b;
line-height: 20px;
cursor: pointer;
transition: color 0.2s ease;
white-space: nowrap;
}
.eui-item-text-see-more:hover {
color: #17191a;
}
.eui-item-text-full {
display: none;
}
.eui-item-text-expanded .eui-item-text-see-more,
.eui-item-text-expanded .eui-item-text-excerpt {
display: none;
}
.eui-item-text-expanded .eui-item-text-full {
display: block;
}
.eapps-google-maps {
width: 100%;
height: 700px;
position: relative !important;
overflow: hidden !important;
display: block;
font-family: -apple-system, BlinkMacSystemFont, Roboto, Open Sans, Helvetica Neue, sans-serif;
font-size: 15px;
font-weight: 400;
font-style: normal;
line-height: 1.2;
}
.eapps-google-maps-small .eapps-google-maps {
width: 100%;
height: 300px;
}
.eapps-google-maps-inner {
width: 100%;
height: 100%;
}
.eapps-google-maps-bar {
width: 100%;
height: 100%;
}
.eapps-google-maps-bar-container {
display: none;
width: 320px;
height: 100%;
position: absolute;
left: -320px;
top: 0;
transition: width 0.3s, max-height 0.3s, left 0.3s 0.3s;
background: #4285f4;
box-shadow: 0 2px 14px rgba(0,0,0,0.3);
z-index: 1;
}
.eapps-google-maps-bar-enabled .eapps-google-maps-bar-container {
display: block;
}
.eapps-google-maps-bar-opened .eapps-google-maps-bar-container {
left: 0;
transition: width 0.3s, max-height 0.3s, left 0.3s;
}
.eapps-google-maps-bar-opened.eapps-google-maps-small .eapps-google-maps-bar-container {
height: 100%;
max-height: 66%;
}
.eapps-google-maps-small .eapps-google-maps-bar-container {
max-width: 100%;
width: 100%;
height: 100%;
max-height: 130px;
left: 0;
top: initial;
bottom: 0;
}
.eapps-google-maps-bar-content {
height: 100%;
width: 100%;
flex-grow: 1;
position: relative;
overflow: hidden;
}
.eapps-google-maps-bar-content-item {
position: absolute;
width: 100%;
height: 100%;
background: #fff;
right: -100%;
left: initial;
transition: right 0.5s cubic-bezier(0.65, 0.05, 0.36, 1), left 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
z-index: 1;
display: flex;
flex-direction: column;
}
.eapps-google-maps-bar-content-item:after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0,0.2);
opacity: 1;
visibility: visible;
transition: opacity 0.5s;
}
.eapps-google-maps-bar-content-item-main {
left: -100%;
right: initial;
}
.eapps-google-maps-bar-content-item-main.eapps-google-maps-bar-content-item-active {
left: 0;
right: initial;
}
.eapps-google-maps-small .eapps-google-maps-bar-content-item {
height: calc(100% - 34px);
}
.eapps-google-maps-bar-content-item-active {
transition: right 0.5s cubic-bezier(0.65, 0.05, 0.36, 1), left 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
right: 0;
z-index: 2;
}
.eapps-google-maps-bar-content-item-active:after {
opacity: 0;
visibility: hidden;
}
.eapps-google-maps-bar-header {
position: relative;
background: #4285f4;
color: #fff;
display: flex;
flex-shrink: 0;
flex-direction: column;
}
.eapps-google-maps-bar-toggle {
position: absolute;
right: -24px;
top: 10px;
width: 24px;
height: 40px;
box-shadow: 2px 0 4px rgba(0,0,0,0.2);
border-radius: 0 4px 4px 0;
background-color: #fff;
cursor: pointer;
z-index: 100;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.eapps-google-maps-small .eapps-google-maps-bar-toggle {
position: static;
background-color: transparent;
box-shadow: none;
width: 100%;
height: 34px;
border-radius: 0;
}
.eapps-google-maps-small .eapps-google-maps-bar-toggle:hover-icon {
transform: translateY(-2px) rotate(180deg);
}
.eapps-google-maps-bar-toggle-icon {
fill: #bfbfbf;
display: block;
transform: rotate(90deg);
transition: transform 0.2s 0.2s ease, fill 0.3s, opacity 0.3s;
}
.eapps-google-maps-bar-toggle:hover .eapps-google-maps-bar-toggle-icon {
fill: #000;
}
.eapps-google-maps-small .eapps-google-maps-bar-toggle:hover .eapps-google-maps-bar-toggle-icon {
fill: #fff;
opacity: 1;
}
.eapps-google-maps-bar-opened .eapps-google-maps-bar-toggle-icon {
transform: rotate(-90deg);
}
.eapps-google-maps-small .eapps-google-maps-bar-toggle-icon {
display: none;
}
.eapps-google-maps-bar-toggle-icon-small {
display: none;
fill: #fff;
}
.eapps-google-maps-small .eapps-google-maps-bar-toggle-icon-small {
opacity: 0.7;
transform: rotate(180deg);
display: block;
}
.eapps-google-maps-bar-opened.eapps-google-maps-small .eapps-google-maps-bar-toggle-icon-small {
transform: rotate(0deg);
}
.eapps-google-maps-bar-search-loading .eapps-loader {
opacity: 1;
visibility: visible;
}
.eapps-google-maps-bar-search-wrapper {
position: relative;
padding: 14px 12px;
display: flex;
justify-content: space-between;
}
.eapps-google-maps-small .eapps-google-maps-bar-search-wrapper {
padding: 12px;
}
.eapps-google-maps-bar-search-wrapper-hide {
display: none;
}
.eapps-google-maps-bar-search-inner {
font-size: 0;
position: relative;
flex-grow: 1;
opacity: 1;
visibility: visible;
transition: opacity 0.3s, visibility 0.3s;
}
.eapps-google-maps-bar-search-loading .eapps-google-maps-bar-search-inner {
opacity: 0;
visibility: hidden;
user-select: none;
}
.eapps-google-maps-bar-search-input {
width: 100%;
height: 32px;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 60px 0 12px;
box-sizing: border-box;
background: #fff;
border-radius: 2px;
border: none;
transition: color 0.3s;
outline: none;
color: #000;
font: 400 normal 14px/1.2 -apple-system, BlinkMacSystemFont, Roboto, Open Sans, Helvetica Neue, sans-serif;
}
.eapps-google-maps-bar-search-error .eapps-google-maps-bar-search-input {
color: #ff4f4f;
}
.eapps-google-maps-bar-search-input::-ms-clear {
display: none;
}
.eapps-google-maps-bar-search-buttons {
position: absolute;
height: 100%;
top: 0;
right: 0;
font-size: 0;
display: flex;
}
.eapps-google-maps-bar-search-buttons > div:first-child {
border-left: none;
}
.eapps-google-maps-bar-search-buttons-search,
.eapps-google-maps-bar-search-buttons-clear {
box-sizing: border-box;
padding: 0 8px;
margin: 8px 0;
display: block;
cursor: pointer;
border-left: 1px solid #d8d8d8;
}
.eapps-google-maps-bar-search-buttons-search:hover svg,
.eapps-google-maps-bar-search-buttons-clear:hover svg {
fill: #000;
}
.eapps-google-maps-bar-search-buttons-search svg,
.eapps-google-maps-bar-search-buttons-clear svg {
transition: fill 0.3s;
width: 16px;
height: 16px;
fill: #bfbfbf;
}
.eapps-google-maps-bar-search-location {
font-size: 0;
width: 32px;
height: 32px;
flex-shrink: 0;
flex-grow: 0;
margin-left: 8px;
background: #fff;
border-radius: 2px;
cursor: pointer;
box-sizing: border-box;
padding: 8px;
opacity: 1;
visibility: visible;
transition: opacity 0.3s, visibility 0.3s;
}
.eapps-google-maps-bar-search-loading .eapps-google-maps-bar-search-location {
opacity: 0;
visibility: hidden;
user-select: none;
}
.eapps-google-maps-bar-search-location:hover svg {
fill: #000;
}
.eapps-google-maps-bar-search-location svg {
transition: fill 0.3s;
width: 16px;
height: 16px;
fill: #bfbfbf;
}
.eapps-google-maps-bar-button {
position: relative;
cursor: pointer;
padding: 12px 12px;
background-color: rgba(0,0,0,0.2);
font-size: 14px;
transition: background-color 0.3s;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
height: 40px;
box-sizing: border-box;
text-transform: uppercase;
}
.eapps-google-maps-bar-button:hover {
background-color: rgba(0,0,0,0.15);
}
.eapps-google-maps-bar-button-icon {
fill: #fff;
transform: rotate(180deg);
}
.eapps-google-maps-bar-button-back {
background-color: transparent;
}
.eapps-google-maps-small .eapps-google-maps-bar-button-back {
cursor: default;
}
.eapps-google-maps-bar-button-back-icon {
fill: #fff;
transform: rotate(180deg);
position: absolute;
left: 12px;
}
.eapps-google-maps-small .eapps-google-maps-bar-button-back-icon {
display: none;
}
.eapps-google-maps-bar-button-back:hover {
background-color: rgba(0,0,0,0.05);
}
.eapps-google-maps-small .eapps-google-maps-bar-button-back:hover {
background-color: transparent;
}
.eapps-google-maps-bar-button-back:hover-icon {
transform: translateX(-2px);
}
.eapps-google-maps-bar-button-filter-value {
text-transform: none;
}
.eapps-google-maps-bar-button-filter-hide {
display: none;
}
.eapps-google-maps-bar-actions {
position: absolute;
top: 0;
right: 0;
height: 100%;
font-size: 0;
}
.eapps-google-maps-bar-actions span {
cursor: pointer;
display: inline-block;
text-transform: uppercase;
font-size: 13px;
line-height: 40px;
padding: 0 12px;
}
.eapps-google-maps-bar-actions span:hover {
text-decoration: underline;
}
.eapps-google-maps-bar-list {
overflow-y: auto;
background: #fff;
}
.eapps-google-maps-bar-list::-webkit-scrollbar-track {
background-color: #f0f0f0;
}
.eapps-google-maps-bar-list::-webkit-scrollbar {
width: 6px;
}
.eapps-google-maps-bar-list::-webkit-scrollbar-thumb {
background-color: #888;
}
.eapps-google-maps-bar-list-item {
position: relative;
display: flex;
justify-content: space-between;
padding: 12px;
background: #fff;
cursor: pointer;
box-sizing: border-box;
transition: box-shadow 0.3s, background 0.3s;
margin-top: 1px;
}
.eapps-google-maps-bar-list-item:hover {
background: #f2f2f2;
}
.eapps-google-maps-bar-list-item-active {
background: #fafafa;
cursor: default;
}
.eapps-google-maps-bar-list-item-info-item {
margin: 8px 0;
font-size: 12px;
color: #888;
}
.eapps-google-maps-bar-list-item-info-item a {
color: #4285f4;
text-decoration: none;
}
.eapps-google-maps-bar-list-item-info-item a:hover,
.eapps-google-maps-bar-list-item-info-item a:active {
text-decoration: underline;
}
.eapps-google-maps-bar-list-item-info-item:first-child {
margin-top: 0;
}
.eapps-google-maps-bar-list-item-info-item:last-child {
margin-bottom: 0;
}
.eapps-google-maps-bar-list-item-info-item-category {
font-size: 12px;
font-weight: 400;
}
.eapps-google-maps-bar-list-item-info-item-hours {
margin-top: 4px;
}
.eapps-google-maps-bar-list-item-info-title {
color: #000;
font-weight: 400;
font-size: 15px;
}
.eapps-google-maps-bar-list-item-additional {
flex: 0 0 76px;
width: 76px;
margin-left: 12px;
}
.eapps-google-maps-bar-list-item-additional-distance {
color: #111;
font-size: 12px;
text-align: right;
margin-top: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.eapps-google-maps-bar-list-item-additional-picture {
width: 76px;
height: 76px;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.eapps-google-maps-bar-list-item-additional-picture img {
position: absolute;
height: 100%;
top: 50%;
left: 50%;
max-width: initial;
transform: translate(-50%, -50%);
}
.eapps-google-maps-bar-list-item-active:after,
.eapps-google-maps-bar-list-item-active + .eapps-google-maps-bar-list-item:after,
.eapps-google-maps-bar-list-item:first-child:after {
opacity: 0.6;
}
.eapps-google-maps-bar-list-item:first-child {
margin-top: 0;
}
.eapps-google-maps-bar-list-item:after {
content: "";
position: absolute;
left: 0;
top: -1px;
width: 100%;
height: 1px;
background: rgba(17,17,17,0.1);
}
.eapps-google-maps-bar-filters {
padding: 0 20px;
overflow-y: auto;
}
.eapps-google-maps-bar-filters-item {
display: block;
cursor: pointer;
user-select: none;
text-align: left;
margin: 12px 0;
}
.eapps-google-maps-bar-filters-item input {
display: none;
}
.eapps-google-maps-bar-filters-item input:checked + span:after {
opacity: 1;
transform: scale(1, 1);
}
.eapps-google-maps-bar-filters-item span {
display: inline-block;
position: relative;
padding-left: 28px;
line-height: 20px;
font-size: 14px;
color: #000;
}
.eapps-google-maps-bar-filters-item span:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
margin-right: 5px;
width: 18px;
height: 18px;
border: 1px solid #d8d8d8;
background: #fff;
}
.eapps-google-maps-bar-filters-item span:after {
content: '';
display: block;
width: 10px;
height: 10px;
background-color: #4285f4;
position: absolute;
border-radius: 50%;
top: 5px;
left: 5px;
opacity: 0;
transform: scale(0, 0);
transition: all 0.2s cubic-bezier(0.64, 0.57, 0.67, 1.53);
}
.eapps-google-maps-map-container {
width: 100%;
height: 100%;
left: 0;
position: absolute;
transition: left 0 0.3s, width 0 0.3s, height 0s 0.3s;
}
.eapps-google-maps-bar-opened .eapps-google-maps-map-container {
width: calc(100% - 320px);
left: 320px;
transition: left 0s 0.3s, width 0s 0.3s, height 0s 0.3s;
}
.eapps-google-maps-bar-enabled.eapps-google-maps-small .eapps-google-maps-map-container {
height: calc(100% - 130px);
width: 100%;
left: 0;
}
.eapps-google-maps-bar-opened.eapps-google-maps-small .eapps-google-maps-map-container {
height: calc(34%);
}
.eapps-google-maps .gm-style img {
box-shadow: inherit !important;
margin: 0;
}
.eapps-google-maps .gm-style-iw {
overflow: visible !important;
}
.eapps-google-maps .gm-style-iw > div {
overflow: visible !important;
}
.eapps-google-maps .gm-style-iw-c {
padding: 12px !important;
}
.eapps-google-maps .gm-style-iw-d,
.eapps-google-maps .gm-style-iw-c {
max-height: initial !important;
}
.eapps-google-maps .widget-scene-canvas {
width: 100% !important;
}
.eapps-google-maps .gm-iv-container {
margin-left: 40px;
}
.eapps-google-maps .gm-iv-address {
min-width: 200px;
}
.eapps-google-maps-marker {
margin: -16px -16px -12px -16px;
max-width: 300px;
min-width: 200px;
position: relative;
border-radius: 10px;
box-shadow: rgba(0,0,0,0.3) 0px 1px 4px -1px;
overflow: hidden;
z-index: 100000;
}
.eapps-google-maps-marker-close {
position: absolute;
top: 12px;
right: 12px;
opacity: 0.4;
background: #fff;
border-radius: 50%;
height: 24px;
width: 24px;
text-align: center;
cursor: pointer;
z-index: 100000;
transition: opacity 0.3s;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.3);
}
.eapps-google-maps-marker-close svg {
fill: #000;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.eapps-google-maps-marker-close:hover {
opacity: 1;
}
.eapps-google-maps-marker-header {
position: relative;
}
.eapps-google-maps-marker-image {
position: relative;
height: 150px;
overflow: hidden;
margin-bottom: 0;
background: #fff;
}
.eapps-google-maps-marker-image img {
width: 100%;
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}
.eapps-google-maps-marker-title {
color: #fff;
font-size: 15px;
line-height: 1.3;
position: relative;
padding-right: 28px;
}
.eapps-google-maps-marker-title-wrapper {
background: #4285f4;
padding: 16px;
display: flex;
justify-content: space-between;
}
.eapps-google-maps-marker-title-wrapper-padding {
padding: 24px 16px;
}
.eapps-google-maps-marker-directions {
position: relative;
max-width: 80px;
min-width: 40px;
text-align: center;
}
.eapps-google-maps-marker-directions-button {
text-decoration: none !important;
}
.eapps-google-maps-marker-directions-label {
padding-bottom: 8px;
color: #fff;
font-size: 13px;
}
.eapps-google-maps-marker-directions-icon {
width: 48px;
height: 48px;
border-radius: 100%;
background-color: #fff;
position: absolute;
bottom: -48px;
right: 50%;
transform: translate(50%, 0);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 1px 6px 0 rgba(0,0,0,0.3);
}
.eapps-google-maps-marker-directions-icon svg {
fill: #3185ff;
}
.eapps-google-maps-marker-content {
padding: 16px;
padding-top: 28px;
background: #fff;
color: #222;
font-size: 13px;
}
.eapps-google-maps-marker-info-item {
margin-bottom: 8px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.eapps-google-maps-marker-info-item-address .eapps-google-maps-marker-info-item-text {
white-space: normal;
display: inline-block;
max-width: 225px;
}
.eapps-google-maps-marker-info-item-icon {
fill: #3185ff;
vertical-align: middle;
margin-right: 8px;
}
.eapps-google-maps-marker-info-item-text {
vertical-align: middle;
}
.eapps-google-maps-marker-info-item-text a {
color: #000;
text-decoration: none !important;
}
.eapps-google-maps-marker-info-item-text a:hover,
.eapps-google-maps-marker-info-item-text a:active {
color: #000 !important;
}
.eapps-google-maps-marker-description {
color: #222;
font-size: 13px;
border-top: 1px solid #e6e6e6;
margin-top: 12px;
padding-top: 12px;
}
.eapps-google-maps-marker-description hr {
background: #e6e6e6;
border: none;
height: 1px;
margin: 8px 0;
}
.eapps-google-maps-has-error.eapps-google-maps-debug .eapps-google-maps-content {
min-height: 300px;
}
.eapps-google-maps .eui-error {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
z-index: 101;
font-size: 15px;
color: #7f8588;
background: #fff;
}
.eapps-google-maps-has-error.eapps-google-maps-debug.eapps-google-maps .eui-error {
display: flex;
}
.eapps-loader {
width: 28px;
height: 28px;
animation: eapps-loader-1 4.8s linear infinite;
opacity: 0;
visibility: hidden;
position: absolute;
left: 50%;
top: 50%;
margin-left: -14px;
margin-top: -14px;
transform-origin: center center;
transition: opacity 0.3s, visibility 0.3s;
z-index: 10;
}
.eapps-loader-inner,
.eapps-loader-inner:after {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 50%;
content: "";
transform-origin: center center;
clip: rect(0, 28px, 28px, 14px);
}
.eapps-loader-inner {
animation: eapps-loader-2 1.2s linear infinite;
}
.eapps-loader-inner:after {
border: 2px solid currentColor;
animation: eapps-loader-3 1.2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@-moz-keyframes eapps-loader-1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes eapps-loader-1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-o-keyframes eapps-loader-1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes eapps-loader-1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-moz-keyframes eapps-loader-2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(220deg);
}
}
@-webkit-keyframes eapps-loader-2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(220deg);
}
}
@-o-keyframes eapps-loader-2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(220deg);
}
}
@keyframes eapps-loader-2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(220deg);
}
}
@-moz-keyframes eapps-loader-3 {
0% {
transform: rotate(-140deg);
}
50% {
transform: rotate(-160deg);
}
100% {
transform: rotate(140deg);
}
}
@-webkit-keyframes eapps-loader-3 {
0% {
transform: rotate(-140deg);
}
50% {
transform: rotate(-160deg);
}
100% {
transform: rotate(140deg);
}
}
@-o-keyframes eapps-loader-3 {
0% {
transform: rotate(-140deg);
}
50% {
transform: rotate(-160deg);
}
100% {
transform: rotate(140deg);
}
}
@keyframes eapps-loader-3 {
0% {
transform: rotate(-140deg);
}
50% {
transform: rotate(-160deg);
}
100% {
transform: rotate(140deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment