107 lines
3.4 KiB
SCSS
107 lines
3.4 KiB
SCSS
/**
|
|
* Site-wide customizations to form elements
|
|
*/
|
|
|
|
// make .submit act the same as a .button
|
|
.submit, .LJ_PollSubmit, input[type="submit"] {
|
|
@include button-base;
|
|
@include button-size;
|
|
@include button-style;
|
|
|
|
@include single-transition(background-color);
|
|
|
|
&.secondary { @include button-style($bg:$secondary-button-bg-color, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
|
|
&.large { @include button-size($padding:$button-lrg); }
|
|
&.small { @include button-size($padding:$button-sml); }
|
|
&.tiny { @include button-size($padding:$button-tny); }
|
|
&.expand { @include button-size($full-width:true); }
|
|
&.left-align { text-align: left; text-indent: rem-calc(12); }
|
|
&.right-align { text-align: right; padding-right: rem-calc(12); }
|
|
|
|
&.radius { @include button-style($bg:false, $radius:true); }
|
|
&.round { @include button-style($bg:false, $radius:$button-round); }
|
|
&.disabled, &[disabled] { @include button-style($bg:$button-bg-color, $disabled:true, $bg-hover:$button-bg-hover, $border-color:$button-border-color);
|
|
&.secondary { @include button-style($bg:$secondary-button-bg-color, $disabled:true, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
|
|
&.success { @include button-style($bg:$success-button-bg-color, $disabled:true, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
|
|
&.alert { @include button-style($bg:$alert-button-bg-color, $disabled:true, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
|
|
&.warning { @include button-style($bg:$warning-button-bg-color, $disabled:true, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); }
|
|
&.info { @include button-style($bg:$info-button-bg-color, $disabled:true, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); }
|
|
}
|
|
|
|
@media #{$medium-up} {
|
|
@include button-base($style:false, $display:inline-block);
|
|
@include button-size($padding:false, $full-width:false);
|
|
}
|
|
}
|
|
|
|
// add the userhead in front of .user-textbox, etc
|
|
input.journaltype-textbox {
|
|
font-weight: bold;
|
|
color: $anchor-font-color;
|
|
}
|
|
@each $journaltype in user, community, feed, openid {
|
|
input.#{$journaltype}-textbox, input.#{$journaltype}-textbox:focus {
|
|
background: url(/img/silk/identity/#{$journaltype}.png) 5px 50% no-repeat $input-bg-color;
|
|
padding-left: 5px + 16px + 5px !important;
|
|
}
|
|
}
|
|
|
|
.form-hint {
|
|
display: block;
|
|
margin-top: -($form-spacing);
|
|
margin-bottom: $form-spacing;
|
|
font-size: emCalc(12px);
|
|
}
|
|
|
|
legend {
|
|
color: $header-font-color;
|
|
}
|
|
|
|
fieldset {
|
|
border-width: 0;
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.panel {
|
|
fieldset {
|
|
border: none;
|
|
}
|
|
|
|
.button.secondary, button.secondary {
|
|
@include button-style($bg: lighten( $secondary-color, 5% ));
|
|
box-shadow: 0 0 2px 2px $border-color;
|
|
}
|
|
}
|
|
|
|
.focus {
|
|
transition: box-shadow $glowing-effect-fade-time, border-color $glowing-effect-fade-time ease-in-out;
|
|
|
|
box-shadow: 0 0 5px $glowing-effect-color;
|
|
border-color: $glowing-effect-color;
|
|
}
|
|
|
|
label.hidden {
|
|
@include element-invisible();
|
|
}
|
|
|
|
/**
|
|
* Helper classes to make inputs/selects embedable in a block of text
|
|
* Also applies these styles to the authas form by default.
|
|
*/
|
|
|
|
input.inline, select.inline {
|
|
width: auto;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
select.inline {
|
|
padding-right: 1.5em;
|
|
}
|
|
|
|
select#authas {
|
|
width: auto;
|
|
padding-right: 1.5em;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
@import "components/expand-for-mobile";
|