jam-cloud/web/app/assets/stylesheets/events/react-components/EventsPage.scss

169 lines
2.8 KiB
SCSS

@import "events/constants";
@import "client/common.scss";
[data-react-class="EventsPage"] {
width:100%;
.EventsPage {
width:100%;
}
#header {
display:grid;
justify-content: center;
width:100%;
background-color:$jamkazam-background;
padding:1.5rem 0;
}
#root {
min-height: 100%;
align-items: center;
//justify-content: center;
min-width: 50%;
display: flex;
flex-direction: column;
}
.order-input {
font-size:1rem;
padding:5px;
}
.cta-button {
cursor:pointer;
font-size: 1rem;
color: white;
background-color: $cta-color;
text-align: center;
padding: 5px;
margin-left:5px;
border-radius: 8px;
border: 1px outset buttonface;
font-family: Raleway, Arial, Helvetica, sans-serif;
&.submitting {
background-color: gray;
}
}
.error {
margin-top: 1rem;
#position: absolute;
display:none;
color:red;
font-weight:bold;
&.active {
display:inline;
}
}
.eventbrite-logo {
height:2rem;
vertical-align: middle;
}
#top-container {
background-color:black;
display: grid;
justify-content:center;
padding:5rem 0 7rem 0;
}
div.root {
flex-grow: 1;
overflow: auto;
}
.logo-holder {
max-width: 300px;
min-width:0;
img {
width: 100%;
}
}
.submit-row {
text-align:center;
}
p {
margin:.5rem 0;
}
p:first-child {
margin-top:0;
}
p.last-child {
margin-bottom:0;
}
.header {
font-size: $large-font-size;
margin-top: 1rem;
width: 100%;
max-width: 700px;
text-align: center;
}
html {
font-size: 100%;
}
.listings {
display:grid;
justify-content: center;
width:100%;
}
.preview-and-action-box {
background-color: black;
position:relative;
top: -2rem;
min-width: 400px;
@include border_box_sizing;
border-width: 0 $chunkyBorderWidth $chunkyBorderWidth;
border-style: solid;
border-color: $copy-color-on-dark;
z-index: 1;
}
@media (min-width:1px) and (max-width: 1199px) {
html {
font-size: 100%;
}
.code-input {
max-width:$submit-button-width;
}
.code-input input {
font-size: $standard-font-size;
}
.code-instructions {
width:$submit-button-width;
}
.text-input input {
width:$create-account-width;
}
.select-input select{
width:$create-account-width;
}
.instructions.create-account {
margin-top:1rem;
text-align:justify;
}
.success-msg {
margin-top: 1rem;
}
.logo-holder.create-account {
margin-top:2rem;
}
.code-form.create-account {
margin-top:1rem;
}
.powered-by.create-account {
margin-top:0.5rem;
}
}
}