Skip to content

Instantly share code, notes, and snippets.

@fostimus
Created June 28, 2023 17:44
Show Gist options
  • Save fostimus/49adb7d87f8be4b963365718361366d1 to your computer and use it in GitHub Desktop.
Save fostimus/49adb7d87f8be4b963365718361366d1 to your computer and use it in GitHub Desktop.
Example stylesheet for use within Anvil - completely control the brand and style of your Anvil Webforms and Etch Packets.
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
body,
.forge-flow {
font-family: 'Open Sans', sans-serif;
background-color: #fff;
}
#page-title {
margin-bottom: 30px;
}
#page-title::after {
display: none;
}
.form-group .ant-form-item-label {
padding-bottom: 8px;
}
.form-group label > span {
color: #7B858E;
font-size: 14px;
font-weight: 600;
}
.form-group input {
border: 1px solid #DCDDE2;
border-radius: 5px;
font-size: 14px;
padding: 10px 15px;
}
button.circle-icon-button-container[disabled] .button-circle {
background: transparent !important;
}
.forge-flow > div:last-child {
background: #f8f8f8;
box-shadow: none;
}
body .ant-input:hover,
body .ant-input:focus,
body .ant-input:active,
body .ant-form-item-has-error .ant-input:hover,
body .ant-form-item-has-error .ant-input:active,
body .ant-form-item-has-error .ant-input:focus {
border-right-width: 1px !important;
}
.form-group input:focus {
border: 1px solid #4a4dcd;
background-color: #F5F7FE;
}
.ant-btn {
border-radius: 5px;
}
.ant-btn.ant-btn-cta,
.ant-btn.ant-btn-cta:hover,
.ant-btn.ant-btn-cta:active {
background: #3740F5;
color: white;
}
.ant-btn.ant-btn-link,
.ant-btn.ant-btn-link:hover,
.ant-btn.ant-btn-link:active {
color: #3740F5;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment