Skip to content

Instantly share code, notes, and snippets.

@loic
Created September 25, 2015 14:11
Show Gist options
  • Save loic/860ba1ceccb1116a54ca to your computer and use it in GitHub Desktop.
Save loic/860ba1ceccb1116a54ca to your computer and use it in GitHub Desktop.
diff --git a/www/app.js b/www/app.js
index 4e4898c..5836b84 100644
--- a/www/app.js
+++ b/www/app.js
@@ -102,6 +102,19 @@
}
})
+ .directive('input', function () {
+ return {
+ restrict: 'E',
+ require: ['^?mdInputContainer'],
+ link: function compile(scope, element, attrs, mdInputContainer) {
+ if (!mdInputContainer) return;
+ attrs.$observe('required', function(value) {
+ element.parent('md-input-container').toggleClass('xmd-required', value);
+ });
+ }
+ }
+ })
+
.filter('escape', function () {
return window.encodeURIComponent;
})
diff --git a/www/assets/css/index.css b/www/assets/css/index.css
index 9ac6621..adfec16 100644
--- a/www/assets/css/index.css
+++ b/www/assets/css/index.css
@@ -116,6 +116,19 @@ md-input-container .select-arrow + select {
padding-right: 25px;
}
+md-input-container.xmd-required:not(.md-input-has-value):not(.md-input-focused) label {
+ position: relative;
+ display: table;
+}
+
+md-input-container.xmd-required:not(.md-input-has-value):not(.md-input-focused) label::after {
+ content: '*';
+ top: -5px;
+ right: -10px;
+ color: rgba(255, 0, 0, 0.4);
+ position: absolute;
+}
+
.md-autocomplete-invalid input {
border-color: rgb(244,67,54) !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment