302e8f202d
* Add HTML variants for cta optimization and other nav bar adjustments * Fix 1==1 non-random mistake * Spruce up org call-to-action * Change default text color * Add html variant trial and success request specs * Fix article sidebar caching issue * One line adjustment * Modify schema * Add include ActionView::Helpers::TagHelper to user_tag_spec * Modify follow_button to remove session context * Dummy commit * Change Edit Article to Edit Post * Dummy commit * Fix rubocop concerns * Fix rubocop style
503 lines
No EOL
10 KiB
SCSS
503 lines
No EOL
10 KiB
SCSS
@import 'variables';
|
|
#page-content.users-edit,#page-content.users-update,#page-content.organizations-create,#page-content.organizations-update{
|
|
font-family: $helvetica;
|
|
#notice{
|
|
background:$green;
|
|
color:white;
|
|
padding:40px 0px 40px;
|
|
text-align:center;
|
|
position:relative;
|
|
top:60px;
|
|
left:0px;
|
|
right:0px;
|
|
&.error-notice{
|
|
background: rgba(255, 80, 80, 0.7);
|
|
}
|
|
}
|
|
.user-settings-page {
|
|
padding-top:10px;
|
|
width:900px;
|
|
max-width:94%;
|
|
margin:40px auto;
|
|
font-size:15px;
|
|
.finish-notice {
|
|
background:rgb(102, 93, 162);
|
|
max-width:95%;
|
|
padding:25px 0px;
|
|
text-align:center;
|
|
margin:0px 0px 25px;
|
|
color:white;
|
|
font-weight:bold;
|
|
border-radius:2px;
|
|
.small {
|
|
font-size:13px;
|
|
font-weight:300;
|
|
padding:15px 5px 5px;
|
|
line-height:19px;
|
|
}
|
|
}
|
|
.field-notice {
|
|
background:$red;
|
|
max-width:95%;
|
|
padding:25px 0px;
|
|
text-align:center;
|
|
margin:0px 0px 25px;
|
|
color:white;
|
|
font-weight:bold;
|
|
border-radius:2px;
|
|
.small {
|
|
font-size:13px;
|
|
font-weight:300;
|
|
padding:15px 5px 5px;
|
|
line-height:19px;
|
|
}
|
|
}
|
|
.settings-hub {
|
|
border-radius: 3px;
|
|
list-style: none;
|
|
font-size: 20px;
|
|
font-family: $helvetica-condensed;
|
|
font-stretch:condensed;
|
|
margin: 0px auto;
|
|
line-height: 33px;
|
|
padding-left: 4px;
|
|
width: 90%;
|
|
margin-bottom: 15px;
|
|
@media screen and ( min-width: 835px ) {
|
|
float: left;
|
|
width: 250px;
|
|
}
|
|
.single-settings-tab {
|
|
padding-left: 5px;
|
|
width: 210px;
|
|
display:inline-block;
|
|
color: $black;
|
|
&.selected {
|
|
background: $purple;
|
|
}
|
|
}
|
|
}
|
|
.settings-form {
|
|
margin: 0px auto 50px;
|
|
width: 94%;
|
|
max-width:700px;
|
|
float: left;
|
|
h2{
|
|
font-size: 2.5em;
|
|
}
|
|
@media screen and ( min-width: 835px ) {
|
|
width: 66%;
|
|
}
|
|
}
|
|
#error_explanation {
|
|
max-width:calc(95% - 18px);
|
|
margin-bottom:25px;
|
|
}
|
|
.big-button {
|
|
display:inline-block;
|
|
width:561px;
|
|
max-width:calc(100% - 18px);
|
|
padding:10px 0px;
|
|
padding-left:10px;
|
|
border-radius:3px;
|
|
font-size: 1.2em;
|
|
img {
|
|
vertical-align:-3px;
|
|
height: 1.2em;
|
|
width: 1.2em;
|
|
}
|
|
}
|
|
label {
|
|
display:inline-block;
|
|
vertical-align:top;
|
|
padding:14px 0px 8px;
|
|
}
|
|
.field {
|
|
input[type="checkbox"] {
|
|
margin-top: 15px;
|
|
display: inline;
|
|
width: 100px;
|
|
}
|
|
select {
|
|
margin-top: 15px;
|
|
}
|
|
&.checkbox-label-first {
|
|
label {
|
|
width: auto;
|
|
}
|
|
}
|
|
.field-notice {
|
|
text-align:right;
|
|
.field-notice-inner {
|
|
width:550px;
|
|
max-width:calc(100% - 2vw);
|
|
background:$red;
|
|
color:white;
|
|
padding:1vw;
|
|
border-radius:5px;
|
|
display:inline-block;
|
|
text-align:center;
|
|
margin-right:10px;
|
|
line-height:1.5em;
|
|
margin-top:10px;
|
|
a {
|
|
color:white;
|
|
text-decoration:underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.checkbox-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding:10px 0px 20px;
|
|
max-width:750px;
|
|
font-size:17px;
|
|
.sub-field {
|
|
display:inline-block;
|
|
}
|
|
label {
|
|
width:auto;
|
|
display:inline;
|
|
padding:0px;
|
|
}
|
|
input {
|
|
display:inline;
|
|
width:30px;
|
|
}
|
|
.field-explainer {
|
|
opacity:0.7;
|
|
margin:8px auto;
|
|
width:87%;
|
|
font-size:0.9em;
|
|
}
|
|
}
|
|
.field_with_errors {
|
|
display:inline-block;
|
|
vertical-align:top;
|
|
max-width:100%;
|
|
input {
|
|
border:2px solid rgb(237, 65, 65);
|
|
background:rgb(252, 241, 243);
|
|
}
|
|
}
|
|
form {
|
|
input {
|
|
width:650px;
|
|
max-width:calc(100% - 30px);
|
|
padding:12px;
|
|
font-size:19px;
|
|
border:1px solid rgb(222, 230, 233);
|
|
border-radius:3px;
|
|
&[type="file"] {
|
|
border:0px;
|
|
}
|
|
&[type="submit"] {
|
|
width:255px;
|
|
max-width:100%;
|
|
padding:14px 0px;
|
|
margin-top:20px;
|
|
font-size:1.8em;
|
|
cursor: pointer;
|
|
&.danger-button {
|
|
background:$red;
|
|
}
|
|
&:hover {
|
|
opacity:0.88;
|
|
}
|
|
}
|
|
}
|
|
button {
|
|
width: 130px;
|
|
padding: 3px 0px;
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
border-radius: 3px;
|
|
border: 0;
|
|
&:hover {
|
|
opacity: 0.88;
|
|
}
|
|
cursor: pointer;
|
|
&.danger-button {
|
|
background-color: $red;
|
|
color: $off-white;
|
|
}
|
|
&:disabled {
|
|
background-color: $light-medium-gray;
|
|
&:hover {
|
|
opacity: 1.0;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
img {
|
|
vertical-align:-3px;
|
|
height: 1.2em;
|
|
width: 1.2em;
|
|
}
|
|
}
|
|
.image-present {
|
|
@media screen and ( max-width: 700px ) {
|
|
display:block;
|
|
}
|
|
img {
|
|
height:48px;width:48px;border-radius:70px;
|
|
&.nav-image-version {
|
|
height:auto;
|
|
border-radius:0px;
|
|
}
|
|
}
|
|
input {
|
|
width:497px;
|
|
max-width:calc(100% - 84px);
|
|
vertical-align:top;
|
|
}
|
|
}
|
|
textarea {
|
|
border:1px solid rgb(222, 230, 233);
|
|
width:550px;
|
|
max-width:calc(100% - 30px);
|
|
padding:12px;
|
|
border-radius:3px;
|
|
height:120px;
|
|
font-size:16px;
|
|
resize:none;
|
|
}
|
|
}
|
|
h2 {
|
|
font-size:calc(40px + 1vw);
|
|
font-family: $helvetica-condensed;
|
|
font-stretch:condensed;
|
|
a {
|
|
color: $black;
|
|
background: $yellow;
|
|
}
|
|
}
|
|
.secret-field {
|
|
margin:30px 0px;
|
|
}
|
|
}
|
|
.default-billing-message {
|
|
margin:10px 0px;
|
|
}
|
|
.stripe-button-wrapper {
|
|
height:40px;
|
|
}
|
|
.credit-card-button {
|
|
background: lighten($blue, 3%);
|
|
color: white;
|
|
padding: 12px 25px;
|
|
border:1px solid darken($blue,8%);
|
|
border-radius:3px;
|
|
cursor:pointer;
|
|
font-size:1.3em;
|
|
box-shadow: inset 0 -5px 5px darken($blue,2%);
|
|
&:hover {
|
|
opacity:0.95;
|
|
}
|
|
.remove-card {
|
|
background : lighten($red, 3%);
|
|
}
|
|
}
|
|
.billing-history-header {
|
|
margin-top:35px;
|
|
font-size:2em;
|
|
border-bottom: 5px solid $black;
|
|
padding:5px;
|
|
width:270px;
|
|
}
|
|
.billing-item {
|
|
padding:10px 5px;
|
|
border-bottom: 1px solid $light-medium-gray;
|
|
margin-top:5px;
|
|
font-size:1.3em;
|
|
&:hover{
|
|
background: $light-gray;
|
|
}
|
|
.billing-item-detail {
|
|
display: inline-block;
|
|
color: $medium-gray;
|
|
font-size: 0.8em;
|
|
margin-top: 6px;
|
|
margin-right: 6px;
|
|
background: $light-gray;
|
|
padding: 3px 8px;
|
|
border-radius: 8px;
|
|
border: 1px solid $light-medium-gray;
|
|
&.billing-item-green {
|
|
color: $green;
|
|
}
|
|
&.billing-item-blue {
|
|
color: $blue;
|
|
}
|
|
&.billing-item-red {
|
|
color: $red;
|
|
}
|
|
}
|
|
form {
|
|
display:inline-block;
|
|
button {
|
|
cursor:pointer;
|
|
&:hover {
|
|
color:$blue;
|
|
border: 1px solid $blue;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.settings-hr {
|
|
opacity:0.3;
|
|
width:570px;
|
|
max-width:98%;
|
|
margin:0;
|
|
}
|
|
|
|
.github-repos {
|
|
max-height:400px;
|
|
overflow-y: auto;
|
|
background: white;
|
|
box-shadow: $shadow;
|
|
.github-repo-row {
|
|
background:white;
|
|
padding: 12px;
|
|
margin:5px 0px;
|
|
&.github-repo-row-selected {
|
|
background: $light-green;
|
|
}
|
|
.github-repo-row-name {
|
|
font-weight:bold;
|
|
}
|
|
.github-repo-fork {
|
|
font-weight:400;
|
|
background: $purple;
|
|
color:$bold-blue;
|
|
border-radius: 3px;
|
|
padding: 1px 6px;
|
|
font-size:0.9em;
|
|
}
|
|
form {
|
|
display:inline-block;
|
|
float:right;
|
|
button {
|
|
cursor:pointer;
|
|
font-size:13px;
|
|
background: white;
|
|
border:1px solid $medium-gray;
|
|
border-radius:3px;
|
|
padding: 2px 8px;
|
|
margin-top:-5px;
|
|
&:hover {
|
|
opacity:0.9;
|
|
}
|
|
}
|
|
}
|
|
.github-repo-featured-indicator {
|
|
display:inline-block;
|
|
float:right;
|
|
background:$green;
|
|
color:white;
|
|
border:0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.settings-org-members {
|
|
margin-bottom:50px;
|
|
width:550px;
|
|
max-width:92%;
|
|
h3 {
|
|
margin-bottom:18px;
|
|
}
|
|
.settings-org-member-row {
|
|
padding:10px;
|
|
font-size:20px;
|
|
position:relative;
|
|
width:100%;
|
|
background: $light-gray;
|
|
margin:3px 0px;
|
|
border-left:5px solid darken($light-gray,5%);
|
|
&.settings-org-admin-row {
|
|
border-left:5px solid $green;
|
|
background: $light-green;
|
|
}
|
|
.settings-org-member-actions {
|
|
margin-top:5px;
|
|
}
|
|
form {
|
|
display:inline-block;
|
|
}
|
|
.settings-org-member {
|
|
background: $green;
|
|
color:white;
|
|
padding:3px 8px;
|
|
border-radius:3px;
|
|
font-size:0.7em;
|
|
border:0px;
|
|
cursor:pointer;
|
|
&.settings-org-member-admin-self {
|
|
cursor:default;
|
|
background:$medium-gray;
|
|
}
|
|
&.settings-org-member-admin-other {
|
|
background:$green;
|
|
cursor:default;
|
|
}
|
|
&.settings-org-member-make-admin {
|
|
color:$green;
|
|
background: $light-green;
|
|
border:1px solid $green;
|
|
}
|
|
&.settings-org-member-remove {
|
|
color:$red;
|
|
background:lighten($red,36%);
|
|
border:1px solid $red;
|
|
}
|
|
}
|
|
}
|
|
h5 {
|
|
color:$medium-gray;
|
|
font-size:0.9em;
|
|
margin-top:-18px;
|
|
margin-bottom:10px;
|
|
}
|
|
.settings-org-secret {
|
|
overflow-x:scroll;
|
|
padding:7px;
|
|
border:1px dashed $medium-gray;
|
|
width:100%;
|
|
border-radius:3px;
|
|
font-size:1.1em;
|
|
}
|
|
.settings-generate-new-secret {
|
|
margin-top:10px;
|
|
background:$black;
|
|
color:white;
|
|
border:0px;
|
|
padding:4px 14px;
|
|
border-radius:3px;
|
|
font-size: 15px;
|
|
cursor:pointer;
|
|
&:hover {
|
|
background:lighten($black,14%);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.signout_confirm-wrapper {
|
|
padding:calc(15% + 50px) 2% 30%;
|
|
text-align:center;
|
|
}
|
|
|
|
.org-widget-preview .primary-sticky-nav{
|
|
margin-top: 10px;
|
|
position: initial;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
ul.delete__account{
|
|
li{
|
|
padding-bottom: 5px;
|
|
}
|
|
} |