@import 'systemDefaults'
@import 'breakpoints'
section
display: flex
justify-content: space-between
padding: 0.25rem 0.5rem
.offset
&_light
transform: translate(1px, 1px)
&_standard
transform: translate(2px, 2px)
span, label
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
/********************************************************************/
/* Widgets */
.om-button
display: inline-block
font-size: 0.8rem
padding: 0.5rem
text-align: center
background: rgba($frames-color, 0.3)
border: solid 2px rgba($frames-color, 0.0)
height: 1.0rem
border-radius: 5px
cursor: pointer
transition: transform 0.3s, opacity 1.0s, background-color 1.0s
&:hover
transform: scale(0.98)
&:active
border: solid 1px rgba($frames-color, 0.9)
&__icon, &__text
width: 1.0rem
height: 1.0rem
&:hover
border: solid 2px rgba($frames-color, 0.3)
background: rgba($frames-color, 0.4)
transform: scale(0.90)
&:active
border: solid 2px rgba($frames-color, 0.9)
background: rgba($frames-color, 0.2)
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
&__content
width: 100%
font-weight: 600
border-radius: unset
border: solid 1px rgba($frames-color, 0.3)
&:hover
border: solid 1px rgba($frames-color, 0.4)
background: rgba($frames-color, 0.4)
transform: scale(0.98)
&:active
background: rgba($frames-color, 0.2)
&__help::after
content: attr(data-help)
opacity: 0
transition: 0.3s all
&__help:hover::after
position: absolute
left: 20%
top: 80%
z-index: 1
background: rgba(0,0,0, 0.9)
padding: 5px 10px
border: 1px solid #333
border-bottom: 1px solid #fff
opacity: 1
transition-delay: 1s
@keyframes moveInBottom
0%
opacity: 0
transform: translateY(30px)
100%
opacity: 1
transform: translateY(0px)
.om-field
text-align: center
font-size: 1.0rem
font-family: 'Montserrat', sans-serif
padding: 0
box-sizing: border-box
background: rgba($frames-color, 0.2)
border: solid 1px rgba($frames-color, 0.3)
color: rgba($text-color, 1.0)
transition: all 0.3s
&:hover
background: rgba($frames-color, 0.3)
&:active
border: solid 1px rgba($frames-color, 0.9)
&:focus
border: solid 1px rgba($frames-color, 1.0)
/* END: Widgets */
/********************************************************************/
/********************************************************************/
/* Manage Button Section */
.creativebutton-managebutton
padding-top: 0.5rem
&__field
flex-grow: 1
margin: 0 0.5rem
&__button_code:hover::after
left: -80%
/* END: Manage Button Section */
/********************************************************************/
/********************* Overlay Menu ***************************/
.creativebutton-menuoverlay
height: 0
width: 100%
position: absolute
z-index: 1
left: 0
background-color: rgba(0,0,0, 0.95)
overflow: scroll
scrollbar-width: none
transition: 0.3s
&::-webkit-scrollbar
display: none
&__content
position: relative
width: 100%
text-align: center
margin: 1.0rem 0
&__element
padding: 0.8rem
word-wrap: no-wrap
margin: 1rem 30%
background: rgba(255, 255, 255, 0.1)
border: solid 1px rgba(255, 255, 255, 0.0)
display: block
position: relative
transition: all 0.3s
&::before
content: "\1405"
width: 100px
border: solid 1px rgba(255, 255, 255, 0.0)
font-size: 1.5rem
left: -5rem
top: calc(50% - 1.1rem)
position: absolute
transition: all 0.3s
opacity: 0
&:active
background: rgba(255, 255, 255, 1.0) !important
color: rgba(0, 0, 0, 1.0)
&:hover
letter-spacing: 1px
background: rgba(255, 255, 255, 0)
border-top: solid 1px rgba(255, 255, 255, 0.25)
border-bottom: solid 1px rgba(255, 255, 255, 0.25)
transform: scale(1.2)
cursor: pointer
&::before
opacity: 1
/****************** END: Overlay Menu *************************/
/********************************************************************/
/* States style sections */
.creativebutton-normalstate,
.creativebutton-hoverstate,
.creativebutton-pressedstate
& > *
margin: 0 0.25rem
& > :first-child
margin: 0
& > :nth-child(2)
margin-left: 0
& > :last-child
margin-right: 0
&:hover::after
left: -80%
&__field
width: 3.0rem
&__button_font
width: 6.0rem
flex-grow: 0.9
/* END: States style sections */
/********************************************************************/
/********************************************************************/
/* Result Button section */
.creativebutton-result
display: flex
justify-content: center
padding: 2.0rem
margin-bottom: 0.25rem
&__normalbutton
display: inline-block
font-size: 16px
padding: 5px 10px
text-align: center
background: rgba(255, 255, 255, 0.3)
font-family: Arial, sans-serif
cursor: pointer
transition: all 0.3s
&__hoverbutton
display: inline-block
font-size: 16px
padding: 5px 10px
text-align: center
background: rgba(255, 255, 255, 0.3)
font-family: Arial, sans-serif
cursor: pointer
transition: all 0.3s
&__pressedbutton
display: inline-block
font-size: 16px
padding: 5px 10px
text-align: center
background: rgba(255, 255, 255, 0.3)
font-family: Arial, sans-serif
cursor: pointer
transition: all 0.3s
/* END: Result Button section */
/********************************************************************/