--- /dev/null
+// FORMS BASIC\r
+// Text inputs\r
+input[type=text],\r
+input[type=password],\r
+input[type=email],\r
+input[type=url],\r
+input[type=time],\r
+input[type=date],\r
+input[type=datetime-local],\r
+input[type=tel],\r
+input[type=number],\r
+input[type=search-md],\r
+input[type=search],\r
+textarea.md-textarea {\r
+ // General Styles\r
+ background-color: transparent;\r
+ border: none;\r
+ border-bottom: 1px solid $input-border-color;\r
+ border-radius: 0;\r
+ outline: none;\r
+ height: 2.1rem;\r
+ width: 100%;\r
+ font-size: 1rem;\r
+ box-shadow: none;\r
+ @include box-sizing(content-box);\r
+ transition: all .3s;\r
+ // Disabled input style\r
+ &:disabled,\r
+ &:disabled,\r
+ &[readonly="readonly"] {\r
+ color: $input-disabled-color;\r
+ border-bottom: 1px dotted $input-disabled-color;\r
+ background-color: transparent;\r
+ }\r
+ // Disabled label style\r
+ &:disabled+label,\r
+ &[readonly="readonly"]+label {\r
+ color: $input-disabled-color;\r
+ background-color: transparent;\r
+ }\r
+ // Focused input style\r
+ &:focus:not([readonly]) {\r
+ border-bottom: 1px solid $input-focus-color;\r
+ box-shadow: 0 1px 0 0 $input-focus-color;\r
+ }\r
+ // Focused label style\r
+ &:focus:not([readonly])+label {\r
+ color: $input-focus-color;\r
+ }\r
+ // Valid Input Style\r
+ &.valid,\r
+ &:focus.valid {\r
+ border-bottom: 1px solid $input-success-color;\r
+ box-shadow: 0 1px 0 0 $input-success-color;\r
+ }\r
+ // Custom Success Message\r
+ &.valid+label:after,\r
+ &:focus.valid+label:after {\r
+ content: attr(data-success);\r
+ color: $input-success-color;\r
+ opacity: 1;\r
+ }\r
+ // Invalid Input Style\r
+ &.invalid,\r
+ &:focus.invalid {\r
+ border-bottom: 1px solid $input-error-color;\r
+ box-shadow: 0 1px 0 0 $input-error-color;\r
+ }\r
+ // Custom Error message\r
+ &.invalid+label:after,\r
+ &:focus.invalid+label:after {\r
+ content: attr(data-error);\r
+ color: $input-error-color;\r
+ opacity: 1;\r
+ }\r
+ // Form Message Shared Styles\r
+ &+label:after {\r
+ display: block;\r
+ content: "";\r
+ position: absolute;\r
+ top: 65px;\r
+ opacity: 0;\r
+ transition: .2s opacity ease-out, .2s color ease-out;\r
+ }\r
+ &.input-alternate {\r
+ padding: 0 15px;\r
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);\r
+ font-size: 0.875rem;\r
+ border-bottom: 0;\r
+ transition: none !important;\r
+ &:hover,\r
+ &:focus {\r
+ box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .08) !important;\r
+ border-bottom: 0;\r
+ }\r
+ }\r
+}\r
+\r
+label {\r
+ font-size: $label-font-size;\r
+ color: darken ($input-border-color, 90%);\r
+}\r
+\r
+.form-control {\r
+ padding: 0;\r
+ padding-bottom: 0.6rem;\r
+ padding-top: 0.5rem;\r
+ font-size: 1rem;\r
+ line-height: 1.5;\r
+ background-color: transparent;\r
+ background-image: none;\r
+ border-radius: 0;\r
+ margin-top: 0.2rem;\r
+ margin-bottom: 1rem;\r
+ &:focus {\r
+ background: transparent;\r
+ }\r
+}\r
+\r
+.form-control:disabled,\r
+.form-control[readonly] {\r
+ background-color: transparent;\r
+ border-bottom: 1px solid #e0e0e0;\r
+}\r
+\r
+// Styling for input field wrapper\r
+.md-form {\r
+ position: relative;\r
+ margin-bottom: 1.5rem;\r
+ &.form-sm {\r
+ input {\r
+ padding-bottom: 0.2rem;\r
+ padding-top: 0.2rem;\r
+ font-size: 0.8rem;\r
+ line-height: 0.5;\r
+ }\r
+ label {\r
+ font-size: 0.9rem;\r
+ }\r
+ .prefix {\r
+ font-size: 1.5rem;\r
+ top: 0.4rem;\r
+ }\r
+ .prefix~input,\r
+ .prefix~textarea {\r
+ margin-left: 2.2rem; //Po dodaniu marginesu z lewej powstaje dziwny margines po prawej. Do poprawienia przed updatem\r
+ }\r
+ .prefix~label {\r
+ margin-left: 2.2rem;\r
+ }\r
+ }\r
+ .btn {\r
+ margin-bottom: 1.5rem;\r
+ }\r
+ label {\r
+ color: #757575;\r
+ position: absolute;\r
+ top: 0.8rem;\r
+ left: 0;\r
+ font-size: 1rem;\r
+ cursor: text;\r
+ @include transition(.2s ease-out);\r
+ }\r
+ label.active {\r
+ font-size: $label-font-size;\r
+ @include transform(translateY(-140%));\r
+ }\r
+ // Prefix Icons\r
+ .prefix {\r
+ position: absolute;\r
+ width: 3rem;\r
+ font-size: 2rem;\r
+ @include transition(color .2s);\r
+ &.active {\r
+ color: $input-focus-color;\r
+ }\r
+ }\r
+ .prefix~input,\r
+ .prefix~textarea {\r
+ margin-left: 3rem;\r
+ width: 92%;\r
+ width: calc(100% - 3rem);\r
+ }\r
+ .prefix~textarea {\r
+ padding-top: .8rem;\r
+ }\r
+ .prefix~label {\r
+ margin-left: 3rem;\r
+ }\r
+ @media #{$medium-and-down} {\r
+ .prefix~input {\r
+ width: 86%;\r
+ width: calc(100% - 3rem);\r
+ }\r
+ }\r
+ @media #{$small-and-down} {\r
+ .prefix~input {\r
+ width: 80%;\r
+ width: calc(100% - 3rem);\r
+ }\r
+ }\r
+ &.input-group {\r
+ .form-control {\r
+ margin: 0;\r
+ padding-left: 1rem;\r
+ @include placeholder {\r
+ color: #999;\r
+ padding-top: 2px;\r
+ }\r
+ }\r
+ }\r
+}\r
+\r
+.form-inline {\r
+ fieldset {\r
+ margin-right: 1.5rem;\r
+ }\r
+}\r
+\r
+// Default textarea\r
+textarea {\r
+ width: 100%;\r
+ height: 3rem;\r
+ background-color: transparent;\r
+ &.md-textarea {\r
+ overflow-y: hidden;\r
+ /* prevents scroll bar flash */\r
+ padding: 1.6rem 0;\r
+ /* prevents text jump on Enter keypress */\r
+ resize: none;\r
+ min-height: 3rem;\r
+ }\r
+}\r
+\r
+// For textarea autoresize\r
+.hiddendiv {\r
+ display: none;\r
+ white-space: pre-wrap;\r
+ word-wrap: break-word;\r
+ overflow-wrap: break-word;\r
+ /* future version of deprecated 'word-wrap' */\r
+ padding-top: 1.2rem;\r
+ /* prevents text jump on Enter keypress */\r
+}\r
+\r
+//Input color\r
+.input-dark-bg {\r
+ // Style Placeholders\r
+ @include placeholder {\r
+ color: #fff!important;\r
+ font-weight: 300;\r
+ }\r
+ input[type=text] {\r
+ border-bottom: 1px solid #fff;\r
+ }\r
+ .form-control {\r
+ color: #fff;\r
+ }\r
+}\r
+\r
+.input-light-bg {\r
+ // Style Placeholders\r
+ @include placeholder {\r
+ color: #1C2331!important;\r
+ font-weight: 300;\r
+ }\r
+ input[type=text] {\r
+ border-bottom: 1px solid #1C2331;\r
+ }\r
+ .form-control {\r
+ color: #1C2331;\r
+ }\r
+}\r
+\r
+.form-inline .form-group {\r
+ margin-right: 2rem;\r
+}\r
+\r
+i {\r
+ &.btn-primary {\r
+ background: $primary-color!important;\r
+ }\r
+ &.btn-default {\r
+ background: $default-color!important;\r
+ }\r
+ &.btn-success {\r
+ background: $success-color!important;\r
+ }\r
+ &.btn-info {\r
+ background: $info-color!important;\r
+ }\r
+ &.btn-warning {\r
+ background: $warning-color-dark!important;\r
+ }\r
+ &.btn-danger {\r
+ background: $danger-color-dark!important;\r
+ }\r
+}
\ No newline at end of file
projects / bootswatch / blobdiff