├── .editorconfig ├── .gitattributes ├── .gitignore ├── BlazorMaterial.sln ├── LICENSE ├── README.md ├── global.json ├── src ├── BlazorMaterial.Base │ ├── BlazorMaterial.Base.csproj │ ├── BlazorMaterialComponent.cs │ ├── ClassNameBuilder.cs │ └── content │ │ ├── mc.base.js │ │ └── mdc.elevation.css ├── BlazorMaterial.Button │ ├── BlazorMaterial.Button.csproj │ ├── ButtonEnums.cs │ ├── MDCButton.razor │ ├── MDCButtonComponent.cs │ └── content │ │ └── mdc.button.css ├── BlazorMaterial.Drawer │ ├── BlazorMaterial.Drawer.csproj │ ├── DrawerEnums.cs │ ├── MDCDrawer.razor │ ├── MDCDrawerComponent.cs │ ├── MDCDrawerContent.razor │ ├── MDCDrawerItem.razor │ ├── MDCDrawerItemComponent.cs │ ├── MDCDrawerItemGroup.razor │ ├── MDCDrawerSpacer.razor │ └── content │ │ ├── mdc.drawer.css │ │ └── mdc.drawer.js ├── BlazorMaterial.Lists │ ├── BlazorMaterial.Lists.csproj │ ├── ListEnums.cs │ ├── MDCList.razor │ ├── MDCListComponent.cs │ ├── MDCListDivider.razor │ ├── MDCListDividerComponent.cs │ ├── MDCListGroup.razor │ ├── MDCListGroupSubHeader.razor │ ├── MDCListItem.razor │ ├── MDCListItemContent.razor │ ├── MDCListItemGraphic.razor │ ├── MDCListItemMeta.razor │ └── content │ │ └── mdc.list.css ├── BlazorMaterial.Ripple │ ├── BlazorMaterial.Ripple.csproj │ └── content │ │ ├── mdc.ripple.css │ │ └── mdc.ripple.js ├── BlazorMaterial.Theme │ ├── BlazorMaterial.Theme.csproj │ └── content │ │ └── mdc.theme.css ├── BlazorMaterial.TopAppBar │ ├── BlazorMaterial.TopAppBar.csproj │ ├── MDCTopAppBar.razor │ ├── MDCTopAppBarComponent.cs │ ├── MDCTopAppBarIcon.razor │ ├── MDCTopAppBarRow.razor │ ├── MDCTopAppBarSection.razor │ ├── MDCTopAppBarSectionComponent.cs │ ├── TopAppBarEnums.cs │ └── content │ │ ├── mdc.top-app-bar.css │ │ └── mdc.topAppBar.js └── BlazorMaterial.Typography │ ├── BlazorMaterial.Typography.csproj │ └── content │ └── mdc.typography.css └── test └── BlazorMaterial.Test ├── App.razor ├── AppState.cs ├── BlazorMaterial.Test.csproj ├── Pages ├── ButtonsDemo.razor ├── DrawerDemo.razor ├── Index.razor ├── ListsDemo.razor └── _Imports.razor ├── Program.cs ├── Shared └── MainLayout.razor ├── Startup.cs ├── _Imports.razor └── wwwroot ├── css ├── drawer.css ├── list.css └── site.css ├── images ├── animal1.svg ├── animal2.svg ├── animal3.svg ├── ic_button_24px.svg ├── ic_card_24px.svg ├── ic_chips_24dp.svg ├── ic_component_24px.svg ├── ic_component_24px_white.svg ├── ic_dialog_24px.svg ├── ic_list_24px.svg ├── ic_menu_24px.svg ├── ic_progress_activity.svg ├── ic_radio_button_24px.svg ├── ic_responsive_layout_24px.svg ├── ic_ripple_24px.svg ├── ic_selection_control_24px.svg ├── ic_shadow_24px.svg ├── ic_side_navigation_24px.svg ├── ic_switch_24px.svg ├── ic_tabs_24px.svg ├── ic_text_field_24px.svg ├── ic_theme_24px.svg ├── ic_toast_24px.svg ├── ic_toolbar_24px.svg └── ic_typography_24px.svg └── index.html /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://EditorConfig.org 2 | 3 | # This file is the top-most EditorConfig file 4 | root = true 5 | 6 | # All Files 7 | [*] 8 | charset = utf-8 9 | end_of_line = crlf 10 | indent_style = space 11 | indent_size = 4 12 | insert_final_newline = false 13 | trim_trailing_whitespace = true 14 | 15 | # Solution Files 16 | [*.sln] 17 | indent_style = tab 18 | 19 | # XML Project Files 20 | [*.{csproj,vbproj,vcxproj,vcxproj.filters,proj,projitems,shproj}] 21 | indent_size = 2 22 | 23 | # Configuration Files 24 | [*.{json,xml,yml,config,props,targets,nuspec,resx,ruleset,vsixmanifest,vsct}] 25 | indent_size = 2 26 | 27 | # Markdown Files 28 | [*.md] 29 | trim_trailing_whitespace = false 30 | 31 | # Web Files 32 | [*.{htm,html,js,ts,css,scss,less}] 33 | indent_size = 2 34 | insert_final_newline = true 35 | 36 | # Bash Files 37 | [*.sh] 38 | end_of_line = lf 39 | 40 | # Dotnet Code Style Settings 41 | # See https://docs.microsoft.com/en-us/visualstudio/ide/editorconfig-code-style-settings-reference 42 | # See http://kent-boogaart.com/blog/editorconfig-reference-for-c-developers 43 | [*.{cs,csx,cake,vb}] 44 | dotnet_sort_system_directives_first = true:warning 45 | dotnet_style_coalesce_expression = true:warning 46 | dotnet_style_collection_initializer = true:warning 47 | dotnet_style_explicit_tuple_names = true:warning 48 | dotnet_style_null_propagation = true:warning 49 | dotnet_style_object_initializer = true:warning 50 | dotnet_style_predefined_type_for_locals_parameters_members = true:warning 51 | dotnet_style_predefined_type_for_member_access = true:warning 52 | dotnet_style_qualification_for_event = true:warning 53 | dotnet_style_qualification_for_field = true:warning 54 | dotnet_style_qualification_for_method = true:warning 55 | dotnet_style_qualification_for_property = true:warning 56 | 57 | # Naming Symbols 58 | # constant_fields - Define constant fields 59 | dotnet_naming_symbols.constant_fields.applicable_kinds = field 60 | dotnet_naming_symbols.constant_fields.required_modifiers = const 61 | # non_private_readonly_fields - Define public, internal and protected readonly fields 62 | dotnet_naming_symbols.non_private_readonly_fields.applicable_accessibilities = public, internal, protected 63 | dotnet_naming_symbols.non_private_readonly_fields.applicable_kinds = field 64 | dotnet_naming_symbols.non_private_readonly_fields.required_modifiers = readonly 65 | # static_readonly_fields - Define static and readonly fields 66 | dotnet_naming_symbols.static_readonly_fields.applicable_kinds = field 67 | dotnet_naming_symbols.static_readonly_fields.required_modifiers = static, readonly 68 | # private_readonly_fields - Define private readonly fields 69 | dotnet_naming_symbols.private_readonly_fields.applicable_accessibilities = private 70 | dotnet_naming_symbols.private_readonly_fields.applicable_kinds = field 71 | dotnet_naming_symbols.private_readonly_fields.required_modifiers = readonly 72 | # public_internal_fields - Define public and internal fields 73 | dotnet_naming_symbols.public_internal_fields.applicable_accessibilities = public, internal 74 | dotnet_naming_symbols.public_internal_fields.applicable_kinds = field 75 | # private_protected_fields - Define private and protected fields 76 | dotnet_naming_symbols.private_protected_fields.applicable_accessibilities = private, protected 77 | dotnet_naming_symbols.private_protected_fields.applicable_kinds = field 78 | # public_symbols - Define any public symbol 79 | dotnet_naming_symbols.public_symbols.applicable_accessibilities = public, internal, protected, protected_internal 80 | dotnet_naming_symbols.public_symbols.applicable_kinds = method, property, event, delegate 81 | # parameters - Defines any parameter 82 | dotnet_naming_symbols.parameters.applicable_kinds = parameter 83 | # non_interface_types - Defines class, struct, enum and delegate types 84 | dotnet_naming_symbols.non_interface_types.applicable_kinds = class, struct, enum, delegate 85 | # interface_types - Defines interfaces 86 | dotnet_naming_symbols.interface_types.applicable_kinds = interface 87 | 88 | # Naming Styles 89 | # camel_case - Define the camelCase style 90 | dotnet_naming_style.camel_case.capitalization = camel_case 91 | # pascal_case - Define the Pascal_case style 92 | dotnet_naming_style.pascal_case.capitalization = pascal_case 93 | # first_upper - The first character must start with an upper-case character 94 | dotnet_naming_style.first_upper.capitalization = first_word_upper 95 | # prefix_interface_interface_with_i - Interfaces must be PascalCase and the first character of an interface must be an 'I' 96 | dotnet_naming_style.prefix_interface_interface_with_i.capitalization = pascal_case 97 | dotnet_naming_style.prefix_interface_interface_with_i.required_prefix = I 98 | 99 | # Naming Rules 100 | # Constant fields must be PascalCase 101 | dotnet_naming_rule.constant_fields_must_be_pascal_case.severity = warning 102 | dotnet_naming_rule.constant_fields_must_be_pascal_case.symbols = constant_fields 103 | dotnet_naming_rule.constant_fields_must_be_pascal_case.style = pascal_case 104 | # Public, internal and protected readonly fields must be PascalCase 105 | dotnet_naming_rule.non_private_readonly_fields_must_be_pascal_case.severity = warning 106 | dotnet_naming_rule.non_private_readonly_fields_must_be_pascal_case.symbols = non_private_readonly_fields 107 | dotnet_naming_rule.non_private_readonly_fields_must_be_pascal_case.style = pascal_case 108 | # Static readonly fields must be PascalCase 109 | dotnet_naming_rule.static_readonly_fields_must_be_pascal_case.severity = warning 110 | dotnet_naming_rule.static_readonly_fields_must_be_pascal_case.symbols = static_readonly_fields 111 | dotnet_naming_rule.static_readonly_fields_must_be_pascal_case.style = pascal_case 112 | # Private readonly fields must be camelCase 113 | dotnet_naming_rule.private_readonly_fields_must_be_camel_case.severity = warning 114 | dotnet_naming_rule.private_readonly_fields_must_be_camel_case.symbols = private_readonly_fields 115 | dotnet_naming_rule.private_readonly_fields_must_be_camel_case.style = camel_case 116 | # Public and internal fields must be PascalCase 117 | dotnet_naming_rule.public_internal_fields_must_be_pascal_case.severity = warning 118 | dotnet_naming_rule.public_internal_fields_must_be_pascal_case.symbols = public_internal_fields 119 | dotnet_naming_rule.public_internal_fields_must_be_pascal_case.style = pascal_case 120 | # Private and protected fields must be camelCase 121 | dotnet_naming_rule.private_protected_fields_must_be_camel_case.severity = warning 122 | dotnet_naming_rule.private_protected_fields_must_be_camel_case.symbols = private_protected_fields 123 | dotnet_naming_rule.private_protected_fields_must_be_camel_case.style = camel_case 124 | # Public members must be capitalized 125 | dotnet_naming_rule.public_members_must_be_capitalized.severity = warning 126 | dotnet_naming_rule.public_members_must_be_capitalized.symbols = public_symbols 127 | dotnet_naming_rule.public_members_must_be_capitalized.style = first_upper 128 | # Parameters must be camelCase 129 | dotnet_naming_rule.parameters_must_be_camel_case.severity = warning 130 | dotnet_naming_rule.parameters_must_be_camel_case.symbols = parameters 131 | dotnet_naming_rule.parameters_must_be_camel_case.style = camel_case 132 | # Class, struct, enum and delegates must be PascalCase 133 | dotnet_naming_rule.non_interface_types_must_be_pascal_case.severity = warning 134 | dotnet_naming_rule.non_interface_types_must_be_pascal_case.symbols = non_interface_types 135 | dotnet_naming_rule.non_interface_types_must_be_pascal_case.style = pascal_case 136 | # Interfaces must be PascalCase and start with an 'I' 137 | dotnet_naming_rule.interface_types_must_be_prefixed_with_i.severity = warning 138 | dotnet_naming_rule.interface_types_must_be_prefixed_with_i.symbols = interface_types 139 | dotnet_naming_rule.interface_types_must_be_prefixed_with_i.style = prefix_interface_interface_with_i 140 | 141 | # C# Code Style Settings 142 | # See https://docs.microsoft.com/en-us/visualstudio/ide/editorconfig-code-style-settings-reference 143 | # See http://kent-boogaart.com/blog/editorconfig-reference-for-c-developers 144 | [*.cs,csx,cake] 145 | # Indentation Options 146 | csharp_indent_block_contents = true:warning 147 | csharp_indent_braces = false:warning 148 | csharp_indent_case_contents = true:warning 149 | csharp_indent_labels = no_change:warning 150 | csharp_indent_switch_labels = true:warning 151 | # Style Options 152 | csharp_style_conditional_delegate_call = true:warning 153 | csharp_style_expression_bodied_accessors = true:warning 154 | csharp_style_expression_bodied_constructors = true:warning 155 | csharp_style_expression_bodied_indexers = true:warning 156 | csharp_style_expression_bodied_methods = true:warning 157 | csharp_style_expression_bodied_operators = true:warning 158 | csharp_style_expression_bodied_properties = true:warning 159 | csharp_style_inlined_variable_declaration = true:warning 160 | csharp_style_pattern_matching_over_as_with_null_check = true:warning 161 | csharp_style_pattern_matching_over_is_with_cast_check = true:warning 162 | csharp_style_throw_expression = true:warning 163 | csharp_style_var_elsewhere = true:warning 164 | csharp_style_var_for_built_in_types = true:warning 165 | csharp_style_var_when_type_is_apparent = true:warning 166 | # New Line Options 167 | csharp_new_line_before_catch = true:warning 168 | csharp_new_line_before_else = true:warning 169 | csharp_new_line_before_finally = true:warning 170 | csharp_new_line_before_members_in_anonymous_types = true:warning 171 | csharp_new_line_before_members_in_object_initializers = true:warning 172 | # BUG: Warning level cannot be set https://github.com/dotnet/roslyn/issues/18010 173 | csharp_new_line_before_open_brace = all 174 | csharp_new_line_between_query_expression_clauses = true:warning 175 | # Spacing Options 176 | csharp_space_after_cast = false:warning 177 | csharp_space_after_colon_in_inheritance_clause = true:warning 178 | csharp_space_after_comma = true:warning 179 | csharp_space_after_dot = false:warning 180 | csharp_space_after_keywords_in_control_flow_statements = true:warning 181 | csharp_space_after_semicolon_in_for_statement = true:warning 182 | csharp_space_around_binary_operators = before_and_after:warning 183 | csharp_space_around_declaration_statements = do_not_ignore:warning 184 | csharp_space_before_colon_in_inheritance_clause = true:warning 185 | csharp_space_before_comma = false:warning 186 | csharp_space_before_dot = false:warning 187 | csharp_space_before_semicolon_in_for_statement = false:warning 188 | csharp_space_before_open_square_brackets = false:warning 189 | csharp_space_between_empty_square_brackets = false:warning 190 | csharp_space_between_method_declaration_name_and_open_parenthesis = false:warning 191 | csharp_space_between_method_declaration_parameter_list_parentheses = false:warning 192 | csharp_space_between_method_declaration_empty_parameter_list_parentheses = false:warning 193 | csharp_space_between_method_call_name_and_opening_parenthesis = false:warning 194 | csharp_space_between_method_call_parameter_list_parentheses = false:warning 195 | csharp_space_between_method_call_empty_parameter_list_parentheses = false:warning 196 | csharp_space_between_parentheses = expressions:warning 197 | csharp_space_between_square_brackets = false:warning 198 | # Wrapping Options 199 | csharp_preserve_single_line_blocks = true:warning 200 | csharp_preserve_single_line_statements = false:warning -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | ############################################################################### 2 | # Set default behavior to automatically normalize line endings. 3 | ############################################################################### 4 | * text=auto 5 | 6 | ############################################################################### 7 | # Set default behavior for command prompt diff. 8 | # 9 | # This is need for earlier builds of msysgit that does not have it on by 10 | # default for csharp files. 11 | # Note: This is only used by command line 12 | ############################################################################### 13 | #*.cs diff=csharp 14 | 15 | ############################################################################### 16 | # Set the merge driver for project and solution files 17 | # 18 | # Merging from the command prompt will add diff markers to the files if there 19 | # are conflicts (Merging from VS is not affected by the settings below, in VS 20 | # the diff markers are never inserted). Diff markers may cause the following 21 | # file extensions to fail to load in VS. An alternative would be to treat 22 | # these files as binary and thus will always conflict and require user 23 | # intervention with every merge. To do so, just uncomment the entries below 24 | ############################################################################### 25 | #*.sln merge=binary 26 | #*.csproj merge=binary 27 | #*.vbproj merge=binary 28 | #*.vcxproj merge=binary 29 | #*.vcproj merge=binary 30 | #*.dbproj merge=binary 31 | #*.fsproj merge=binary 32 | #*.lsproj merge=binary 33 | #*.wixproj merge=binary 34 | #*.modelproj merge=binary 35 | #*.sqlproj merge=binary 36 | #*.wwaproj merge=binary 37 | 38 | ############################################################################### 39 | # behavior for image files 40 | # 41 | # image files are treated as binary by default. 42 | ############################################################################### 43 | #*.jpg binary 44 | #*.png binary 45 | #*.gif binary 46 | 47 | ############################################################################### 48 | # diff behavior for common document formats 49 | # 50 | # Convert binary document formats to text before diffing them. This feature 51 | # is only available from the command line. Turn it on by uncommenting the 52 | # entries below. 53 | ############################################################################### 54 | #*.doc diff=astextplain 55 | #*.DOC diff=astextplain 56 | #*.docx diff=astextplain 57 | #*.DOCX diff=astextplain 58 | #*.dot diff=astextplain 59 | #*.DOT diff=astextplain 60 | #*.pdf diff=astextplain 61 | #*.PDF diff=astextplain 62 | #*.rtf diff=astextplain 63 | #*.RTF diff=astextplain 64 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ################################################################################ 2 | # This .gitignore file was automatically created by Microsoft(R) Visual Studio. 3 | ################################################################################ 4 | 5 | .vs/ 6 | bin/ 7 | dist 8 | obj 9 | *.user 10 | */**/Properties/launchSettings.json 11 | */**/global.json -------------------------------------------------------------------------------- /BlazorMaterial.sln: -------------------------------------------------------------------------------- 1 |  2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio 15 4 | VisualStudioVersion = 15.0.26124.0 5 | MinimumVisualStudioVersion = 15.0.26124.0 6 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{3FB2A779-0CF7-4014-AFF3-AF1F1A199AB5}" 7 | EndProject 8 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "test", "test", "{AB696C70-0E67-450C-B975-82DFC8CDD9A7}" 9 | EndProject 10 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorMaterial.Base", "src\BlazorMaterial.Base\BlazorMaterial.Base.csproj", "{E474734E-A050-4414-8B3F-364830D7E40C}" 11 | EndProject 12 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorMaterial.Ripple", "src\BlazorMaterial.Ripple\BlazorMaterial.Ripple.csproj", "{6C9CC663-9C82-465D-BC5F-36EE3FB2BC93}" 13 | EndProject 14 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorMaterial.Button", "src\BlazorMaterial.Button\BlazorMaterial.Button.csproj", "{8D30231E-0B08-4C86-930C-66485E38B6A5}" 15 | EndProject 16 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorMaterial.Theme", "src\BlazorMaterial.Theme\BlazorMaterial.Theme.csproj", "{0AF63B13-6D3A-4BF4-9B57-614B35399D80}" 17 | EndProject 18 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorMaterial.Typography", "src\BlazorMaterial.Typography\BlazorMaterial.Typography.csproj", "{36B270CD-1DAD-4361-9BE8-C3D966FDC929}" 19 | EndProject 20 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorMaterial.Lists", "src\BlazorMaterial.Lists\BlazorMaterial.Lists.csproj", "{516B0D18-B688-44AF-B288-92351DC11429}" 21 | EndProject 22 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorMaterial.TopAppBar", "src\BlazorMaterial.TopAppBar\BlazorMaterial.TopAppBar.csproj", "{D0186DC5-ECA5-4E51-BBE7-9AECC7086DB6}" 23 | EndProject 24 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorMaterial.Drawer", "src\BlazorMaterial.Drawer\BlazorMaterial.Drawer.csproj", "{65079F99-9F96-4DA9-84C9-CC8C67E02C65}" 25 | EndProject 26 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorMaterial.Test", "test\BlazorMaterial.Test\BlazorMaterial.Test.csproj", "{51F248A8-76D3-4F94-BB74-B240E5A1CDF1}" 27 | EndProject 28 | Global 29 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 30 | Debug|Any CPU = Debug|Any CPU 31 | Debug|x64 = Debug|x64 32 | Debug|x86 = Debug|x86 33 | Release|Any CPU = Release|Any CPU 34 | Release|x64 = Release|x64 35 | Release|x86 = Release|x86 36 | EndGlobalSection 37 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 38 | {E474734E-A050-4414-8B3F-364830D7E40C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 39 | {E474734E-A050-4414-8B3F-364830D7E40C}.Debug|Any CPU.Build.0 = Debug|Any CPU 40 | {E474734E-A050-4414-8B3F-364830D7E40C}.Debug|x64.ActiveCfg = Debug|Any CPU 41 | {E474734E-A050-4414-8B3F-364830D7E40C}.Debug|x64.Build.0 = Debug|Any CPU 42 | {E474734E-A050-4414-8B3F-364830D7E40C}.Debug|x86.ActiveCfg = Debug|Any CPU 43 | {E474734E-A050-4414-8B3F-364830D7E40C}.Debug|x86.Build.0 = Debug|Any CPU 44 | {E474734E-A050-4414-8B3F-364830D7E40C}.Release|Any CPU.ActiveCfg = Release|Any CPU 45 | {E474734E-A050-4414-8B3F-364830D7E40C}.Release|Any CPU.Build.0 = Release|Any CPU 46 | {E474734E-A050-4414-8B3F-364830D7E40C}.Release|x64.ActiveCfg = Release|Any CPU 47 | {E474734E-A050-4414-8B3F-364830D7E40C}.Release|x64.Build.0 = Release|Any CPU 48 | {E474734E-A050-4414-8B3F-364830D7E40C}.Release|x86.ActiveCfg = Release|Any CPU 49 | {E474734E-A050-4414-8B3F-364830D7E40C}.Release|x86.Build.0 = Release|Any CPU 50 | {6C9CC663-9C82-465D-BC5F-36EE3FB2BC93}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 51 | {6C9CC663-9C82-465D-BC5F-36EE3FB2BC93}.Debug|Any CPU.Build.0 = Debug|Any CPU 52 | {6C9CC663-9C82-465D-BC5F-36EE3FB2BC93}.Debug|x64.ActiveCfg = Debug|Any CPU 53 | {6C9CC663-9C82-465D-BC5F-36EE3FB2BC93}.Debug|x64.Build.0 = Debug|Any CPU 54 | {6C9CC663-9C82-465D-BC5F-36EE3FB2BC93}.Debug|x86.ActiveCfg = Debug|Any CPU 55 | {6C9CC663-9C82-465D-BC5F-36EE3FB2BC93}.Debug|x86.Build.0 = Debug|Any CPU 56 | {6C9CC663-9C82-465D-BC5F-36EE3FB2BC93}.Release|Any CPU.ActiveCfg = Release|Any CPU 57 | {6C9CC663-9C82-465D-BC5F-36EE3FB2BC93}.Release|Any CPU.Build.0 = Release|Any CPU 58 | {6C9CC663-9C82-465D-BC5F-36EE3FB2BC93}.Release|x64.ActiveCfg = Release|Any CPU 59 | {6C9CC663-9C82-465D-BC5F-36EE3FB2BC93}.Release|x64.Build.0 = Release|Any CPU 60 | {6C9CC663-9C82-465D-BC5F-36EE3FB2BC93}.Release|x86.ActiveCfg = Release|Any CPU 61 | {6C9CC663-9C82-465D-BC5F-36EE3FB2BC93}.Release|x86.Build.0 = Release|Any CPU 62 | {8D30231E-0B08-4C86-930C-66485E38B6A5}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 63 | {8D30231E-0B08-4C86-930C-66485E38B6A5}.Debug|Any CPU.Build.0 = Debug|Any CPU 64 | {8D30231E-0B08-4C86-930C-66485E38B6A5}.Debug|x64.ActiveCfg = Debug|Any CPU 65 | {8D30231E-0B08-4C86-930C-66485E38B6A5}.Debug|x64.Build.0 = Debug|Any CPU 66 | {8D30231E-0B08-4C86-930C-66485E38B6A5}.Debug|x86.ActiveCfg = Debug|Any CPU 67 | {8D30231E-0B08-4C86-930C-66485E38B6A5}.Debug|x86.Build.0 = Debug|Any CPU 68 | {8D30231E-0B08-4C86-930C-66485E38B6A5}.Release|Any CPU.ActiveCfg = Release|Any CPU 69 | {8D30231E-0B08-4C86-930C-66485E38B6A5}.Release|Any CPU.Build.0 = Release|Any CPU 70 | {8D30231E-0B08-4C86-930C-66485E38B6A5}.Release|x64.ActiveCfg = Release|Any CPU 71 | {8D30231E-0B08-4C86-930C-66485E38B6A5}.Release|x64.Build.0 = Release|Any CPU 72 | {8D30231E-0B08-4C86-930C-66485E38B6A5}.Release|x86.ActiveCfg = Release|Any CPU 73 | {8D30231E-0B08-4C86-930C-66485E38B6A5}.Release|x86.Build.0 = Release|Any CPU 74 | {0AF63B13-6D3A-4BF4-9B57-614B35399D80}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 75 | {0AF63B13-6D3A-4BF4-9B57-614B35399D80}.Debug|Any CPU.Build.0 = Debug|Any CPU 76 | {0AF63B13-6D3A-4BF4-9B57-614B35399D80}.Debug|x64.ActiveCfg = Debug|Any CPU 77 | {0AF63B13-6D3A-4BF4-9B57-614B35399D80}.Debug|x64.Build.0 = Debug|Any CPU 78 | {0AF63B13-6D3A-4BF4-9B57-614B35399D80}.Debug|x86.ActiveCfg = Debug|Any CPU 79 | {0AF63B13-6D3A-4BF4-9B57-614B35399D80}.Debug|x86.Build.0 = Debug|Any CPU 80 | {0AF63B13-6D3A-4BF4-9B57-614B35399D80}.Release|Any CPU.ActiveCfg = Release|Any CPU 81 | {0AF63B13-6D3A-4BF4-9B57-614B35399D80}.Release|Any CPU.Build.0 = Release|Any CPU 82 | {0AF63B13-6D3A-4BF4-9B57-614B35399D80}.Release|x64.ActiveCfg = Release|Any CPU 83 | {0AF63B13-6D3A-4BF4-9B57-614B35399D80}.Release|x64.Build.0 = Release|Any CPU 84 | {0AF63B13-6D3A-4BF4-9B57-614B35399D80}.Release|x86.ActiveCfg = Release|Any CPU 85 | {0AF63B13-6D3A-4BF4-9B57-614B35399D80}.Release|x86.Build.0 = Release|Any CPU 86 | {36B270CD-1DAD-4361-9BE8-C3D966FDC929}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 87 | {36B270CD-1DAD-4361-9BE8-C3D966FDC929}.Debug|Any CPU.Build.0 = Debug|Any CPU 88 | {36B270CD-1DAD-4361-9BE8-C3D966FDC929}.Debug|x64.ActiveCfg = Debug|Any CPU 89 | {36B270CD-1DAD-4361-9BE8-C3D966FDC929}.Debug|x64.Build.0 = Debug|Any CPU 90 | {36B270CD-1DAD-4361-9BE8-C3D966FDC929}.Debug|x86.ActiveCfg = Debug|Any CPU 91 | {36B270CD-1DAD-4361-9BE8-C3D966FDC929}.Debug|x86.Build.0 = Debug|Any CPU 92 | {36B270CD-1DAD-4361-9BE8-C3D966FDC929}.Release|Any CPU.ActiveCfg = Release|Any CPU 93 | {36B270CD-1DAD-4361-9BE8-C3D966FDC929}.Release|Any CPU.Build.0 = Release|Any CPU 94 | {36B270CD-1DAD-4361-9BE8-C3D966FDC929}.Release|x64.ActiveCfg = Release|Any CPU 95 | {36B270CD-1DAD-4361-9BE8-C3D966FDC929}.Release|x64.Build.0 = Release|Any CPU 96 | {36B270CD-1DAD-4361-9BE8-C3D966FDC929}.Release|x86.ActiveCfg = Release|Any CPU 97 | {36B270CD-1DAD-4361-9BE8-C3D966FDC929}.Release|x86.Build.0 = Release|Any CPU 98 | {516B0D18-B688-44AF-B288-92351DC11429}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 99 | {516B0D18-B688-44AF-B288-92351DC11429}.Debug|Any CPU.Build.0 = Debug|Any CPU 100 | {516B0D18-B688-44AF-B288-92351DC11429}.Debug|x64.ActiveCfg = Debug|Any CPU 101 | {516B0D18-B688-44AF-B288-92351DC11429}.Debug|x64.Build.0 = Debug|Any CPU 102 | {516B0D18-B688-44AF-B288-92351DC11429}.Debug|x86.ActiveCfg = Debug|Any CPU 103 | {516B0D18-B688-44AF-B288-92351DC11429}.Debug|x86.Build.0 = Debug|Any CPU 104 | {516B0D18-B688-44AF-B288-92351DC11429}.Release|Any CPU.ActiveCfg = Release|Any CPU 105 | {516B0D18-B688-44AF-B288-92351DC11429}.Release|Any CPU.Build.0 = Release|Any CPU 106 | {516B0D18-B688-44AF-B288-92351DC11429}.Release|x64.ActiveCfg = Release|Any CPU 107 | {516B0D18-B688-44AF-B288-92351DC11429}.Release|x64.Build.0 = Release|Any CPU 108 | {516B0D18-B688-44AF-B288-92351DC11429}.Release|x86.ActiveCfg = Release|Any CPU 109 | {516B0D18-B688-44AF-B288-92351DC11429}.Release|x86.Build.0 = Release|Any CPU 110 | {D0186DC5-ECA5-4E51-BBE7-9AECC7086DB6}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 111 | {D0186DC5-ECA5-4E51-BBE7-9AECC7086DB6}.Debug|Any CPU.Build.0 = Debug|Any CPU 112 | {D0186DC5-ECA5-4E51-BBE7-9AECC7086DB6}.Debug|x64.ActiveCfg = Debug|Any CPU 113 | {D0186DC5-ECA5-4E51-BBE7-9AECC7086DB6}.Debug|x64.Build.0 = Debug|Any CPU 114 | {D0186DC5-ECA5-4E51-BBE7-9AECC7086DB6}.Debug|x86.ActiveCfg = Debug|Any CPU 115 | {D0186DC5-ECA5-4E51-BBE7-9AECC7086DB6}.Debug|x86.Build.0 = Debug|Any CPU 116 | {D0186DC5-ECA5-4E51-BBE7-9AECC7086DB6}.Release|Any CPU.ActiveCfg = Release|Any CPU 117 | {D0186DC5-ECA5-4E51-BBE7-9AECC7086DB6}.Release|Any CPU.Build.0 = Release|Any CPU 118 | {D0186DC5-ECA5-4E51-BBE7-9AECC7086DB6}.Release|x64.ActiveCfg = Release|Any CPU 119 | {D0186DC5-ECA5-4E51-BBE7-9AECC7086DB6}.Release|x64.Build.0 = Release|Any CPU 120 | {D0186DC5-ECA5-4E51-BBE7-9AECC7086DB6}.Release|x86.ActiveCfg = Release|Any CPU 121 | {D0186DC5-ECA5-4E51-BBE7-9AECC7086DB6}.Release|x86.Build.0 = Release|Any CPU 122 | {65079F99-9F96-4DA9-84C9-CC8C67E02C65}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 123 | {65079F99-9F96-4DA9-84C9-CC8C67E02C65}.Debug|Any CPU.Build.0 = Debug|Any CPU 124 | {65079F99-9F96-4DA9-84C9-CC8C67E02C65}.Debug|x64.ActiveCfg = Debug|Any CPU 125 | {65079F99-9F96-4DA9-84C9-CC8C67E02C65}.Debug|x64.Build.0 = Debug|Any CPU 126 | {65079F99-9F96-4DA9-84C9-CC8C67E02C65}.Debug|x86.ActiveCfg = Debug|Any CPU 127 | {65079F99-9F96-4DA9-84C9-CC8C67E02C65}.Debug|x86.Build.0 = Debug|Any CPU 128 | {65079F99-9F96-4DA9-84C9-CC8C67E02C65}.Release|Any CPU.ActiveCfg = Release|Any CPU 129 | {65079F99-9F96-4DA9-84C9-CC8C67E02C65}.Release|Any CPU.Build.0 = Release|Any CPU 130 | {65079F99-9F96-4DA9-84C9-CC8C67E02C65}.Release|x64.ActiveCfg = Release|Any CPU 131 | {65079F99-9F96-4DA9-84C9-CC8C67E02C65}.Release|x64.Build.0 = Release|Any CPU 132 | {65079F99-9F96-4DA9-84C9-CC8C67E02C65}.Release|x86.ActiveCfg = Release|Any CPU 133 | {65079F99-9F96-4DA9-84C9-CC8C67E02C65}.Release|x86.Build.0 = Release|Any CPU 134 | {51F248A8-76D3-4F94-BB74-B240E5A1CDF1}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 135 | {51F248A8-76D3-4F94-BB74-B240E5A1CDF1}.Debug|Any CPU.Build.0 = Debug|Any CPU 136 | {51F248A8-76D3-4F94-BB74-B240E5A1CDF1}.Debug|x64.ActiveCfg = Debug|Any CPU 137 | {51F248A8-76D3-4F94-BB74-B240E5A1CDF1}.Debug|x64.Build.0 = Debug|Any CPU 138 | {51F248A8-76D3-4F94-BB74-B240E5A1CDF1}.Debug|x86.ActiveCfg = Debug|Any CPU 139 | {51F248A8-76D3-4F94-BB74-B240E5A1CDF1}.Debug|x86.Build.0 = Debug|Any CPU 140 | {51F248A8-76D3-4F94-BB74-B240E5A1CDF1}.Release|Any CPU.ActiveCfg = Release|Any CPU 141 | {51F248A8-76D3-4F94-BB74-B240E5A1CDF1}.Release|Any CPU.Build.0 = Release|Any CPU 142 | {51F248A8-76D3-4F94-BB74-B240E5A1CDF1}.Release|x64.ActiveCfg = Release|Any CPU 143 | {51F248A8-76D3-4F94-BB74-B240E5A1CDF1}.Release|x64.Build.0 = Release|Any CPU 144 | {51F248A8-76D3-4F94-BB74-B240E5A1CDF1}.Release|x86.ActiveCfg = Release|Any CPU 145 | {51F248A8-76D3-4F94-BB74-B240E5A1CDF1}.Release|x86.Build.0 = Release|Any CPU 146 | EndGlobalSection 147 | GlobalSection(SolutionProperties) = preSolution 148 | HideSolutionNode = FALSE 149 | EndGlobalSection 150 | GlobalSection(NestedProjects) = preSolution 151 | {E474734E-A050-4414-8B3F-364830D7E40C} = {3FB2A779-0CF7-4014-AFF3-AF1F1A199AB5} 152 | {6C9CC663-9C82-465D-BC5F-36EE3FB2BC93} = {3FB2A779-0CF7-4014-AFF3-AF1F1A199AB5} 153 | {8D30231E-0B08-4C86-930C-66485E38B6A5} = {3FB2A779-0CF7-4014-AFF3-AF1F1A199AB5} 154 | {0AF63B13-6D3A-4BF4-9B57-614B35399D80} = {3FB2A779-0CF7-4014-AFF3-AF1F1A199AB5} 155 | {36B270CD-1DAD-4361-9BE8-C3D966FDC929} = {3FB2A779-0CF7-4014-AFF3-AF1F1A199AB5} 156 | {516B0D18-B688-44AF-B288-92351DC11429} = {3FB2A779-0CF7-4014-AFF3-AF1F1A199AB5} 157 | {D0186DC5-ECA5-4E51-BBE7-9AECC7086DB6} = {3FB2A779-0CF7-4014-AFF3-AF1F1A199AB5} 158 | {65079F99-9F96-4DA9-84C9-CC8C67E02C65} = {3FB2A779-0CF7-4014-AFF3-AF1F1A199AB5} 159 | {51F248A8-76D3-4F94-BB74-B240E5A1CDF1} = {AB696C70-0E67-450C-B975-82DFC8CDD9A7} 160 | EndGlobalSection 161 | GlobalSection(ExtensibilityGlobals) = postSolution 162 | SolutionGuid = {403C0648-0E6D-4B0E-8B5E-A61BEAB5F530} 163 | EndGlobalSection 164 | EndGlobal 165 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Blazor Extensions 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # BlazorMaterial 2 | Blazor components implementing Google's Material components for web - https://material.io/components/web 3 | -------------------------------------------------------------------------------- /global.json: -------------------------------------------------------------------------------- 1 | { 2 | "sdk": { 3 | "version": "3.0.100-preview4-011223" 4 | } 5 | } -------------------------------------------------------------------------------- /src/BlazorMaterial.Base/BlazorMaterial.Base.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | netstandard2.0 5 | true 6 | 7.3 7 | 3.0 8 | true 9 | BlazorMaterial 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Base/BlazorMaterialComponent.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | using Microsoft.JSInterop; 3 | 4 | namespace BlazorMaterial 5 | { 6 | public class BlazorMaterialComponent : ComponentBase 7 | { 8 | [Parameter] 9 | protected string Class { get; set; } 10 | 11 | [Inject] 12 | protected IJSRuntime JSRuntime { get; set; } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Base/ClassNameBuilder.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Text; 4 | 5 | namespace BlazorMaterial 6 | { 7 | public class ClassBuilder where T : BlazorMaterialComponent 8 | { 9 | private const char ClassNameSeparator = ' '; 10 | 11 | private const string DashSeparator = "-"; 12 | // BEM Specific separators 13 | private const string ElementSeparator = "__"; 14 | private const string ModifierSeparator = "--"; 15 | 16 | private readonly StringBuilder builder = new StringBuilder(100); 17 | private readonly string _classNamePrefix = string.Empty; 18 | private readonly IList<(string Name, Func ValueAccessor, Func Predicate, string PrefixSeparator)> classDefinitions = new List<(string, Func, Func, string)>(); 19 | 20 | public ClassBuilder(string componentLibraryPrefix = default, string componentPrefix = default) 21 | { 22 | this._classNamePrefix = componentLibraryPrefix; 23 | 24 | if (!string.IsNullOrWhiteSpace(componentPrefix)) 25 | { 26 | if (!string.IsNullOrWhiteSpace(this._classNamePrefix)) 27 | { 28 | this._classNamePrefix += $"{DashSeparator}{componentPrefix}"; 29 | } 30 | else 31 | { 32 | this._classNamePrefix = componentLibraryPrefix; 33 | } 34 | } 35 | } 36 | 37 | public string Build(T component, string extras = "", bool addClassNamePrefix = true) 38 | { 39 | if (this.classDefinitions.Count == 0) 40 | { 41 | return string.Empty; 42 | } 43 | 44 | this.builder.Clear(); 45 | 46 | if (addClassNamePrefix) 47 | { 48 | this.builder.Append($"{this._classNamePrefix}{ClassNameSeparator}"); 49 | } 50 | 51 | foreach (var classDefinition in this.classDefinitions) 52 | { 53 | if (classDefinition.Predicate == null || (classDefinition.Predicate != null && classDefinition.Predicate(component))) 54 | { 55 | if (classDefinition.ValueAccessor == null) 56 | { 57 | this.builder.Append(classDefinition.Name); 58 | } 59 | else 60 | { 61 | this.builder.Append($"{classDefinition.Name}{classDefinition.PrefixSeparator}{classDefinition.ValueAccessor(component)}"); 62 | } 63 | } 64 | } 65 | 66 | if (!string.IsNullOrWhiteSpace(extras)) 67 | { 68 | return $"{this.builder.ToString()} {extras}"; 69 | } 70 | else 71 | { 72 | return this.builder.ToString(); 73 | } 74 | 75 | } 76 | 77 | public ClassBuilder DefineClass(Func valueAccessor, PrefixSeparators prefixSeparator = PrefixSeparators.Dash) 78 | { 79 | if (valueAccessor == null) 80 | { 81 | throw new ArgumentNullException(nameof(valueAccessor)); 82 | } 83 | 84 | this.classDefinitions.Add((this._classNamePrefix, valueAccessor, c => true, this.GetPrefixSeparator(prefixSeparator))); 85 | 86 | return this; 87 | } 88 | 89 | public ClassBuilder DefineClass(Func valueAccessor, Func predicate = default, PrefixSeparators prefixSeparator = PrefixSeparators.Dash) 90 | { 91 | if (valueAccessor == null) 92 | { 93 | throw new ArgumentNullException(nameof(valueAccessor)); 94 | } 95 | 96 | this.classDefinitions.Add((this._classNamePrefix, valueAccessor, predicate, this.GetPrefixSeparator(prefixSeparator))); 97 | 98 | return this; 99 | } 100 | 101 | public ClassBuilder DefineClass(string value, Func predicate = default, PrefixSeparators prefixSeparator = PrefixSeparators.Dash) 102 | { 103 | if (string.IsNullOrWhiteSpace(value)) 104 | { 105 | throw new ArgumentNullException(nameof(value)); 106 | } 107 | 108 | // 109 | // Add class separator here, since this definition has no dynamic parts. 110 | // 111 | 112 | this.classDefinitions.Add(($"{this._classNamePrefix}{this.GetPrefixSeparator(prefixSeparator)}{value}{ClassNameSeparator}", default, predicate, string.Empty)); 113 | 114 | return this; 115 | } 116 | 117 | private string GetPrefixSeparator(PrefixSeparators prefix) 118 | { 119 | switch (prefix) 120 | { 121 | case PrefixSeparators.Element: 122 | return ElementSeparator; 123 | case PrefixSeparators.Modifier: 124 | return ModifierSeparator; 125 | default: 126 | // Dash is the default 127 | return DashSeparator; 128 | } 129 | } 130 | } 131 | 132 | public enum PrefixSeparators 133 | { 134 | Dash, 135 | Element, 136 | Modifier 137 | } 138 | } -------------------------------------------------------------------------------- /src/BlazorMaterial.Base/content/mc.base.js: -------------------------------------------------------------------------------- 1 | /*! 2 | Material Components for the Web 3 | Copyright (c) 2018 Google Inc. 4 | License: Apache-2.0 5 | */ 6 | (function webpackUniversalModuleDefinition(root, factory) { 7 | if (typeof exports === 'object' && typeof module === 'object') 8 | module.exports = factory(); 9 | else if (typeof define === 'function' && define.amd) 10 | define([], factory); 11 | else if (typeof exports === 'object') 12 | exports["base"] = factory(); 13 | else 14 | root["mdc"] = root["mdc"] || {}, root["mdc"]["base"] = factory(); 15 | })(typeof self !== 'undefined' ? self : this, function () { 16 | return /******/ (function (modules) { // webpackBootstrap 17 | /******/ // The module cache 18 | /******/ var installedModules = {}; 19 | /******/ 20 | /******/ // The require function 21 | /******/ function __webpack_require__(moduleId) { 22 | /******/ 23 | /******/ // Check if module is in cache 24 | /******/ if (installedModules[moduleId]) { 25 | /******/ return installedModules[moduleId].exports; 26 | /******/ 27 | } 28 | /******/ // Create a new module (and put it into the cache) 29 | /******/ var module = installedModules[moduleId] = { 30 | /******/ i: moduleId, 31 | /******/ l: false, 32 | /******/ exports: {} 33 | /******/ 34 | }; 35 | /******/ 36 | /******/ // Execute the module function 37 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 38 | /******/ 39 | /******/ // Flag the module as loaded 40 | /******/ module.l = true; 41 | /******/ 42 | /******/ // Return the exports of the module 43 | /******/ return module.exports; 44 | /******/ 45 | } 46 | /******/ 47 | /******/ 48 | /******/ // expose the modules object (__webpack_modules__) 49 | /******/ __webpack_require__.m = modules; 50 | /******/ 51 | /******/ // expose the module cache 52 | /******/ __webpack_require__.c = installedModules; 53 | /******/ 54 | /******/ // define getter function for harmony exports 55 | /******/ __webpack_require__.d = function (exports, name, getter) { 56 | /******/ if (!__webpack_require__.o(exports, name)) { 57 | /******/ Object.defineProperty(exports, name, { 58 | /******/ configurable: false, 59 | /******/ enumerable: true, 60 | /******/ get: getter 61 | /******/ 62 | }); 63 | /******/ 64 | } 65 | /******/ 66 | }; 67 | /******/ 68 | /******/ // getDefaultExport function for compatibility with non-harmony modules 69 | /******/ __webpack_require__.n = function (module) { 70 | /******/ var getter = module && module.__esModule ? 71 | /******/ function getDefault() { return module['default']; } : 72 | /******/ function getModuleExports() { return module; }; 73 | /******/ __webpack_require__.d(getter, 'a', getter); 74 | /******/ return getter; 75 | /******/ 76 | }; 77 | /******/ 78 | /******/ // Object.prototype.hasOwnProperty.call 79 | /******/ __webpack_require__.o = function (object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 80 | /******/ 81 | /******/ // __webpack_public_path__ 82 | /******/ __webpack_require__.p = ""; 83 | /******/ 84 | /******/ // Load entry module and return exports 85 | /******/ return __webpack_require__(__webpack_require__.s = 7); 86 | /******/ 87 | }) 88 | /************************************************************************/ 89 | /******/([ 90 | /* 0 */ 91 | /***/ (function (module, __webpack_exports__, __webpack_require__) { 92 | 93 | "use strict"; 94 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 95 | 96 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 97 | 98 | /** 99 | * @license 100 | * Copyright 2016 Google Inc. 101 | * 102 | * Licensed under the Apache License, Version 2.0 (the "License"); 103 | * you may not use this file except in compliance with the License. 104 | * You may obtain a copy of the License at 105 | * 106 | * http://www.apache.org/licenses/LICENSE-2.0 107 | * 108 | * Unless required by applicable law or agreed to in writing, software 109 | * distributed under the License is distributed on an "AS IS" BASIS, 110 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 111 | * See the License for the specific language governing permissions and 112 | * limitations under the License. 113 | */ 114 | 115 | /** 116 | * @template A 117 | */ 118 | var MDCFoundation = function () { 119 | _createClass(MDCFoundation, null, [{ 120 | key: "cssClasses", 121 | 122 | /** @return enum{cssClasses} */ 123 | get: function get() { 124 | // Classes extending MDCFoundation should implement this method to return an object which exports every 125 | // CSS class the foundation class needs as a property. e.g. {ACTIVE: 'mdc-component--active'} 126 | return {}; 127 | } 128 | 129 | /** @return enum{strings} */ 130 | 131 | }, { 132 | key: "strings", 133 | get: function get() { 134 | // Classes extending MDCFoundation should implement this method to return an object which exports all 135 | // semantic strings as constants. e.g. {ARIA_ROLE: 'tablist'} 136 | return {}; 137 | } 138 | 139 | /** @return enum{numbers} */ 140 | 141 | }, { 142 | key: "numbers", 143 | get: function get() { 144 | // Classes extending MDCFoundation should implement this method to return an object which exports all 145 | // of its semantic numbers as constants. e.g. {ANIMATION_DELAY_MS: 350} 146 | return {}; 147 | } 148 | 149 | /** @return {!Object} */ 150 | 151 | }, { 152 | key: "defaultAdapter", 153 | get: function get() { 154 | // Classes extending MDCFoundation may choose to implement this getter in order to provide a convenient 155 | // way of viewing the necessary methods of an adapter. In the future, this could also be used for adapter 156 | // validation. 157 | return {}; 158 | } 159 | 160 | /** 161 | * @param {A=} adapter 162 | */ 163 | 164 | }]); 165 | 166 | function MDCFoundation() { 167 | var adapter = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 168 | 169 | _classCallCheck(this, MDCFoundation); 170 | 171 | /** @protected {!A} */ 172 | this.adapter_ = adapter; 173 | } 174 | 175 | _createClass(MDCFoundation, [{ 176 | key: "init", 177 | value: function init() { 178 | // Subclasses should override this method to perform initialization routines (registering events, etc.) 179 | } 180 | }, { 181 | key: "destroy", 182 | value: function destroy() { 183 | // Subclasses should override this method to perform de-initialization routines (de-registering events, etc.) 184 | } 185 | }]); 186 | 187 | return MDCFoundation; 188 | }(); 189 | 190 | /* harmony default export */ __webpack_exports__["a"] = (MDCFoundation); 191 | 192 | /***/ 193 | }), 194 | /* 1 */ 195 | /***/ (function (module, __webpack_exports__, __webpack_require__) { 196 | 197 | "use strict"; 198 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__foundation__ = __webpack_require__(0); 199 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 200 | 201 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 202 | 203 | /** 204 | * @license 205 | * Copyright 2016 Google Inc. 206 | * 207 | * Licensed under the Apache License, Version 2.0 (the "License"); 208 | * you may not use this file except in compliance with the License. 209 | * You may obtain a copy of the License at 210 | * 211 | * http://www.apache.org/licenses/LICENSE-2.0 212 | * 213 | * Unless required by applicable law or agreed to in writing, software 214 | * distributed under the License is distributed on an "AS IS" BASIS, 215 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 216 | * See the License for the specific language governing permissions and 217 | * limitations under the License. 218 | */ 219 | 220 | 221 | 222 | /** 223 | * @template F 224 | */ 225 | 226 | var MDCComponent = function () { 227 | _createClass(MDCComponent, null, [{ 228 | key: 'attachTo', 229 | 230 | /** 231 | * @param {!Element} root 232 | * @return {!MDCComponent} 233 | */ 234 | value: function attachTo(root) { 235 | // Subclasses which extend MDCBase should provide an attachTo() method that takes a root element and 236 | // returns an instantiated component with its root set to that element. Also note that in the cases of 237 | // subclasses, an explicit foundation class will not have to be passed in; it will simply be initialized 238 | // from getDefaultFoundation(). 239 | return new MDCComponent(root, new __WEBPACK_IMPORTED_MODULE_0__foundation__["a" /* default */]()); 240 | } 241 | 242 | /** 243 | * @param {!Element} root 244 | * @param {F=} foundation 245 | * @param {...?} args 246 | */ 247 | 248 | }]); 249 | 250 | function MDCComponent(root) { 251 | var foundation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined; 252 | 253 | _classCallCheck(this, MDCComponent); 254 | 255 | /** @protected {!Element} */ 256 | this.root_ = root; 257 | 258 | for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) { 259 | args[_key - 2] = arguments[_key]; 260 | } 261 | 262 | this.initialize.apply(this, args); 263 | // Note that we initialize foundation here and not within the constructor's default param so that 264 | // this.root_ is defined and can be used within the foundation class. 265 | /** @protected {!F} */ 266 | this.foundation_ = foundation === undefined ? this.getDefaultFoundation() : foundation; 267 | this.foundation_.init(); 268 | this.initialSyncWithDOM(); 269 | } 270 | 271 | _createClass(MDCComponent, [{ 272 | key: 'initialize', 273 | value: function initialize() /* ...args */ { } 274 | // Subclasses can override this to do any additional setup work that would be considered part of a 275 | // "constructor". Essentially, it is a hook into the parent constructor before the foundation is 276 | // initialized. Any additional arguments besides root and foundation will be passed in here. 277 | 278 | 279 | /** 280 | * @return {!F} foundation 281 | */ 282 | 283 | }, { 284 | key: 'getDefaultFoundation', 285 | value: function getDefaultFoundation() { 286 | // Subclasses must override this method to return a properly configured foundation class for the 287 | // component. 288 | throw new Error('Subclasses must override getDefaultFoundation to return a properly configured ' + 'foundation class'); 289 | } 290 | }, { 291 | key: 'initialSyncWithDOM', 292 | value: function initialSyncWithDOM() { 293 | // Subclasses should override this method if they need to perform work to synchronize with a host DOM 294 | // object. An example of this would be a form control wrapper that needs to synchronize its internal state 295 | // to some property or attribute of the host DOM. Please note: this is *not* the place to perform DOM 296 | // reads/writes that would cause layout / paint, as this is called synchronously from within the constructor. 297 | } 298 | }, { 299 | key: 'destroy', 300 | value: function destroy() { 301 | // Subclasses may implement this method to release any resources / deregister any listeners they have 302 | // attached. An example of this might be deregistering a resize event from the window object. 303 | this.foundation_.destroy(); 304 | } 305 | 306 | /** 307 | * Wrapper method to add an event listener to the component's root element. This is most useful when 308 | * listening for custom events. 309 | * @param {string} evtType 310 | * @param {!Function} handler 311 | */ 312 | 313 | }, { 314 | key: 'listen', 315 | value: function listen(evtType, handler) { 316 | this.root_.addEventListener(evtType, handler); 317 | } 318 | 319 | /** 320 | * Wrapper method to remove an event listener to the component's root element. This is most useful when 321 | * unlistening for custom events. 322 | * @param {string} evtType 323 | * @param {!Function} handler 324 | */ 325 | 326 | }, { 327 | key: 'unlisten', 328 | value: function unlisten(evtType, handler) { 329 | this.root_.removeEventListener(evtType, handler); 330 | } 331 | 332 | /** 333 | * Fires a cross-browser-compatible custom event from the component root of the given type, 334 | * with the given data. 335 | * @param {string} evtType 336 | * @param {!Object} evtData 337 | * @param {boolean=} shouldBubble 338 | */ 339 | 340 | }, { 341 | key: 'emit', 342 | value: function emit(evtType, evtData) { 343 | var shouldBubble = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; 344 | 345 | var evt = void 0; 346 | if (typeof CustomEvent === 'function') { 347 | evt = new CustomEvent(evtType, { 348 | detail: evtData, 349 | bubbles: shouldBubble 350 | }); 351 | } else { 352 | evt = document.createEvent('CustomEvent'); 353 | evt.initCustomEvent(evtType, shouldBubble, false, evtData); 354 | } 355 | 356 | this.root_.dispatchEvent(evt); 357 | } 358 | }]); 359 | 360 | return MDCComponent; 361 | }(); 362 | 363 | /* harmony default export */ __webpack_exports__["a"] = (MDCComponent); 364 | 365 | /***/ 366 | }), 367 | /* 2 */, 368 | /* 3 */, 369 | /* 4 */, 370 | /* 5 */, 371 | /* 6 */, 372 | /* 7 */ 373 | /***/ (function (module, __webpack_exports__, __webpack_require__) { 374 | 375 | "use strict"; 376 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); 377 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__foundation__ = __webpack_require__(0); 378 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__component__ = __webpack_require__(1); 379 | /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "MDCFoundation", function () { return __WEBPACK_IMPORTED_MODULE_0__foundation__["a"]; }); 380 | /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "MDCComponent", function () { return __WEBPACK_IMPORTED_MODULE_1__component__["a"]; }); 381 | /** 382 | * @license 383 | * Copyright 2016 Google Inc. 384 | * 385 | * Licensed under the Apache License, Version 2.0 (the "License"); 386 | * you may not use this file except in compliance with the License. 387 | * You may obtain a copy of the License at 388 | * 389 | * http://www.apache.org/licenses/LICENSE-2.0 390 | * 391 | * Unless required by applicable law or agreed to in writing, software 392 | * distributed under the License is distributed on an "AS IS" BASIS, 393 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 394 | * See the License for the specific language governing permissions and 395 | * limitations under the License. 396 | */ 397 | 398 | 399 | 400 | 401 | 402 | 403 | /***/ 404 | }) 405 | /******/]); 406 | }); 407 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Base/content/mdc.elevation.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Material Components for the Web 3 | Copyright (c) 2018 Google Inc. 4 | License: Apache-2.0 5 | */ 6 | .mdc-elevation--z0 { 7 | box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); 8 | } 9 | 10 | .mdc-elevation--z1 { 11 | box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); 12 | } 13 | 14 | .mdc-elevation--z2 { 15 | box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); 16 | } 17 | 18 | .mdc-elevation--z3 { 19 | box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12); 20 | } 21 | 22 | .mdc-elevation--z4 { 23 | box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); 24 | } 25 | 26 | .mdc-elevation--z5 { 27 | box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12); 28 | } 29 | 30 | .mdc-elevation--z6 { 31 | box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); 32 | } 33 | 34 | .mdc-elevation--z7 { 35 | box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12); 36 | } 37 | 38 | .mdc-elevation--z8 { 39 | box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); 40 | } 41 | 42 | .mdc-elevation--z9 { 43 | box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12); 44 | } 45 | 46 | .mdc-elevation--z10 { 47 | box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12); 48 | } 49 | 50 | .mdc-elevation--z11 { 51 | box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12); 52 | } 53 | 54 | .mdc-elevation--z12 { 55 | box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); 56 | } 57 | 58 | .mdc-elevation--z13 { 59 | box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12); 60 | } 61 | 62 | .mdc-elevation--z14 { 63 | box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12); 64 | } 65 | 66 | .mdc-elevation--z15 { 67 | box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12); 68 | } 69 | 70 | .mdc-elevation--z16 { 71 | box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12); 72 | } 73 | 74 | .mdc-elevation--z17 { 75 | box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12); 76 | } 77 | 78 | .mdc-elevation--z18 { 79 | box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12); 80 | } 81 | 82 | .mdc-elevation--z19 { 83 | box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12); 84 | } 85 | 86 | .mdc-elevation--z20 { 87 | box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12); 88 | } 89 | 90 | .mdc-elevation--z21 { 91 | box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12); 92 | } 93 | 94 | .mdc-elevation--z22 { 95 | box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12); 96 | } 97 | 98 | .mdc-elevation--z23 { 99 | box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12); 100 | } 101 | 102 | .mdc-elevation--z24 { 103 | box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 104 | } 105 | 106 | .mdc-elevation-transition { 107 | transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); 108 | will-change: box-shadow; 109 | } 110 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Button/BlazorMaterial.Button.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | netstandard2.0 5 | true 6 | 7.3 7 | 3.0 8 | true 9 | BlazorMaterial 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Button/ButtonEnums.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorMaterial 2 | { 3 | public enum MDCButtonStyle 4 | { 5 | Default, 6 | Raised, 7 | Unelevated, 8 | Outlined 9 | } 10 | 11 | public enum MDCButtonType 12 | { 13 | Button, 14 | Anchor 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Button/MDCButton.razor: -------------------------------------------------------------------------------- 1 | @inherits MDCButtonComponent 2 | 3 | @if (this.Type == MDCButtonType.Anchor) 4 | { 5 | 6 | @if (!string.IsNullOrWhiteSpace(Icon)) 7 | { 8 | 9 | } 10 | @ChildContent 11 | 12 | } 13 | else 14 | { 15 | 22 | } -------------------------------------------------------------------------------- /src/BlazorMaterial.Button/MDCButtonComponent.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | using Microsoft.JSInterop; 3 | using System; 4 | using System.Threading.Tasks; 5 | 6 | namespace BlazorMaterial 7 | { 8 | public class MDCButtonComponent : BlazorMaterialComponent 9 | { 10 | private const string ADD_RIPPLE_FUNCTION = "mdc.ripple.MDCRipple.attachTo"; 11 | private static readonly ClassBuilder _classNameBuilder; 12 | 13 | [Parameter] 14 | protected MDCButtonType Type { get; set; } 15 | [Parameter] 16 | protected MDCButtonStyle Style { get; set; } 17 | [Parameter] 18 | protected EventCallback OnClick { get; set; } 19 | [Parameter] 20 | protected EventCallback OnMouseUp { get; set; } 21 | [Parameter] 22 | protected EventCallback OnMouseDown { get; set; } 23 | [Parameter] 24 | protected EventCallback OnKeyPress { get; set; } 25 | [Parameter] 26 | protected EventCallback OnKeyDown { get; set; } 27 | [Parameter] 28 | protected EventCallback OnKeyUp { get; set; } 29 | [Parameter] 30 | protected string Icon { get; set; } 31 | [Parameter] 32 | protected bool Disabled { get; set; } 33 | [Parameter] 34 | protected bool Dense { get; set; } 35 | [Parameter] 36 | protected string HRef { get; set; } 37 | 38 | [Parameter] 39 | protected RenderFragment ChildContent { get; set; } 40 | 41 | protected string ClassString { get; private set; } 42 | 43 | protected ElementRef _MDCButton; 44 | private bool _isFirstRender = true; 45 | 46 | static MDCButtonComponent() 47 | { 48 | _classNameBuilder = new ClassBuilder("mdc", "button") 49 | .DefineClass("dense", c => c.Dense, PrefixSeparators.Modifier) 50 | .DefineClass((c) => c.Style.ToString().ToLowerInvariant(), (c) => c.Style != MDCButtonStyle.Default, PrefixSeparators.Modifier); 51 | } 52 | 53 | protected override void OnInit() 54 | { 55 | this.ClassString = _classNameBuilder.Build(this, this.Class); 56 | } 57 | 58 | protected override async Task OnAfterRenderAsync() 59 | { 60 | if (this._isFirstRender) 61 | { 62 | this._isFirstRender = false; 63 | await this.JSRuntime.InvokeAsync(ADD_RIPPLE_FUNCTION, this._MDCButton); 64 | } 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Button/content/mdc.button.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Material Components for the Web 3 | Copyright (c) 2018 Google Inc. 4 | License: Apache-2.0 5 | */ 6 | @-webkit-keyframes mdc-ripple-fg-radius-in { 7 | from { 8 | -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 9 | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 10 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); 11 | transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); } 12 | to { 13 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); 14 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } } 15 | 16 | @keyframes mdc-ripple-fg-radius-in { 17 | from { 18 | -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 19 | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 20 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); 21 | transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); } 22 | to { 23 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); 24 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } } 25 | 26 | @-webkit-keyframes mdc-ripple-fg-opacity-in { 27 | from { 28 | -webkit-animation-timing-function: linear; 29 | animation-timing-function: linear; 30 | opacity: 0; } 31 | to { 32 | opacity: var(--mdc-ripple-fg-opacity, 0); } } 33 | 34 | @keyframes mdc-ripple-fg-opacity-in { 35 | from { 36 | -webkit-animation-timing-function: linear; 37 | animation-timing-function: linear; 38 | opacity: 0; } 39 | to { 40 | opacity: var(--mdc-ripple-fg-opacity, 0); } } 41 | 42 | @-webkit-keyframes mdc-ripple-fg-opacity-out { 43 | from { 44 | -webkit-animation-timing-function: linear; 45 | animation-timing-function: linear; 46 | opacity: var(--mdc-ripple-fg-opacity, 0); } 47 | to { 48 | opacity: 0; } } 49 | 50 | @keyframes mdc-ripple-fg-opacity-out { 51 | from { 52 | -webkit-animation-timing-function: linear; 53 | animation-timing-function: linear; 54 | opacity: var(--mdc-ripple-fg-opacity, 0); } 55 | to { 56 | opacity: 0; } } 57 | 58 | .mdc-ripple-surface--test-edge-var-bug { 59 | --mdc-ripple-surface-test-edge-var: 1px solid #000; 60 | visibility: hidden; } 61 | .mdc-ripple-surface--test-edge-var-bug::before { 62 | border: var(--mdc-ripple-surface-test-edge-var); } 63 | 64 | .mdc-button { 65 | font-family: Roboto, sans-serif; 66 | -moz-osx-font-smoothing: grayscale; 67 | -webkit-font-smoothing: antialiased; 68 | font-size: 0.875rem; 69 | line-height: 2.25rem; 70 | font-weight: 500; 71 | letter-spacing: 0.08929em; 72 | text-decoration: none; 73 | text-transform: uppercase; 74 | --mdc-ripple-fg-size: 0; 75 | --mdc-ripple-left: 0; 76 | --mdc-ripple-top: 0; 77 | --mdc-ripple-fg-scale: 1; 78 | --mdc-ripple-fg-translate-end: 0; 79 | --mdc-ripple-fg-translate-start: 0; 80 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 81 | will-change: transform, opacity; 82 | padding: 0 8px 0 8px; 83 | display: inline-flex; 84 | position: relative; 85 | align-items: center; 86 | justify-content: center; 87 | box-sizing: border-box; 88 | min-width: 64px; 89 | height: 36px; 90 | border: none; 91 | outline: none; 92 | /* @alternate */ 93 | line-height: inherit; 94 | -webkit-user-select: none; 95 | -moz-user-select: none; 96 | -ms-user-select: none; 97 | user-select: none; 98 | -webkit-appearance: none; 99 | overflow: hidden; 100 | vertical-align: middle; 101 | border-radius: 2px; } 102 | .mdc-button::before, .mdc-button::after { 103 | position: absolute; 104 | border-radius: 50%; 105 | opacity: 0; 106 | pointer-events: none; 107 | content: ""; } 108 | .mdc-button::before { 109 | transition: opacity 15ms linear; 110 | z-index: 1; } 111 | .mdc-button.mdc-ripple-upgraded::before { 112 | -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1)); 113 | transform: scale(var(--mdc-ripple-fg-scale, 1)); } 114 | .mdc-button.mdc-ripple-upgraded::after { 115 | top: 0; 116 | /* @noflip */ 117 | left: 0; 118 | -webkit-transform: scale(0); 119 | transform: scale(0); 120 | -webkit-transform-origin: center center; 121 | transform-origin: center center; } 122 | .mdc-button.mdc-ripple-upgraded--unbounded::after { 123 | top: var(--mdc-ripple-top, 0); 124 | /* @noflip */ 125 | left: var(--mdc-ripple-left, 0); } 126 | .mdc-button.mdc-ripple-upgraded--foreground-activation::after { 127 | -webkit-animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards; 128 | animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards; } 129 | .mdc-button.mdc-ripple-upgraded--foreground-deactivation::after { 130 | -webkit-animation: 150ms mdc-ripple-fg-opacity-out; 131 | animation: 150ms mdc-ripple-fg-opacity-out; 132 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); 133 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } 134 | .mdc-button::before, .mdc-button::after { 135 | top: calc(50% - 100%); 136 | /* @noflip */ 137 | left: calc(50% - 100%); 138 | width: 200%; 139 | height: 200%; } 140 | .mdc-button.mdc-ripple-upgraded::after { 141 | width: var(--mdc-ripple-fg-size, 100%); 142 | height: var(--mdc-ripple-fg-size, 100%); } 143 | .mdc-button::-moz-focus-inner { 144 | padding: 0; 145 | border: 0; } 146 | .mdc-button:active { 147 | outline: none; } 148 | .mdc-button:hover { 149 | cursor: pointer; } 150 | .mdc-button:disabled { 151 | background-color: transparent; 152 | color: rgba(0, 0, 0, 0.37); 153 | cursor: default; 154 | pointer-events: none; } 155 | .mdc-button:not(:disabled) { 156 | background-color: transparent; } 157 | .mdc-button:not(:disabled) { 158 | color: #6200ee; 159 | /* @alternate */ 160 | color: var(--mdc-theme-primary, #6200ee); } 161 | .mdc-button::before, .mdc-button::after { 162 | background-color: #6200ee; } 163 | @supports not (-ms-ime-align: auto) { 164 | .mdc-button::before, .mdc-button::after { 165 | /* @alternate */ 166 | background-color: var(--mdc-theme-primary, #6200ee); } } 167 | .mdc-button:hover::before { 168 | opacity: 0.04; } 169 | .mdc-button:not(.mdc-ripple-upgraded):focus::before, .mdc-button.mdc-ripple-upgraded--background-focused::before { 170 | transition-duration: 75ms; 171 | opacity: 0.12; } 172 | .mdc-button:not(.mdc-ripple-upgraded)::after { 173 | transition: opacity 150ms linear; } 174 | .mdc-button:not(.mdc-ripple-upgraded):active::after { 175 | transition-duration: 75ms; 176 | opacity: 0.16; } 177 | .mdc-button.mdc-ripple-upgraded { 178 | --mdc-ripple-fg-opacity: 0.16; } 179 | .mdc-button .mdc-button__icon { 180 | /* @noflip */ 181 | margin-left: 0; 182 | /* @noflip */ 183 | margin-right: 8px; 184 | display: inline-block; 185 | width: 18px; 186 | height: 18px; 187 | font-size: 18px; 188 | vertical-align: top; } 189 | [dir="rtl"] .mdc-button .mdc-button__icon, .mdc-button .mdc-button__icon[dir="rtl"] { 190 | /* @noflip */ 191 | margin-left: 8px; 192 | /* @noflip */ 193 | margin-right: 0; } 194 | .mdc-button svg.mdc-button__icon { 195 | fill: currentColor; } 196 | 197 | .mdc-button--raised .mdc-button__icon, 198 | .mdc-button--unelevated .mdc-button__icon, 199 | .mdc-button--outlined .mdc-button__icon { 200 | /* @noflip */ 201 | margin-left: -4px; 202 | /* @noflip */ 203 | margin-right: 8px; } 204 | [dir="rtl"] .mdc-button--raised .mdc-button__icon, .mdc-button--raised .mdc-button__icon[dir="rtl"], [dir="rtl"] 205 | .mdc-button--unelevated .mdc-button__icon, 206 | .mdc-button--unelevated .mdc-button__icon[dir="rtl"], [dir="rtl"] 207 | .mdc-button--outlined .mdc-button__icon, 208 | .mdc-button--outlined .mdc-button__icon[dir="rtl"] { 209 | /* @noflip */ 210 | margin-left: 8px; 211 | /* @noflip */ 212 | margin-right: -4px; } 213 | 214 | .mdc-button--raised, 215 | .mdc-button--unelevated { 216 | padding: 0 16px 0 16px; } 217 | .mdc-button--raised:disabled, 218 | .mdc-button--unelevated:disabled { 219 | background-color: rgba(0, 0, 0, 0.12); 220 | color: rgba(0, 0, 0, 0.37); } 221 | .mdc-button--raised:not(:disabled), 222 | .mdc-button--unelevated:not(:disabled) { 223 | background-color: #6200ee; } 224 | @supports not (-ms-ime-align: auto) { 225 | .mdc-button--raised:not(:disabled), 226 | .mdc-button--unelevated:not(:disabled) { 227 | /* @alternate */ 228 | background-color: var(--mdc-theme-primary, #6200ee); } } 229 | .mdc-button--raised:not(:disabled), 230 | .mdc-button--unelevated:not(:disabled) { 231 | color: #fff; 232 | /* @alternate */ 233 | color: var(--mdc-theme-on-primary, #fff); } 234 | .mdc-button--raised::before, .mdc-button--raised::after, 235 | .mdc-button--unelevated::before, 236 | .mdc-button--unelevated::after { 237 | background-color: #fff; } 238 | @supports not (-ms-ime-align: auto) { 239 | .mdc-button--raised::before, .mdc-button--raised::after, 240 | .mdc-button--unelevated::before, 241 | .mdc-button--unelevated::after { 242 | /* @alternate */ 243 | background-color: var(--mdc-theme-on-primary, #fff); } } 244 | .mdc-button--raised:hover::before, 245 | .mdc-button--unelevated:hover::before { 246 | opacity: 0.08; } 247 | .mdc-button--raised:not(.mdc-ripple-upgraded):focus::before, .mdc-button--raised.mdc-ripple-upgraded--background-focused::before, 248 | .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus::before, 249 | .mdc-button--unelevated.mdc-ripple-upgraded--background-focused::before { 250 | transition-duration: 75ms; 251 | opacity: 0.24; } 252 | .mdc-button--raised:not(.mdc-ripple-upgraded)::after, 253 | .mdc-button--unelevated:not(.mdc-ripple-upgraded)::after { 254 | transition: opacity 150ms linear; } 255 | .mdc-button--raised:not(.mdc-ripple-upgraded):active::after, 256 | .mdc-button--unelevated:not(.mdc-ripple-upgraded):active::after { 257 | transition-duration: 75ms; 258 | opacity: 0.32; } 259 | .mdc-button--raised.mdc-ripple-upgraded, 260 | .mdc-button--unelevated.mdc-ripple-upgraded { 261 | --mdc-ripple-fg-opacity: 0.32; } 262 | 263 | .mdc-button--raised { 264 | box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); 265 | transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); } 266 | .mdc-button--raised:hover, .mdc-button--raised:focus { 267 | box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } 268 | .mdc-button--raised:active { 269 | box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } 270 | .mdc-button--raised:disabled { 271 | box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); } 272 | 273 | .mdc-button--outlined { 274 | border-style: solid; 275 | padding: 0 14px 0 14px; 276 | border-width: 2px; 277 | line-height: 32px; } 278 | .mdc-button--outlined:disabled { 279 | border-color: rgba(0, 0, 0, 0.37); } 280 | .mdc-button--outlined.mdc-button--dense { 281 | line-height: 27px; } 282 | .mdc-button--outlined:not(:disabled) { 283 | border-color: #6200ee; 284 | /* @alternate */ 285 | border-color: var(--mdc-theme-primary, #6200ee); } 286 | 287 | .mdc-button--dense { 288 | height: 32px; 289 | font-size: .8125rem; 290 | line-height: 32px; } 291 | 292 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Drawer/BlazorMaterial.Drawer.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | netstandard2.0 5 | true 6 | 7.3 7 | 3.0 8 | true 9 | BlazorMaterial 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Drawer/DrawerEnums.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorMaterial 2 | { 3 | public enum MDCDrawerType 4 | { 5 | Permanent, 6 | Persistent, 7 | Temporary 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Drawer/MDCDrawer.razor: -------------------------------------------------------------------------------- 1 | @inherits MDCDrawerComponent 2 | 3 | @if (Type == MDCDrawerType.Permanent) 4 | { 5 | 8 | } -------------------------------------------------------------------------------- /src/BlazorMaterial.Drawer/MDCDrawerComponent.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | using System.Threading.Tasks; 3 | 4 | namespace BlazorMaterial 5 | { 6 | public class MDCDrawerComponent : BlazorMaterialComponent 7 | { 8 | private const string ATTACH_PERSIST_DRAWER_FUNCTION = "mdc.drawer.MDCPersistentDrawer.attachTo"; 9 | private const string ATTACH_TEMPORARY_DRAWER_FUNCTION = "mdc.drawer.MDCTemporaryDrawer.attachTo"; 10 | 11 | private static readonly ClassBuilder _classNameBuilder; 12 | 13 | [Parameter] 14 | protected MDCDrawerType Type { get; set; } 15 | 16 | [Parameter] 17 | protected RenderFragment ChildContent { get; set; } 18 | 19 | protected string ClassString { get; private set; } 20 | 21 | protected ElementRef _MDCDrawer; 22 | private bool _isFirstRender = true; 23 | 24 | static MDCDrawerComponent() 25 | { 26 | _classNameBuilder = new ClassBuilder("mdc", "drawer") 27 | .DefineClass((c) => c.Type.ToString().ToLowerInvariant(), PrefixSeparators.Modifier); 28 | } 29 | 30 | protected override void OnInit() 31 | { 32 | this.ClassString = _classNameBuilder.Build(this, this.Class); 33 | } 34 | 35 | protected override async Task OnAfterRenderAsync() 36 | { 37 | if (this._isFirstRender) 38 | { 39 | this._isFirstRender = false; 40 | 41 | if (this.Type != MDCDrawerType.Permanent) 42 | { 43 | if (this.Type == MDCDrawerType.Persistent) 44 | { 45 | await this.JSRuntime.InvokeAsync(ATTACH_PERSIST_DRAWER_FUNCTION, this._MDCDrawer); 46 | } 47 | else 48 | { 49 | await this.JSRuntime.InvokeAsync(ATTACH_TEMPORARY_DRAWER_FUNCTION, this._MDCDrawer); 50 | } 51 | } 52 | } 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Drawer/MDCDrawerContent.razor: -------------------------------------------------------------------------------- 1 | @using Microsoft.AspNetCore.Components 2 | 3 | @inherits BlazorMaterialComponent 4 | 5 | 8 | 9 | @functions{ 10 | [Parameter] 11 | private RenderFragment ChildContent { get; set; } 12 | } 13 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Drawer/MDCDrawerItem.razor: -------------------------------------------------------------------------------- 1 | @inherits MDCDrawerItemComponent 2 | 3 | 4 | 5 | @if (Icon.StartsWith("/")) 6 | { 7 | 8 | @Text 9 | 10 | } 11 | else 12 | { 13 | @Text 14 | } 15 | 16 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Drawer/MDCDrawerItemComponent.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | 3 | namespace BlazorMaterial 4 | { 5 | public class MDCDrawerItemComponent : BlazorMaterialComponent 6 | { 7 | private static readonly ClassBuilder _classNameBuilder; 8 | 9 | [Parameter] 10 | protected string HRef { get; set; } 11 | [Parameter] 12 | protected string Icon { get; set; } 13 | [Parameter] 14 | protected string Width { get; set; } 15 | [Parameter] 16 | protected string Height { get; set; } 17 | [Parameter] 18 | protected string Text { get; set; } 19 | [Parameter] 20 | protected bool Activated { get; set; } 21 | 22 | protected string ClassString { get; set; } 23 | 24 | static MDCDrawerItemComponent() 25 | { 26 | _classNameBuilder = new ClassBuilder("mdc", "list-item") 27 | .DefineClass("activated", c => c.Activated, PrefixSeparators.Modifier); 28 | } 29 | 30 | protected override void OnInit() 31 | { 32 | this.ClassString = _classNameBuilder.Build(this, this.Class); 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Drawer/MDCDrawerItemGroup.razor: -------------------------------------------------------------------------------- 1 | @using Microsoft.AspNetCore.Components 2 | @inherits BlazorMaterialComponent 3 | 4 | 7 | 8 | @functions{ 9 | [Parameter] 10 | private RenderFragment ChildContent { get; set; } 11 | } 12 | 13 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Drawer/MDCDrawerSpacer.razor: -------------------------------------------------------------------------------- 1 | @inherits BlazorMaterialComponent 2 | 3 |
-------------------------------------------------------------------------------- /src/BlazorMaterial.Drawer/content/mdc.drawer.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Material Components for the Web 3 | Copyright (c) 2018 Google Inc. 4 | License: Apache-2.0 5 | */ 6 | .mdc-drawer--persistent { 7 | color: rgba(0, 0, 0, 0.87); 8 | width: 0; } 9 | .mdc-drawer--persistent .mdc-drawer__toolbar-spacer { 10 | display: flex; 11 | position: relative; 12 | flex-direction: row; 13 | flex-shrink: 0; 14 | align-items: center; 15 | box-sizing: border-box; 16 | height: 56px; 17 | padding: 16px; 18 | border-bottom: 1px solid rgba(0, 0, 0, 0.12); } 19 | @media (min-width: 600px) { 20 | .mdc-drawer--persistent .mdc-drawer__toolbar-spacer { 21 | height: 64px; } } 22 | .mdc-drawer--persistent .mdc-drawer__header { 23 | position: relative; } 24 | .mdc-drawer--persistent .mdc-drawer__header::before { 25 | display: block; 26 | padding-top: 56.25%; 27 | content: ""; } 28 | .mdc-drawer--persistent .mdc-drawer__header-content { 29 | display: flex; 30 | position: absolute; 31 | top: 0; 32 | right: 0; 33 | bottom: 0; 34 | left: 0; 35 | align-items: flex-end; 36 | box-sizing: border-box; 37 | padding: 16px; } 38 | .mdc-drawer--persistent .mdc-list-item { 39 | font-family: Roboto, sans-serif; 40 | -moz-osx-font-smoothing: grayscale; 41 | -webkit-font-smoothing: antialiased; 42 | font-size: 0.875rem; 43 | line-height: 1.375rem; 44 | font-weight: 500; 45 | letter-spacing: 0.00714em; 46 | text-decoration: inherit; 47 | text-transform: inherit; 48 | position: relative; 49 | outline: none; 50 | color: inherit; 51 | text-decoration: none; } 52 | .mdc-drawer--persistent .mdc-list-item__graphic { 53 | color: rgba(0, 0, 0, 0.54); } 54 | .mdc-drawer--persistent.mdc-drawer--permanent, 55 | .mdc-drawer--persistent .mdc-drawer__drawer { 56 | background-color: #fff; } 57 | .mdc-drawer--persistent .mdc-drawer__drawer { 58 | /* @noflip */ 59 | border-left: 0; 60 | /* @noflip */ 61 | border-right: 1px solid #e4e4e4; 62 | /* @noflip */ 63 | left: 0; 64 | /* @noflip */ 65 | right: initial; 66 | height: 100%; 67 | -webkit-transform: translateX(-107%); 68 | transform: translateX(-107%); 69 | -webkit-transform: translateX(calc(-100% - 20px)); 70 | transform: translateX(calc(-100% - 20px)); 71 | will-change: transform; 72 | display: inline-flex; 73 | flex-direction: column; 74 | box-sizing: border-box; 75 | width: 240px; 76 | overflow: hidden; 77 | touch-action: none; } 78 | [dir="rtl"] .mdc-drawer--persistent .mdc-drawer__drawer, .mdc-drawer--persistent .mdc-drawer__drawer[dir="rtl"] { 79 | /* @noflip */ 80 | border-left: 1px solid #e4e4e4; 81 | /* @noflip */ 82 | border-right: 0; } 83 | [dir="rtl"] .mdc-drawer--persistent .mdc-drawer__drawer, .mdc-drawer--persistent .mdc-drawer__drawer[dir="rtl"] { 84 | /* @noflip */ 85 | left: initial; 86 | /* @noflip */ 87 | right: 0; } 88 | [dir="rtl"] .mdc-drawer--persistent .mdc-drawer__drawer, .mdc-drawer--persistent .mdc-drawer__drawer[dir="rtl"] { 89 | -webkit-transform: translateX(107%); 90 | transform: translateX(107%); 91 | -webkit-transform: translateX(calc(100% + 20px)); 92 | transform: translateX(calc(100% + 20px)); } 93 | .mdc-drawer--persistent.mdc-drawer--open { 94 | width: 240px; 95 | pointer-events: auto; } 96 | .mdc-drawer--persistent.mdc-drawer--open .mdc-drawer__drawer { 97 | -webkit-transform: none; 98 | transform: none; } 99 | [dir="rtl"] .mdc-drawer--persistent.mdc-drawer--open .mdc-drawer__drawer, .mdc-drawer--persistent.mdc-drawer--open[dir="rtl"] .mdc-drawer__drawer { 100 | -webkit-transform: none; 101 | transform: none; } 102 | .mdc-drawer--persistent.mdc-drawer--animating .mdc-drawer__drawer { 103 | transition: -webkit-transform 200ms 0ms cubic-bezier(0.4, 0, 0.2, 1); 104 | transition: transform 200ms 0ms cubic-bezier(0.4, 0, 0.2, 1); 105 | transition: transform 200ms 0ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 200ms 0ms cubic-bezier(0.4, 0, 0.2, 1); } 106 | .mdc-drawer--persistent.mdc-drawer--animating.mdc-drawer--open .mdc-drawer__drawer { 107 | transition: -webkit-transform 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1); 108 | transition: transform 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1); 109 | transition: transform 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1); } 110 | 111 | .mdc-drawer--permanent { 112 | color: rgba(0, 0, 0, 0.87); 113 | /* @noflip */ 114 | border-left: 0; 115 | /* @noflip */ 116 | border-right: 1px solid #e4e4e4; 117 | /* @noflip */ 118 | left: 0; 119 | /* @noflip */ 120 | right: initial; 121 | display: inline-flex; 122 | flex: 0 0 auto; 123 | flex-direction: column; 124 | box-sizing: border-box; 125 | width: 240px; 126 | overflow: hidden; } 127 | .mdc-drawer--permanent .mdc-drawer__toolbar-spacer { 128 | display: flex; 129 | position: relative; 130 | flex-direction: row; 131 | flex-shrink: 0; 132 | align-items: center; 133 | box-sizing: border-box; 134 | height: 56px; 135 | padding: 16px; 136 | border-bottom: 1px solid rgba(0, 0, 0, 0.12); } 137 | @media (min-width: 600px) { 138 | .mdc-drawer--permanent .mdc-drawer__toolbar-spacer { 139 | height: 64px; } } 140 | .mdc-drawer--permanent .mdc-drawer__header { 141 | position: relative; } 142 | .mdc-drawer--permanent .mdc-drawer__header::before { 143 | display: block; 144 | padding-top: 56.25%; 145 | content: ""; } 146 | .mdc-drawer--permanent .mdc-drawer__header-content { 147 | display: flex; 148 | position: absolute; 149 | top: 0; 150 | right: 0; 151 | bottom: 0; 152 | left: 0; 153 | align-items: flex-end; 154 | box-sizing: border-box; 155 | padding: 16px; } 156 | .mdc-drawer--permanent .mdc-list-item { 157 | font-family: Roboto, sans-serif; 158 | -moz-osx-font-smoothing: grayscale; 159 | -webkit-font-smoothing: antialiased; 160 | font-size: 0.875rem; 161 | line-height: 1.375rem; 162 | font-weight: 500; 163 | letter-spacing: 0.00714em; 164 | text-decoration: inherit; 165 | text-transform: inherit; 166 | position: relative; 167 | outline: none; 168 | color: inherit; 169 | text-decoration: none; } 170 | .mdc-drawer--permanent .mdc-list-item__graphic { 171 | color: rgba(0, 0, 0, 0.54); } 172 | .mdc-drawer--permanent.mdc-drawer--permanent, 173 | .mdc-drawer--permanent .mdc-drawer__drawer { 174 | background-color: #fff; } 175 | [dir="rtl"] .mdc-drawer--permanent, .mdc-drawer--permanent[dir="rtl"] { 176 | /* @noflip */ 177 | border-left: 1px solid #e4e4e4; 178 | /* @noflip */ 179 | border-right: 0; } 180 | [dir="rtl"] .mdc-drawer--permanent, .mdc-drawer--permanent[dir="rtl"] { 181 | /* @noflip */ 182 | left: initial; 183 | /* @noflip */ 184 | right: 0; } 185 | .mdc-drawer--permanent--floating { 186 | /* @noflip */ 187 | border-left: 0; 188 | /* @noflip */ 189 | border-right: none; 190 | background: none; } 191 | [dir="rtl"] .mdc-drawer--permanent--floating, .mdc-drawer--permanent--floating[dir="rtl"] { 192 | /* @noflip */ 193 | border-left: none; 194 | /* @noflip */ 195 | border-right: 0; } 196 | 197 | .mdc-drawer--temporary { 198 | color: rgba(0, 0, 0, 0.87); 199 | position: fixed; 200 | top: 0; 201 | left: 0; 202 | box-sizing: border-box; 203 | width: 100%; 204 | height: 100%; 205 | pointer-events: none; 206 | overflow: hidden; 207 | contain: strict; 208 | z-index: 5; } 209 | .mdc-drawer--temporary .mdc-drawer__toolbar-spacer { 210 | display: flex; 211 | position: relative; 212 | flex-direction: row; 213 | flex-shrink: 0; 214 | align-items: center; 215 | box-sizing: border-box; 216 | height: 56px; 217 | padding: 16px; 218 | border-bottom: 1px solid rgba(0, 0, 0, 0.12); } 219 | @media (min-width: 600px) { 220 | .mdc-drawer--temporary .mdc-drawer__toolbar-spacer { 221 | height: 64px; } } 222 | .mdc-drawer--temporary .mdc-drawer__header { 223 | position: relative; } 224 | .mdc-drawer--temporary .mdc-drawer__header::before { 225 | display: block; 226 | padding-top: 56.25%; 227 | content: ""; } 228 | .mdc-drawer--temporary .mdc-drawer__header-content { 229 | display: flex; 230 | position: absolute; 231 | top: 0; 232 | right: 0; 233 | bottom: 0; 234 | left: 0; 235 | align-items: flex-end; 236 | box-sizing: border-box; 237 | padding: 16px; } 238 | .mdc-drawer--temporary .mdc-list-item { 239 | font-family: Roboto, sans-serif; 240 | -moz-osx-font-smoothing: grayscale; 241 | -webkit-font-smoothing: antialiased; 242 | font-size: 0.875rem; 243 | line-height: 1.375rem; 244 | font-weight: 500; 245 | letter-spacing: 0.00714em; 246 | text-decoration: inherit; 247 | text-transform: inherit; 248 | position: relative; 249 | outline: none; 250 | color: inherit; 251 | text-decoration: none; } 252 | .mdc-drawer--temporary .mdc-list-item__graphic { 253 | color: rgba(0, 0, 0, 0.54); } 254 | .mdc-drawer--temporary.mdc-drawer--permanent, 255 | .mdc-drawer--temporary .mdc-drawer__drawer { 256 | background-color: #fff; } 257 | .mdc-drawer--temporary::before { 258 | background-color: rgba(0, 0, 0, 0.6); } 259 | .mdc-drawer--temporary::before { 260 | display: block; 261 | position: absolute; 262 | top: 0; 263 | left: 0; 264 | box-sizing: border-box; 265 | width: 100%; 266 | height: 100%; 267 | opacity: 0; 268 | opacity: var(--mdc-temporary-drawer-opacity, 0); 269 | content: ""; 270 | will-change: opacity; } 271 | .mdc-drawer--temporary .mdc-drawer__drawer { 272 | box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12); 273 | /* @noflip */ 274 | left: 0; 275 | /* @noflip */ 276 | right: initial; 277 | height: 100%; 278 | -webkit-transform: translateX(-107%); 279 | transform: translateX(-107%); 280 | -webkit-transform: translateX(calc(-100% - 20px)); 281 | transform: translateX(calc(-100% - 20px)); 282 | will-change: transform; 283 | display: flex; 284 | position: absolute; 285 | flex-direction: column; 286 | box-sizing: border-box; 287 | width: calc(100% - 56px); 288 | max-width: 280px; 289 | overflow: hidden; 290 | touch-action: none; } 291 | [dir="rtl"] .mdc-drawer--temporary .mdc-drawer__drawer, .mdc-drawer--temporary .mdc-drawer__drawer[dir="rtl"] { 292 | /* @noflip */ 293 | left: initial; 294 | /* @noflip */ 295 | right: 0; } 296 | [dir="rtl"] .mdc-drawer--temporary .mdc-drawer__drawer, .mdc-drawer--temporary .mdc-drawer__drawer[dir="rtl"] { 297 | -webkit-transform: translateX(107%); 298 | transform: translateX(107%); 299 | -webkit-transform: translateX(calc(100% + 20px)); 300 | transform: translateX(calc(100% + 20px)); } 301 | @media (min-width: 600px) { 302 | .mdc-drawer--temporary .mdc-drawer__drawer { 303 | width: calc(100% - 64px); 304 | max-width: 320px; } } 305 | .mdc-drawer--temporary .mdc-drawer__content { 306 | flex-grow: 1; 307 | box-sizing: border-box; 308 | margin: 0; 309 | overflow-x: hidden; 310 | overflow-y: auto; 311 | -webkit-overflow-scrolling: touch; 312 | touch-action: pan-y; } 313 | .mdc-drawer--temporary .mdc-drawer__footer { 314 | box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); 315 | flex-shrink: 0; } 316 | .mdc-drawer--temporary.mdc-drawer--open { 317 | pointer-events: auto; } 318 | .mdc-drawer--temporary.mdc-drawer--open::before { 319 | opacity: 1; 320 | opacity: var(--mdc-temporary-drawer-opacity, 1); } 321 | .mdc-drawer--temporary.mdc-drawer--open .mdc-drawer__drawer { 322 | -webkit-transform: none; 323 | transform: none; } 324 | [dir="rtl"] .mdc-drawer--temporary.mdc-drawer--open .mdc-drawer__drawer, .mdc-drawer--temporary.mdc-drawer--open[dir="rtl"] .mdc-drawer__drawer { 325 | -webkit-transform: none; 326 | transform: none; } 327 | .mdc-drawer--temporary.mdc-drawer--animating::before { 328 | transition: opacity 0.3s 0ms cubic-bezier(0, 0, 0.2, 1); } 329 | .mdc-drawer--temporary.mdc-drawer--animating .mdc-drawer__drawer { 330 | transition: -webkit-transform 200ms 0ms cubic-bezier(0.4, 0, 0.2, 1); 331 | transition: transform 200ms 0ms cubic-bezier(0.4, 0, 0.2, 1); 332 | transition: transform 200ms 0ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 200ms 0ms cubic-bezier(0.4, 0, 0.2, 1); } 333 | .mdc-drawer--temporary.mdc-drawer--animating.mdc-drawer--open .mdc-drawer__drawer { 334 | transition: -webkit-transform 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1); 335 | transition: transform 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1); 336 | transition: transform 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1); } 337 | 338 | .mdc-drawer-scroll-lock { 339 | overflow: hidden; } 340 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Lists/BlazorMaterial.Lists.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | netstandard2.0 5 | true 6 | 7.3 7 | 3.0 8 | true 9 | BlazorMaterial 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Lists/ListEnums.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorMaterial 2 | { 3 | public enum MDCListItemGraphicType 4 | { 5 | Icon, 6 | Image 7 | } 8 | 9 | public enum MDCListItemType 10 | { 11 | Div, 12 | Anchor 13 | } 14 | 15 | public enum MDCListItemMetaType 16 | { 17 | Default, 18 | Icon, 19 | Image 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Lists/MDCList.razor: -------------------------------------------------------------------------------- 1 | @inherits MDCListComponent 2 | 3 |
    4 | @ChildContent 5 |
-------------------------------------------------------------------------------- /src/BlazorMaterial.Lists/MDCListComponent.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | 3 | namespace BlazorMaterial 4 | { 5 | public class MDCListComponent : BlazorMaterialComponent 6 | { 7 | private static readonly ClassBuilder _classNameBuilder; 8 | [Parameter] 9 | protected bool NonInteractive { get; set; } 10 | [Parameter] 11 | protected bool Dense { get; set; } 12 | [Parameter] 13 | protected bool AvatarList { get; set; } 14 | [Parameter] 15 | protected bool TwoLine { get; set; } 16 | [Parameter] 17 | protected RenderFragment ChildContent { get; set; } 18 | 19 | protected string ClassString { get; private set; } 20 | 21 | static MDCListComponent() 22 | { 23 | _classNameBuilder = new ClassBuilder("mdc", "list") 24 | .DefineClass("non-interactive", c => c.NonInteractive, PrefixSeparators.Modifier) 25 | .DefineClass("dense", c => c.Dense, PrefixSeparators.Modifier) 26 | .DefineClass("avatar-list", c => c.AvatarList, PrefixSeparators.Modifier) 27 | .DefineClass("two-line", c => c.TwoLine, PrefixSeparators.Modifier); 28 | } 29 | 30 | protected override void OnInit() 31 | { 32 | this.ClassString = _classNameBuilder.Build(this, this.Class); 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Lists/MDCListDivider.razor: -------------------------------------------------------------------------------- 1 | @inherits MDCListDividerComponent 2 | 3 |
4 | 5 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Lists/MDCListDividerComponent.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | 3 | namespace BlazorMaterial 4 | { 5 | public class MDCListDividerComponent : BlazorMaterialComponent 6 | { 7 | private static readonly ClassBuilder _classNameBuilder; 8 | 9 | [Parameter] 10 | protected bool Padded { get; set; } 11 | [Parameter] 12 | protected bool Inset { get; set; } 13 | 14 | protected string ClassString { get; private set; } 15 | 16 | static MDCListDividerComponent() 17 | { 18 | _classNameBuilder = new ClassBuilder("mdc", "list-divider") 19 | .DefineClass("padded", c => c.Padded, PrefixSeparators.Modifier) 20 | .DefineClass("inset", (c) => c.Inset, PrefixSeparators.Modifier); 21 | } 22 | 23 | protected override void OnInit() 24 | { 25 | this.ClassString = _classNameBuilder.Build(this, this.Class); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Lists/MDCListGroup.razor: -------------------------------------------------------------------------------- 1 | @using Microsoft.AspNetCore.Components; 2 | @inherits BlazorMaterialComponent 3 | 4 |
5 | @ChildContent 6 |
7 | 8 | @functions{ 9 | [Parameter] 10 | private RenderFragment ChildContent { get; set; } 11 | } -------------------------------------------------------------------------------- /src/BlazorMaterial.Lists/MDCListGroupSubHeader.razor: -------------------------------------------------------------------------------- 1 | @using Microsoft.AspNetCore.Components; 2 | @inherits BlazorMaterialComponent 3 | 4 |

@ChildContent

5 | 6 | @functions{ 7 | [Parameter] 8 | private RenderFragment ChildContent { get; set; } 9 | } 10 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Lists/MDCListItem.razor: -------------------------------------------------------------------------------- 1 | @using Microsoft.AspNetCore.Components; 2 | @inherits BlazorMaterialComponent 3 | 4 |
  • 5 | @ChildContent 6 |
    • 7 | 8 | @functions{ 9 | [Parameter] 10 | private EventCallback OnClick { get; set; } 11 | [Parameter] 12 | private bool Divider { get; set; } 13 | [Parameter] 14 | private bool Inset { get; set; } 15 | [Parameter] 16 | private RenderFragment ChildContent { get; set; } 17 | 18 | private string _dividerClass = ""; 19 | 20 | protected override void OnInit() 21 | { 22 | var divider = Divider ? "mdc-list-divider" : ""; 23 | var inset = Inset ? "mdc-list-divider--inset" : ""; 24 | _dividerClass = $"{divider} {inset}"; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Lists/MDCListItemContent.razor: -------------------------------------------------------------------------------- 1 | @using Microsoft.AspNetCore.Components; 2 | @inherits BlazorMaterialComponent 3 | 4 | 5 | @PrimaryText 6 | @if (!string.IsNullOrWhiteSpace(SecondaryText)) 7 | { 8 | @SecondaryText 9 | } 10 | 11 | 12 | @functions{ 13 | [Parameter] 14 | private string PrimaryText { get; set; } 15 | [Parameter] 16 | private string SecondaryText { get; set; } 17 | } 18 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Lists/MDCListItemGraphic.razor: -------------------------------------------------------------------------------- 1 | @using Microsoft.AspNetCore.Components; 2 | @inherits BlazorMaterialComponent 3 | 4 | 5 | @if (Type == MDCListItemGraphicType.Image) 6 | { 7 | @Alt 8 | } 9 | else 10 | { 11 | 12 | } 13 | 14 | 15 | @functions{ 16 | [Parameter] 17 | private MDCListItemGraphicType Type { get; set; } 18 | [Parameter] 19 | private string Graphic { get; set; } 20 | [Parameter] 21 | private string Width { get; set; } 22 | [Parameter] 23 | private string Height { get; set; } 24 | [Parameter] 25 | private string Alt { get; set; } 26 | } -------------------------------------------------------------------------------- /src/BlazorMaterial.Lists/MDCListItemMeta.razor: -------------------------------------------------------------------------------- 1 | @using Microsoft.AspNetCore.Components; 2 | @inherits BlazorMaterialComponent 3 | 4 | @switch (Type) 5 | { 6 | case MDCListItemMetaType.Default: 7 |
    8 | @ChildContent 9 |
    10 | break; 11 | case MDCListItemMetaType.Icon: 12 | 15 | @Source 16 | 17 | break; 18 | case MDCListItemMetaType.Image: 19 | 22 | 23 | 24 | break; 25 | } 26 | 27 | @functions 28 | { 29 | [Parameter] 30 | private MDCListItemMetaType Type { get; set; } 31 | [Parameter] 32 | private string Title { get; set; } 33 | [Parameter] 34 | private string Source { get; set; } 35 | [Parameter] 36 | private string HRef { get; set; } 37 | [Parameter] 38 | private EventCallback OnClick { get; set; } 39 | [Parameter] 40 | private RenderFragment ChildContent { get; set; } 41 | } -------------------------------------------------------------------------------- /src/BlazorMaterial.Lists/content/mdc.list.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Material Components for the Web 3 | Copyright (c) 2018 Google Inc. 4 | License: Apache-2.0 5 | */ 6 | @-webkit-keyframes mdc-ripple-fg-radius-in { 7 | from { 8 | -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 9 | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 10 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); 11 | transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); } 12 | to { 13 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); 14 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } } 15 | 16 | @keyframes mdc-ripple-fg-radius-in { 17 | from { 18 | -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 19 | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 20 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); 21 | transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); } 22 | to { 23 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); 24 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } } 25 | 26 | @-webkit-keyframes mdc-ripple-fg-opacity-in { 27 | from { 28 | -webkit-animation-timing-function: linear; 29 | animation-timing-function: linear; 30 | opacity: 0; } 31 | to { 32 | opacity: var(--mdc-ripple-fg-opacity, 0); } } 33 | 34 | @keyframes mdc-ripple-fg-opacity-in { 35 | from { 36 | -webkit-animation-timing-function: linear; 37 | animation-timing-function: linear; 38 | opacity: 0; } 39 | to { 40 | opacity: var(--mdc-ripple-fg-opacity, 0); } } 41 | 42 | @-webkit-keyframes mdc-ripple-fg-opacity-out { 43 | from { 44 | -webkit-animation-timing-function: linear; 45 | animation-timing-function: linear; 46 | opacity: var(--mdc-ripple-fg-opacity, 0); } 47 | to { 48 | opacity: 0; } } 49 | 50 | @keyframes mdc-ripple-fg-opacity-out { 51 | from { 52 | -webkit-animation-timing-function: linear; 53 | animation-timing-function: linear; 54 | opacity: var(--mdc-ripple-fg-opacity, 0); } 55 | to { 56 | opacity: 0; } } 57 | 58 | .mdc-ripple-surface--test-edge-var-bug { 59 | --mdc-ripple-surface-test-edge-var: 1px solid #000; 60 | visibility: hidden; } 61 | .mdc-ripple-surface--test-edge-var-bug::before { 62 | border: var(--mdc-ripple-surface-test-edge-var); } 63 | 64 | .mdc-list { 65 | font-family: Roboto, sans-serif; 66 | -moz-osx-font-smoothing: grayscale; 67 | -webkit-font-smoothing: antialiased; 68 | font-size: 1rem; 69 | line-height: 1.75rem; 70 | font-weight: 400; 71 | letter-spacing: 0.00937em; 72 | text-decoration: inherit; 73 | text-transform: inherit; 74 | color: rgba(0, 0, 0, 0.87); 75 | /* @alternate */ 76 | color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87)); 77 | margin: 0; 78 | padding: 8px 0; 79 | /* @alternate */ 80 | line-height: 1.5rem; 81 | list-style-type: none; } 82 | 83 | .mdc-list-item__secondary-text { 84 | color: rgba(0, 0, 0, 0.54); 85 | /* @alternate */ 86 | color: var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54)); } 87 | 88 | .mdc-list-item__graphic { 89 | background-color: transparent; } 90 | 91 | .mdc-list-item__graphic { 92 | color: rgba(0, 0, 0, 0.38); 93 | /* @alternate */ 94 | color: var(--mdc-theme-text-icon-on-background, rgba(0, 0, 0, 0.38)); } 95 | 96 | .mdc-list-item__meta { 97 | color: rgba(0, 0, 0, 0.38); 98 | /* @alternate */ 99 | color: var(--mdc-theme-text-hint-on-background, rgba(0, 0, 0, 0.38)); } 100 | 101 | .mdc-list--dense { 102 | padding-top: 4px; 103 | padding-bottom: 4px; 104 | font-size: .812rem; } 105 | 106 | .mdc-list-item { 107 | display: flex; 108 | position: relative; 109 | align-items: center; 110 | justify-content: flex-start; 111 | height: 48px; 112 | padding: 0 16px; 113 | overflow: hidden; } 114 | .mdc-list-item:focus { 115 | outline: none; } 116 | 117 | .mdc-list-item--selected, 118 | .mdc-list-item--activated { 119 | color: #6200ee; 120 | /* @alternate */ 121 | color: var(--mdc-theme-primary, #6200ee); } 122 | .mdc-list-item--selected .mdc-list-item__graphic, 123 | .mdc-list-item--activated .mdc-list-item__graphic { 124 | color: #6200ee; 125 | /* @alternate */ 126 | color: var(--mdc-theme-primary, #6200ee); } 127 | 128 | .mdc-list-item__graphic { 129 | /* @noflip */ 130 | margin-left: 0; 131 | /* @noflip */ 132 | margin-right: 32px; 133 | width: 24px; 134 | height: 24px; 135 | display: inline-flex; 136 | flex-shrink: 0; 137 | align-items: center; 138 | justify-content: center; } 139 | .mdc-list-item[dir="rtl"] .mdc-list-item__graphic, 140 | [dir="rtl"] .mdc-list-item .mdc-list-item__graphic { 141 | /* @noflip */ 142 | margin-left: 32px; 143 | /* @noflip */ 144 | margin-right: 0; } 145 | 146 | .mdc-list-item__meta { 147 | /* @noflip */ 148 | margin-left: auto; 149 | /* @noflip */ 150 | margin-right: 0; } 151 | .mdc-list-item[dir="rtl"] .mdc-list-item__meta, 152 | [dir="rtl"] .mdc-list-item .mdc-list-item__meta { 153 | /* @noflip */ 154 | margin-left: 0; 155 | /* @noflip */ 156 | margin-right: auto; } 157 | 158 | .mdc-list-item__text, 159 | .mdc-list-item__secondary-text { 160 | text-overflow: ellipsis; 161 | white-space: nowrap; 162 | overflow: hidden; 163 | display: block; } 164 | 165 | .mdc-list-item__secondary-text { 166 | font-family: Roboto, sans-serif; 167 | -moz-osx-font-smoothing: grayscale; 168 | -webkit-font-smoothing: antialiased; 169 | font-size: 0.875rem; 170 | line-height: 1.25rem; 171 | font-weight: 400; 172 | letter-spacing: 0.01786em; 173 | text-decoration: inherit; 174 | text-transform: inherit; } 175 | 176 | .mdc-list--dense .mdc-list-item__secondary-text { 177 | font-size: inherit; } 178 | 179 | .mdc-list--dense .mdc-list-item { 180 | height: 40px; } 181 | 182 | .mdc-list--dense .mdc-list-item__graphic { 183 | /* @noflip */ 184 | margin-left: 0; 185 | /* @noflip */ 186 | margin-right: 36px; 187 | width: 20px; 188 | height: 20px; } 189 | .mdc-list-item[dir="rtl"] .mdc-list--dense .mdc-list-item__graphic, 190 | [dir="rtl"] .mdc-list-item .mdc-list--dense .mdc-list-item__graphic { 191 | /* @noflip */ 192 | margin-left: 36px; 193 | /* @noflip */ 194 | margin-right: 0; } 195 | 196 | .mdc-list--avatar-list .mdc-list-item { 197 | height: 56px; } 198 | 199 | .mdc-list--avatar-list .mdc-list-item__graphic { 200 | /* @noflip */ 201 | margin-left: 0; 202 | /* @noflip */ 203 | margin-right: 16px; 204 | width: 40px; 205 | height: 40px; 206 | border-radius: 50%; } 207 | .mdc-list-item[dir="rtl"] .mdc-list--avatar-list .mdc-list-item__graphic, 208 | [dir="rtl"] .mdc-list-item .mdc-list--avatar-list .mdc-list-item__graphic { 209 | /* @noflip */ 210 | margin-left: 16px; 211 | /* @noflip */ 212 | margin-right: 0; } 213 | 214 | :not(.mdc-list--non-interactive) > .mdc-list-item { 215 | --mdc-ripple-fg-size: 0; 216 | --mdc-ripple-left: 0; 217 | --mdc-ripple-top: 0; 218 | --mdc-ripple-fg-scale: 1; 219 | --mdc-ripple-fg-translate-end: 0; 220 | --mdc-ripple-fg-translate-start: 0; 221 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 222 | will-change: transform, opacity; } 223 | :not(.mdc-list--non-interactive) > .mdc-list-item::before, :not(.mdc-list--non-interactive) > .mdc-list-item::after { 224 | position: absolute; 225 | border-radius: 50%; 226 | opacity: 0; 227 | pointer-events: none; 228 | content: ""; } 229 | :not(.mdc-list--non-interactive) > .mdc-list-item::before { 230 | transition: opacity 15ms linear; 231 | z-index: 1; } 232 | :not(.mdc-list--non-interactive) > .mdc-list-item.mdc-ripple-upgraded::before { 233 | -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1)); 234 | transform: scale(var(--mdc-ripple-fg-scale, 1)); } 235 | :not(.mdc-list--non-interactive) > .mdc-list-item.mdc-ripple-upgraded::after { 236 | top: 0; 237 | /* @noflip */ 238 | left: 0; 239 | -webkit-transform: scale(0); 240 | transform: scale(0); 241 | -webkit-transform-origin: center center; 242 | transform-origin: center center; } 243 | :not(.mdc-list--non-interactive) > .mdc-list-item.mdc-ripple-upgraded--unbounded::after { 244 | top: var(--mdc-ripple-top, 0); 245 | /* @noflip */ 246 | left: var(--mdc-ripple-left, 0); } 247 | :not(.mdc-list--non-interactive) > .mdc-list-item.mdc-ripple-upgraded--foreground-activation::after { 248 | -webkit-animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards; 249 | animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards; } 250 | :not(.mdc-list--non-interactive) > .mdc-list-item.mdc-ripple-upgraded--foreground-deactivation::after { 251 | -webkit-animation: 150ms mdc-ripple-fg-opacity-out; 252 | animation: 150ms mdc-ripple-fg-opacity-out; 253 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); 254 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } 255 | :not(.mdc-list--non-interactive) > .mdc-list-item::before, :not(.mdc-list--non-interactive) > .mdc-list-item::after { 256 | top: calc(50% - 100%); 257 | /* @noflip */ 258 | left: calc(50% - 100%); 259 | width: 200%; 260 | height: 200%; } 261 | :not(.mdc-list--non-interactive) > .mdc-list-item.mdc-ripple-upgraded::after { 262 | width: var(--mdc-ripple-fg-size, 100%); 263 | height: var(--mdc-ripple-fg-size, 100%); } 264 | :not(.mdc-list--non-interactive) > .mdc-list-item::before, :not(.mdc-list--non-interactive) > .mdc-list-item::after { 265 | background-color: black; } 266 | :not(.mdc-list--non-interactive) > .mdc-list-item:hover::before { 267 | opacity: 0.04; } 268 | :not(.mdc-list--non-interactive) > .mdc-list-item:not(.mdc-ripple-upgraded):focus::before, :not(.mdc-list--non-interactive) > .mdc-list-item.mdc-ripple-upgraded--background-focused::before { 269 | transition-duration: 75ms; 270 | opacity: 0.12; } 271 | :not(.mdc-list--non-interactive) > .mdc-list-item:not(.mdc-ripple-upgraded)::after { 272 | transition: opacity 150ms linear; } 273 | :not(.mdc-list--non-interactive) > .mdc-list-item:not(.mdc-ripple-upgraded):active::after { 274 | transition-duration: 75ms; 275 | opacity: 0.16; } 276 | :not(.mdc-list--non-interactive) > .mdc-list-item.mdc-ripple-upgraded { 277 | --mdc-ripple-fg-opacity: 0.16; } 278 | :not(.mdc-list--non-interactive) > .mdc-list-item--activated::before { 279 | opacity: 0.12; } 280 | :not(.mdc-list--non-interactive) > .mdc-list-item--activated::before, :not(.mdc-list--non-interactive) > .mdc-list-item--activated::after { 281 | background-color: #6200ee; } 282 | @supports not (-ms-ime-align: auto) { 283 | :not(.mdc-list--non-interactive) > .mdc-list-item--activated::before, :not(.mdc-list--non-interactive) > .mdc-list-item--activated::after { 284 | /* @alternate */ 285 | background-color: var(--mdc-theme-primary, #6200ee); } } 286 | :not(.mdc-list--non-interactive) > .mdc-list-item--activated:hover::before { 287 | opacity: 0.16; } 288 | :not(.mdc-list--non-interactive) > .mdc-list-item--activated:not(.mdc-ripple-upgraded):focus::before, :not(.mdc-list--non-interactive) > .mdc-list-item--activated.mdc-ripple-upgraded--background-focused::before { 289 | transition-duration: 75ms; 290 | opacity: 0.24; } 291 | :not(.mdc-list--non-interactive) > .mdc-list-item--activated:not(.mdc-ripple-upgraded)::after { 292 | transition: opacity 150ms linear; } 293 | :not(.mdc-list--non-interactive) > .mdc-list-item--activated:not(.mdc-ripple-upgraded):active::after { 294 | transition-duration: 75ms; 295 | opacity: 0.28; } 296 | :not(.mdc-list--non-interactive) > .mdc-list-item--activated.mdc-ripple-upgraded { 297 | --mdc-ripple-fg-opacity: 0.28; } 298 | :not(.mdc-list--non-interactive) > .mdc-list-item--selected::before { 299 | opacity: 0.08; } 300 | :not(.mdc-list--non-interactive) > .mdc-list-item--selected::before, :not(.mdc-list--non-interactive) > .mdc-list-item--selected::after { 301 | background-color: #6200ee; } 302 | @supports not (-ms-ime-align: auto) { 303 | :not(.mdc-list--non-interactive) > .mdc-list-item--selected::before, :not(.mdc-list--non-interactive) > .mdc-list-item--selected::after { 304 | /* @alternate */ 305 | background-color: var(--mdc-theme-primary, #6200ee); } } 306 | :not(.mdc-list--non-interactive) > .mdc-list-item--selected:hover::before { 307 | opacity: 0.12; } 308 | :not(.mdc-list--non-interactive) > .mdc-list-item--selected:not(.mdc-ripple-upgraded):focus::before, :not(.mdc-list--non-interactive) > .mdc-list-item--selected.mdc-ripple-upgraded--background-focused::before { 309 | transition-duration: 75ms; 310 | opacity: 0.2; } 311 | :not(.mdc-list--non-interactive) > .mdc-list-item--selected:not(.mdc-ripple-upgraded)::after { 312 | transition: opacity 150ms linear; } 313 | :not(.mdc-list--non-interactive) > .mdc-list-item--selected:not(.mdc-ripple-upgraded):active::after { 314 | transition-duration: 75ms; 315 | opacity: 0.24; } 316 | :not(.mdc-list--non-interactive) > .mdc-list-item--selected.mdc-ripple-upgraded { 317 | --mdc-ripple-fg-opacity: 0.24; } 318 | 319 | .mdc-list--two-line .mdc-list-item { 320 | height: 72px; } 321 | 322 | .mdc-list--two-line.mdc-list--dense .mdc-list-item { 323 | height: 60px; } 324 | 325 | .mdc-list--avatar-list.mdc-list--dense .mdc-list-item { 326 | height: 48px; } 327 | 328 | .mdc-list--avatar-list.mdc-list--dense .mdc-list-item__graphic { 329 | /* @noflip */ 330 | margin-left: 0; 331 | /* @noflip */ 332 | margin-right: 20px; 333 | width: 36px; 334 | height: 36px; } 335 | .mdc-list-item[dir="rtl"] .mdc-list--avatar-list.mdc-list--dense .mdc-list-item__graphic, 336 | [dir="rtl"] .mdc-list-item .mdc-list--avatar-list.mdc-list--dense .mdc-list-item__graphic { 337 | /* @noflip */ 338 | margin-left: 20px; 339 | /* @noflip */ 340 | margin-right: 0; } 341 | 342 | a.mdc-list-item { 343 | color: inherit; 344 | text-decoration: none; } 345 | 346 | .mdc-list-divider { 347 | height: 0; 348 | margin: 0; 349 | border: none; 350 | border-bottom-width: 1px; 351 | border-bottom-style: solid; } 352 | 353 | .mdc-list-divider { 354 | border-bottom-color: rgba(0, 0, 0, 0.12); } 355 | 356 | .mdc-list-divider--padded { 357 | margin: 0 16px; } 358 | 359 | .mdc-list-divider--inset { 360 | /* @noflip */ 361 | margin-left: 72px; 362 | /* @noflip */ 363 | margin-right: 0; 364 | width: calc(100% - 72px); } 365 | .mdc-list-group[dir="rtl"] .mdc-list-divider--inset, 366 | [dir="rtl"] .mdc-list-group .mdc-list-divider--inset { 367 | /* @noflip */ 368 | margin-left: 0; 369 | /* @noflip */ 370 | margin-right: 72px; } 371 | 372 | .mdc-list-divider--inset.mdc-list-divider--padded { 373 | width: calc(100% - 72px - 16px); } 374 | 375 | .mdc-list-group .mdc-list { 376 | padding: 0; } 377 | 378 | .mdc-list-group__subheader { 379 | font-family: Roboto, sans-serif; 380 | -moz-osx-font-smoothing: grayscale; 381 | -webkit-font-smoothing: antialiased; 382 | font-size: 1rem; 383 | line-height: 1.75rem; 384 | font-weight: 400; 385 | letter-spacing: 0.00937em; 386 | text-decoration: inherit; 387 | text-transform: inherit; 388 | margin: 0.75rem 16px; } 389 | 390 | .mdc-list-group__subheader { 391 | color: rgba(0, 0, 0, 0.87); 392 | /* @alternate */ 393 | color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87)); } 394 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Ripple/BlazorMaterial.Ripple.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | netstandard2.0 5 | true 6 | 7.3 7 | 3.0 8 | true 9 | BlazorMaterial 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Ripple/content/mdc.ripple.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Material Components for the Web 3 | Copyright (c) 2018 Google Inc. 4 | License: Apache-2.0 5 | */ 6 | @-webkit-keyframes mdc-ripple-fg-radius-in { 7 | from { 8 | -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 9 | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 10 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); 11 | transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); } 12 | to { 13 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); 14 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } } 15 | 16 | @keyframes mdc-ripple-fg-radius-in { 17 | from { 18 | -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 19 | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 20 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); 21 | transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); } 22 | to { 23 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); 24 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } } 25 | 26 | @-webkit-keyframes mdc-ripple-fg-opacity-in { 27 | from { 28 | -webkit-animation-timing-function: linear; 29 | animation-timing-function: linear; 30 | opacity: 0; } 31 | to { 32 | opacity: var(--mdc-ripple-fg-opacity, 0); } } 33 | 34 | @keyframes mdc-ripple-fg-opacity-in { 35 | from { 36 | -webkit-animation-timing-function: linear; 37 | animation-timing-function: linear; 38 | opacity: 0; } 39 | to { 40 | opacity: var(--mdc-ripple-fg-opacity, 0); } } 41 | 42 | @-webkit-keyframes mdc-ripple-fg-opacity-out { 43 | from { 44 | -webkit-animation-timing-function: linear; 45 | animation-timing-function: linear; 46 | opacity: var(--mdc-ripple-fg-opacity, 0); } 47 | to { 48 | opacity: 0; } } 49 | 50 | @keyframes mdc-ripple-fg-opacity-out { 51 | from { 52 | -webkit-animation-timing-function: linear; 53 | animation-timing-function: linear; 54 | opacity: var(--mdc-ripple-fg-opacity, 0); } 55 | to { 56 | opacity: 0; } } 57 | 58 | .mdc-ripple-surface--test-edge-var-bug { 59 | --mdc-ripple-surface-test-edge-var: 1px solid #000; 60 | visibility: hidden; } 61 | .mdc-ripple-surface--test-edge-var-bug::before { 62 | border: var(--mdc-ripple-surface-test-edge-var); } 63 | 64 | .mdc-ripple-surface { 65 | --mdc-ripple-fg-size: 0; 66 | --mdc-ripple-left: 0; 67 | --mdc-ripple-top: 0; 68 | --mdc-ripple-fg-scale: 1; 69 | --mdc-ripple-fg-translate-end: 0; 70 | --mdc-ripple-fg-translate-start: 0; 71 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 72 | will-change: transform, opacity; 73 | position: relative; 74 | outline: none; 75 | overflow: hidden; } 76 | .mdc-ripple-surface::before, .mdc-ripple-surface::after { 77 | position: absolute; 78 | border-radius: 50%; 79 | opacity: 0; 80 | pointer-events: none; 81 | content: ""; } 82 | .mdc-ripple-surface::before { 83 | transition: opacity 15ms linear; 84 | z-index: 1; } 85 | .mdc-ripple-surface.mdc-ripple-upgraded::before { 86 | -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1)); 87 | transform: scale(var(--mdc-ripple-fg-scale, 1)); } 88 | .mdc-ripple-surface.mdc-ripple-upgraded::after { 89 | top: 0; 90 | /* @noflip */ 91 | left: 0; 92 | -webkit-transform: scale(0); 93 | transform: scale(0); 94 | -webkit-transform-origin: center center; 95 | transform-origin: center center; } 96 | .mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after { 97 | top: var(--mdc-ripple-top, 0); 98 | /* @noflip */ 99 | left: var(--mdc-ripple-left, 0); } 100 | .mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after { 101 | -webkit-animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards; 102 | animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards; } 103 | .mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after { 104 | -webkit-animation: 150ms mdc-ripple-fg-opacity-out; 105 | animation: 150ms mdc-ripple-fg-opacity-out; 106 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); 107 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } 108 | .mdc-ripple-surface::before, .mdc-ripple-surface::after { 109 | background-color: black; } 110 | .mdc-ripple-surface:hover::before { 111 | opacity: 0.04; } 112 | .mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before, .mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before { 113 | transition-duration: 75ms; 114 | opacity: 0.12; } 115 | .mdc-ripple-surface:not(.mdc-ripple-upgraded)::after { 116 | transition: opacity 150ms linear; } 117 | .mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after { 118 | transition-duration: 75ms; 119 | opacity: 0.16; } 120 | .mdc-ripple-surface.mdc-ripple-upgraded { 121 | --mdc-ripple-fg-opacity: 0.16; } 122 | .mdc-ripple-surface::before, .mdc-ripple-surface::after { 123 | top: calc(50% - 100%); 124 | /* @noflip */ 125 | left: calc(50% - 100%); 126 | width: 200%; 127 | height: 200%; } 128 | .mdc-ripple-surface.mdc-ripple-upgraded::after { 129 | width: var(--mdc-ripple-fg-size, 100%); 130 | height: var(--mdc-ripple-fg-size, 100%); } 131 | .mdc-ripple-surface[data-mdc-ripple-is-unbounded] { 132 | overflow: visible; } 133 | .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after { 134 | top: calc(50% - 50%); 135 | /* @noflip */ 136 | left: calc(50% - 50%); 137 | width: 100%; 138 | height: 100%; } 139 | .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after { 140 | top: var(--mdc-ripple-top, calc(50% - 50%)); 141 | /* @noflip */ 142 | left: var(--mdc-ripple-left, calc(50% - 50%)); 143 | width: var(--mdc-ripple-fg-size, 100%); 144 | height: var(--mdc-ripple-fg-size, 100%); } 145 | .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after { 146 | width: var(--mdc-ripple-fg-size, 100%); 147 | height: var(--mdc-ripple-fg-size, 100%); } 148 | .mdc-ripple-surface--primary::before, .mdc-ripple-surface--primary::after { 149 | background-color: #6200ee; } 150 | @supports not (-ms-ime-align: auto) { 151 | .mdc-ripple-surface--primary::before, .mdc-ripple-surface--primary::after { 152 | /* @alternate */ 153 | background-color: var(--mdc-theme-primary, #6200ee); } } 154 | .mdc-ripple-surface--primary:hover::before { 155 | opacity: 0.04; } 156 | .mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):focus::before, .mdc-ripple-surface--primary.mdc-ripple-upgraded--background-focused::before { 157 | transition-duration: 75ms; 158 | opacity: 0.12; } 159 | .mdc-ripple-surface--primary:not(.mdc-ripple-upgraded)::after { 160 | transition: opacity 150ms linear; } 161 | .mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):active::after { 162 | transition-duration: 75ms; 163 | opacity: 0.16; } 164 | .mdc-ripple-surface--primary.mdc-ripple-upgraded { 165 | --mdc-ripple-fg-opacity: 0.16; } 166 | .mdc-ripple-surface--accent::before, .mdc-ripple-surface--accent::after { 167 | background-color: #018786; } 168 | @supports not (-ms-ime-align: auto) { 169 | .mdc-ripple-surface--accent::before, .mdc-ripple-surface--accent::after { 170 | /* @alternate */ 171 | background-color: var(--mdc-theme-secondary, #018786); } } 172 | .mdc-ripple-surface--accent:hover::before { 173 | opacity: 0.04; } 174 | .mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):focus::before, .mdc-ripple-surface--accent.mdc-ripple-upgraded--background-focused::before { 175 | transition-duration: 75ms; 176 | opacity: 0.12; } 177 | .mdc-ripple-surface--accent:not(.mdc-ripple-upgraded)::after { 178 | transition: opacity 150ms linear; } 179 | .mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):active::after { 180 | transition-duration: 75ms; 181 | opacity: 0.16; } 182 | .mdc-ripple-surface--accent.mdc-ripple-upgraded { 183 | --mdc-ripple-fg-opacity: 0.16; } 184 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Theme/BlazorMaterial.Theme.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | netstandard2.0 5 | true 6 | 7.3 7 | 3.0 8 | true 9 | BlazorMaterial 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Theme/content/mdc.theme.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Material Components for the Web 3 | Copyright (c) 2018 Google Inc. 4 | License: Apache-2.0 5 | */ 6 | :root { 7 | --mdc-theme-primary: #6200ee; 8 | --mdc-theme-secondary: #018786; 9 | --mdc-theme-background: #fff; 10 | --mdc-theme-surface: #fff; 11 | --mdc-theme-on-primary: #fff; 12 | --mdc-theme-on-secondary: #fff; 13 | --mdc-theme-on-surface: #000; 14 | --mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.87); 15 | --mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54); 16 | --mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38); 17 | --mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38); 18 | --mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38); 19 | --mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87); 20 | --mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54); 21 | --mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38); 22 | --mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38); 23 | --mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38); 24 | --mdc-theme-text-primary-on-dark: white; 25 | --mdc-theme-text-secondary-on-dark: rgba(255, 255, 255, 0.7); 26 | --mdc-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5); 27 | --mdc-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5); 28 | --mdc-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5); } 29 | 30 | .mdc-theme--primary { 31 | color: #6200ee !important; 32 | /* @alternate */ 33 | color: var(--mdc-theme-primary, #6200ee) !important; } 34 | 35 | .mdc-theme--secondary { 36 | color: #018786 !important; 37 | /* @alternate */ 38 | color: var(--mdc-theme-secondary, #018786) !important; } 39 | 40 | .mdc-theme--background { 41 | background-color: #fff; 42 | /* @alternate */ 43 | background-color: var(--mdc-theme-background, #fff); } 44 | 45 | .mdc-theme--surface { 46 | background-color: #fff; 47 | /* @alternate */ 48 | background-color: var(--mdc-theme-surface, #fff); } 49 | 50 | .mdc-theme--on-primary { 51 | color: #fff !important; 52 | /* @alternate */ 53 | color: var(--mdc-theme-on-primary, #fff) !important; } 54 | 55 | .mdc-theme--on-secondary { 56 | color: #fff !important; 57 | /* @alternate */ 58 | color: var(--mdc-theme-on-secondary, #fff) !important; } 59 | 60 | .mdc-theme--on-surface { 61 | color: #000 !important; 62 | /* @alternate */ 63 | color: var(--mdc-theme-on-surface, #000) !important; } 64 | 65 | .mdc-theme--text-primary-on-background { 66 | color: rgba(0, 0, 0, 0.87) !important; 67 | /* @alternate */ 68 | color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87)) !important; } 69 | 70 | .mdc-theme--text-secondary-on-background { 71 | color: rgba(0, 0, 0, 0.54) !important; 72 | /* @alternate */ 73 | color: var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54)) !important; } 74 | 75 | .mdc-theme--text-hint-on-background { 76 | color: rgba(0, 0, 0, 0.38) !important; 77 | /* @alternate */ 78 | color: var(--mdc-theme-text-hint-on-background, rgba(0, 0, 0, 0.38)) !important; } 79 | 80 | .mdc-theme--text-disabled-on-background { 81 | color: rgba(0, 0, 0, 0.38) !important; 82 | /* @alternate */ 83 | color: var(--mdc-theme-text-disabled-on-background, rgba(0, 0, 0, 0.38)) !important; } 84 | 85 | .mdc-theme--text-icon-on-background { 86 | color: rgba(0, 0, 0, 0.38) !important; 87 | /* @alternate */ 88 | color: var(--mdc-theme-text-icon-on-background, rgba(0, 0, 0, 0.38)) !important; } 89 | 90 | .mdc-theme--text-primary-on-light { 91 | color: rgba(0, 0, 0, 0.87) !important; 92 | /* @alternate */ 93 | color: var(--mdc-theme-text-primary-on-light, rgba(0, 0, 0, 0.87)) !important; } 94 | 95 | .mdc-theme--text-secondary-on-light { 96 | color: rgba(0, 0, 0, 0.54) !important; 97 | /* @alternate */ 98 | color: var(--mdc-theme-text-secondary-on-light, rgba(0, 0, 0, 0.54)) !important; } 99 | 100 | .mdc-theme--text-hint-on-light { 101 | color: rgba(0, 0, 0, 0.38) !important; 102 | /* @alternate */ 103 | color: var(--mdc-theme-text-hint-on-light, rgba(0, 0, 0, 0.38)) !important; } 104 | 105 | .mdc-theme--text-disabled-on-light { 106 | color: rgba(0, 0, 0, 0.38) !important; 107 | /* @alternate */ 108 | color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38)) !important; } 109 | 110 | .mdc-theme--text-icon-on-light { 111 | color: rgba(0, 0, 0, 0.38) !important; 112 | /* @alternate */ 113 | color: var(--mdc-theme-text-icon-on-light, rgba(0, 0, 0, 0.38)) !important; } 114 | 115 | .mdc-theme--text-primary-on-dark { 116 | color: white !important; 117 | /* @alternate */ 118 | color: var(--mdc-theme-text-primary-on-dark, white) !important; } 119 | 120 | .mdc-theme--text-secondary-on-dark { 121 | color: rgba(255, 255, 255, 0.7) !important; 122 | /* @alternate */ 123 | color: var(--mdc-theme-text-secondary-on-dark, rgba(255, 255, 255, 0.7)) !important; } 124 | 125 | .mdc-theme--text-hint-on-dark { 126 | color: rgba(255, 255, 255, 0.5) !important; 127 | /* @alternate */ 128 | color: var(--mdc-theme-text-hint-on-dark, rgba(255, 255, 255, 0.5)) !important; } 129 | 130 | .mdc-theme--text-disabled-on-dark { 131 | color: rgba(255, 255, 255, 0.5) !important; 132 | /* @alternate */ 133 | color: var(--mdc-theme-text-disabled-on-dark, rgba(255, 255, 255, 0.5)) !important; } 134 | 135 | .mdc-theme--text-icon-on-dark { 136 | color: rgba(255, 255, 255, 0.5) !important; 137 | /* @alternate */ 138 | color: var(--mdc-theme-text-icon-on-dark, rgba(255, 255, 255, 0.5)) !important; } 139 | 140 | .mdc-theme--primary-bg { 141 | background-color: #6200ee !important; 142 | /* @alternate */ 143 | background-color: var(--mdc-theme-primary, #6200ee) !important; } 144 | 145 | .mdc-theme--secondary-bg { 146 | background-color: #018786 !important; 147 | /* @alternate */ 148 | background-color: var(--mdc-theme-secondary, #018786) !important; } 149 | -------------------------------------------------------------------------------- /src/BlazorMaterial.TopAppBar/BlazorMaterial.TopAppBar.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | netstandard2.0 5 | true 6 | 7.3 7 | 3.0 8 | true 9 | BlazorMaterial 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/BlazorMaterial.TopAppBar/MDCTopAppBar.razor: -------------------------------------------------------------------------------- 1 | @inherits MDCTopAppBarComponent 2 | 3 |
    4 | @ChildContent 5 |
    -------------------------------------------------------------------------------- /src/BlazorMaterial.TopAppBar/MDCTopAppBarComponent.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | using System.Threading.Tasks; 3 | 4 | namespace BlazorMaterial 5 | { 6 | public class MDCTopAppBarComponent : BlazorMaterialComponent 7 | { 8 | private const string ATTACH_FUNCTION = "mdc.topAppBar.MDCTopAppBar.attachTo"; 9 | private static readonly ClassBuilder _classNameBuilder; 10 | 11 | [Parameter] 12 | protected MDCTopAppBarStyle Style { get; set; } 13 | 14 | [Parameter] 15 | protected RenderFragment ChildContent { get; set; } 16 | 17 | protected string ClassString { get; set; } 18 | 19 | protected ElementRef _MDCTopAppBar; 20 | private bool _isFirstRender = true; 21 | 22 | static MDCTopAppBarComponent() 23 | { 24 | _classNameBuilder = new ClassBuilder("mdc", "top-app-bar") 25 | .DefineClass((c) => GetStyle(c.Style), PrefixSeparators.Modifier); 26 | } 27 | 28 | private static string GetStyle(MDCTopAppBarStyle style) 29 | { 30 | switch (style) 31 | { 32 | case MDCTopAppBarStyle.Fixed: 33 | return "fixed"; 34 | case MDCTopAppBarStyle.Prominent: 35 | return "prominent"; 36 | case MDCTopAppBarStyle.Short: 37 | return "short"; 38 | case MDCTopAppBarStyle.ShortCollapsed: 39 | return "short-collapsed"; 40 | default: 41 | return string.Empty; 42 | } 43 | } 44 | 45 | protected override void OnInit() 46 | { 47 | this.ClassString = _classNameBuilder.Build(this, this.Class); 48 | } 49 | 50 | protected override async Task OnAfterRenderAsync() 51 | { 52 | if (this._isFirstRender) 53 | { 54 | this._isFirstRender = false; 55 | await this.JSRuntime.InvokeAsync(ATTACH_FUNCTION, this._MDCTopAppBar); 56 | } 57 | } 58 | } 59 | } -------------------------------------------------------------------------------- /src/BlazorMaterial.TopAppBar/MDCTopAppBarIcon.razor: -------------------------------------------------------------------------------- 1 | @using Microsoft.AspNetCore.Components; 2 | @inherits BlazorMaterialComponent 3 | 4 | 5 | 6 | @functions{ 7 | [Parameter] 8 | private string Icon { get; set; } 9 | [Parameter] 10 | private Action OnClick { get; set; } 11 | } -------------------------------------------------------------------------------- /src/BlazorMaterial.TopAppBar/MDCTopAppBarRow.razor: -------------------------------------------------------------------------------- 1 | @using Microsoft.AspNetCore.Components; 2 | @inherits BlazorMaterialComponent 3 | 4 |
    5 | @ChildContent 6 |
    7 | 8 | @functions { 9 | [Parameter] 10 | private RenderFragment ChildContent { get; set; } 11 | } 12 | -------------------------------------------------------------------------------- /src/BlazorMaterial.TopAppBar/MDCTopAppBarSection.razor: -------------------------------------------------------------------------------- 1 | @inherits MDCTopAppBarSectionComponent 2 | 3 |
    4 | @if (!string.IsNullOrWhiteSpace(Icon)) 5 | { 6 | @if (Icon.StartsWith("/")) 7 | { 8 | 9 | 10 | 11 | } 12 | else 13 | { 14 | 15 | } 16 | } 17 | @if (!string.IsNullOrWhiteSpace(Title)) 18 | { 19 | @Title 20 | } 21 | @ChildContent 22 |
    23 | -------------------------------------------------------------------------------- /src/BlazorMaterial.TopAppBar/MDCTopAppBarSectionComponent.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | using System; 3 | 4 | namespace BlazorMaterial 5 | { 6 | public class MDCTopAppBarSectionComponent : BlazorMaterialComponent 7 | { 8 | private static readonly ClassBuilder _classNameBuilder; 9 | 10 | [Parameter] 11 | protected MDCTopAppBarSectionAlignment Alignment { get; set; } 12 | [Parameter] 13 | protected RenderFragment ChildContent { get; set; } 14 | [Parameter] 15 | protected bool ShrinkToFit { get; set; } 16 | [Parameter] 17 | protected string Icon { get; set; } 18 | [Parameter] 19 | protected string Title { get; set; } 20 | [Parameter] 21 | protected EventCallback OnIconClick { get; set; } 22 | 23 | protected string ClassString { get; set; } 24 | 25 | static MDCTopAppBarSectionComponent() 26 | { 27 | _classNameBuilder = new ClassBuilder("mdc", "top-app-bar__section") 28 | .DefineClass("shrink-to-fit", c => c.ShrinkToFit, PrefixSeparators.Modifier) 29 | .DefineClass(c => $"align-{c.Alignment.ToString().ToLowerInvariant()}", PrefixSeparators.Modifier); 30 | } 31 | 32 | protected override void OnInit() 33 | { 34 | this.ClassString = _classNameBuilder.Build(this, this.Class); 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/BlazorMaterial.TopAppBar/TopAppBarEnums.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorMaterial 2 | { 3 | public enum MDCTopAppBarStyle 4 | { 5 | Fixed, 6 | Prominent, 7 | Short, 8 | ShortCollapsed 9 | } 10 | public enum MDCTopAppBarSectionAlignment 11 | { 12 | Start, 13 | End 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/BlazorMaterial.TopAppBar/content/mdc.top-app-bar.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Material Components for the Web 3 | Copyright (c) 2018 Google Inc. 4 | License: Apache-2.0 5 | */ 6 | .mdc-top-app-bar { 7 | background-color: #6200ee; 8 | /* @alternate */ 9 | background-color: var(--mdc-theme-primary, #6200ee); 10 | color: white; 11 | display: flex; 12 | position: fixed; 13 | flex-direction: column; 14 | justify-content: space-between; 15 | box-sizing: border-box; 16 | width: 100%; } 17 | .mdc-top-app-bar .mdc-top-app-bar__action-item, 18 | .mdc-top-app-bar .mdc-top-app-bar__navigation-icon { 19 | color: #fff; 20 | /* @alternate */ 21 | color: var(--mdc-theme-on-primary, #fff); } 22 | .mdc-top-app-bar .mdc-top-app-bar__action-item::before, .mdc-top-app-bar .mdc-top-app-bar__action-item::after, 23 | .mdc-top-app-bar .mdc-top-app-bar__navigation-icon::before, 24 | .mdc-top-app-bar .mdc-top-app-bar__navigation-icon::after { 25 | background-color: #fff; } 26 | @supports not (-ms-ime-align: auto) { 27 | .mdc-top-app-bar .mdc-top-app-bar__action-item::before, .mdc-top-app-bar .mdc-top-app-bar__action-item::after, 28 | .mdc-top-app-bar .mdc-top-app-bar__navigation-icon::before, 29 | .mdc-top-app-bar .mdc-top-app-bar__navigation-icon::after { 30 | /* @alternate */ 31 | background-color: var(--mdc-theme-on-primary, #fff); } } 32 | .mdc-top-app-bar .mdc-top-app-bar__action-item:hover::before, 33 | .mdc-top-app-bar .mdc-top-app-bar__navigation-icon:hover::before { 34 | opacity: 0.08; } 35 | .mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded):focus::before, .mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-upgraded--background-focused::before, 36 | .mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded):focus::before, 37 | .mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded--background-focused::before { 38 | transition-duration: 75ms; 39 | opacity: 0.24; } 40 | .mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded)::after, 41 | .mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded)::after { 42 | transition: opacity 150ms linear; } 43 | .mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded):active::after, 44 | .mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded):active::after { 45 | transition-duration: 75ms; 46 | opacity: 0.32; } 47 | .mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-upgraded, 48 | .mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded { 49 | --mdc-ripple-fg-opacity: 0.32; } 50 | .mdc-top-app-bar__row { 51 | display: flex; 52 | position: relative; 53 | box-sizing: border-box; 54 | width: 100%; 55 | height: 64px; } 56 | .mdc-top-app-bar__section { 57 | display: inline-flex; 58 | flex: 1 1 auto; 59 | align-items: center; 60 | min-width: 0; 61 | padding: 8px 12px; 62 | z-index: 1; } 63 | .mdc-top-app-bar__section--align-start { 64 | justify-content: flex-start; 65 | order: -1; } 66 | .mdc-top-app-bar__section--align-end { 67 | justify-content: flex-end; 68 | order: 1; } 69 | .mdc-top-app-bar__title { 70 | font-family: Roboto, sans-serif; 71 | -moz-osx-font-smoothing: grayscale; 72 | -webkit-font-smoothing: antialiased; 73 | font-size: 1.25rem; 74 | line-height: 2rem; 75 | font-weight: 500; 76 | letter-spacing: 0.0125em; 77 | text-decoration: inherit; 78 | text-transform: inherit; 79 | /* @noflip */ 80 | padding-left: 20px; 81 | /* @noflip */ 82 | padding-right: 0; 83 | text-overflow: ellipsis; 84 | white-space: nowrap; 85 | overflow: hidden; 86 | z-index: 1; } 87 | [dir="rtl"] .mdc-top-app-bar__title, .mdc-top-app-bar__title[dir="rtl"] { 88 | /* @noflip */ 89 | padding-left: 0; 90 | /* @noflip */ 91 | padding-right: 20px; } 92 | .mdc-top-app-bar__action-item, .mdc-top-app-bar__navigation-icon { 93 | --mdc-ripple-fg-size: 0; 94 | --mdc-ripple-left: 0; 95 | --mdc-ripple-top: 0; 96 | --mdc-ripple-fg-scale: 1; 97 | --mdc-ripple-fg-translate-end: 0; 98 | --mdc-ripple-fg-translate-start: 0; 99 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 100 | will-change: transform, opacity; 101 | display: flex; 102 | position: relative; 103 | flex-shrink: 0; 104 | align-items: center; 105 | justify-content: center; 106 | box-sizing: border-box; 107 | width: 48px; 108 | height: 48px; 109 | padding: 12px; 110 | border: none; 111 | outline: none; 112 | background-color: transparent; 113 | fill: currentColor; 114 | color: inherit; 115 | text-decoration: none; 116 | cursor: pointer; } 117 | .mdc-top-app-bar__action-item::before, .mdc-top-app-bar__action-item::after, .mdc-top-app-bar__navigation-icon::before, .mdc-top-app-bar__navigation-icon::after { 118 | position: absolute; 119 | border-radius: 50%; 120 | opacity: 0; 121 | pointer-events: none; 122 | content: ""; } 123 | .mdc-top-app-bar__action-item::before, .mdc-top-app-bar__navigation-icon::before { 124 | transition: opacity 15ms linear; 125 | z-index: 1; } 126 | .mdc-top-app-bar__action-item.mdc-ripple-upgraded::before, .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded::before { 127 | -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1)); 128 | transform: scale(var(--mdc-ripple-fg-scale, 1)); } 129 | .mdc-top-app-bar__action-item.mdc-ripple-upgraded::after, .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded::after { 130 | top: 0; 131 | /* @noflip */ 132 | left: 0; 133 | -webkit-transform: scale(0); 134 | transform: scale(0); 135 | -webkit-transform-origin: center center; 136 | transform-origin: center center; } 137 | .mdc-top-app-bar__action-item.mdc-ripple-upgraded--unbounded::after, .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded--unbounded::after { 138 | top: var(--mdc-ripple-top, 0); 139 | /* @noflip */ 140 | left: var(--mdc-ripple-left, 0); } 141 | .mdc-top-app-bar__action-item.mdc-ripple-upgraded--foreground-activation::after, .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded--foreground-activation::after { 142 | -webkit-animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards; 143 | animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards; } 144 | .mdc-top-app-bar__action-item.mdc-ripple-upgraded--foreground-deactivation::after, .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded--foreground-deactivation::after { 145 | -webkit-animation: 150ms mdc-ripple-fg-opacity-out; 146 | animation: 150ms mdc-ripple-fg-opacity-out; 147 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); 148 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); } 149 | .mdc-top-app-bar__action-item::before, .mdc-top-app-bar__action-item::after, .mdc-top-app-bar__navigation-icon::before, .mdc-top-app-bar__navigation-icon::after { 150 | top: calc(50% - 50%); 151 | /* @noflip */ 152 | left: calc(50% - 50%); 153 | width: 100%; 154 | height: 100%; } 155 | .mdc-top-app-bar__action-item.mdc-ripple-upgraded::before, .mdc-top-app-bar__action-item.mdc-ripple-upgraded::after, .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded::before, .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded::after { 156 | top: var(--mdc-ripple-top, calc(50% - 50%)); 157 | /* @noflip */ 158 | left: var(--mdc-ripple-left, calc(50% - 50%)); 159 | width: var(--mdc-ripple-fg-size, 100%); 160 | height: var(--mdc-ripple-fg-size, 100%); } 161 | .mdc-top-app-bar__action-item.mdc-ripple-upgraded::after, .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded::after { 162 | width: var(--mdc-ripple-fg-size, 100%); 163 | height: var(--mdc-ripple-fg-size, 100%); } 164 | 165 | .mdc-top-app-bar--short { 166 | position: fixed; 167 | top: 0; 168 | right: auto; 169 | left: 0; 170 | width: 100%; 171 | transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1); 172 | z-index: 4; } 173 | [dir="rtl"] .mdc-top-app-bar--short, .mdc-top-app-bar--short[dir="rtl"] { 174 | right: 0; 175 | left: auto; } 176 | .mdc-top-app-bar--short .mdc-top-app-bar__row { 177 | height: 56px; } 178 | .mdc-top-app-bar--short .mdc-top-app-bar__section { 179 | padding: 4px; } 180 | .mdc-top-app-bar--short .mdc-top-app-bar__title { 181 | transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1); 182 | opacity: 1; } 183 | 184 | .mdc-top-app-bar--short-collapsed { 185 | /* @noflip */ 186 | border-bottom-left-radius: 0; 187 | /* @noflip */ 188 | border-bottom-right-radius: 4px; 189 | box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); 190 | width: 56px; 191 | transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1); } 192 | [dir="rtl"] .mdc-top-app-bar--short-collapsed, .mdc-top-app-bar--short-collapsed[dir="rtl"] { 193 | /* @noflip */ 194 | border-bottom-left-radius: 4px; 195 | /* @noflip */ 196 | border-bottom-right-radius: 0; } 197 | .mdc-top-app-bar--short-collapsed .mdc-top-app-bar__title { 198 | display: none; } 199 | .mdc-top-app-bar--short-collapsed .mdc-top-app-bar__action-item { 200 | transition: padding 150ms cubic-bezier(0.4, 0, 0.2, 1); } 201 | 202 | .mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item { 203 | width: 112px; } 204 | .mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end { 205 | /* @noflip */ 206 | padding-left: 0; 207 | /* @noflip */ 208 | padding-right: 12px; } 209 | [dir="rtl"] .mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end, .mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end[dir="rtl"] { 210 | /* @noflip */ 211 | padding-left: 12px; 212 | /* @noflip */ 213 | padding-right: 0; } 214 | 215 | .mdc-top-app-bar--dense .mdc-top-app-bar__row { 216 | height: 48px; } 217 | 218 | .mdc-top-app-bar--dense .mdc-top-app-bar__section { 219 | padding: 0 4px; } 220 | 221 | .mdc-top-app-bar--dense .mdc-top-app-bar__title { 222 | /* @noflip */ 223 | padding-left: 12px; 224 | /* @noflip */ 225 | padding-right: 0; } 226 | [dir="rtl"] .mdc-top-app-bar--dense .mdc-top-app-bar__title, .mdc-top-app-bar--dense .mdc-top-app-bar__title[dir="rtl"] { 227 | /* @noflip */ 228 | padding-left: 0; 229 | /* @noflip */ 230 | padding-right: 12px; } 231 | 232 | .mdc-top-app-bar--prominent .mdc-top-app-bar__row { 233 | height: 128px; } 234 | 235 | .mdc-top-app-bar--prominent .mdc-top-app-bar__title { 236 | align-self: flex-end; 237 | padding-bottom: 2px; } 238 | 239 | .mdc-top-app-bar--prominent .mdc-top-app-bar__action-item, 240 | .mdc-top-app-bar--prominent .mdc-top-app-bar__navigation-icon { 241 | align-self: flex-start; } 242 | 243 | .mdc-top-app-bar--fixed { 244 | position: fixed; 245 | transition: box-shadow 200ms linear; } 246 | 247 | .mdc-top-app-bar--fixed-scrolled { 248 | box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); 249 | transition: box-shadow 200ms linear; } 250 | 251 | .mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__row { 252 | height: 96px; } 253 | 254 | .mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__section { 255 | padding: 0 12px; } 256 | 257 | .mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title { 258 | /* @noflip */ 259 | padding-left: 20px; 260 | /* @noflip */ 261 | padding-right: 0; 262 | padding-bottom: 9px; } 263 | [dir="rtl"] .mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title, .mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title[dir="rtl"] { 264 | /* @noflip */ 265 | padding-left: 0; 266 | /* @noflip */ 267 | padding-right: 20px; } 268 | 269 | .mdc-top-app-bar--fixed-adjust { 270 | padding-top: 64px; } 271 | 272 | .mdc-top-app-bar--dense-fixed-adjust { 273 | padding-top: 48px; } 274 | 275 | .mdc-top-app-bar--short-fixed-adjust { 276 | padding-top: 56px; } 277 | 278 | .mdc-top-app-bar--prominent-fixed-adjust { 279 | padding-top: 128px; } 280 | 281 | .mdc-top-app-bar--dense-prominent-fixed-adjust { 282 | padding-top: 96px; } 283 | 284 | @media (max-width: 599px) { 285 | .mdc-top-app-bar__row { 286 | height: 56px; } 287 | .mdc-top-app-bar__section { 288 | padding: 4px; } 289 | .mdc-top-app-bar--short { 290 | transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1); } 291 | .mdc-top-app-bar--short-collapsed { 292 | transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1); } 293 | .mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end { 294 | /* @noflip */ 295 | padding-left: 0; 296 | /* @noflip */ 297 | padding-right: 12px; } 298 | [dir="rtl"] .mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end, .mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end[dir="rtl"] { 299 | /* @noflip */ 300 | padding-left: 12px; 301 | /* @noflip */ 302 | padding-right: 0; } 303 | .mdc-top-app-bar--prominent .mdc-top-app-bar__title { 304 | padding-bottom: 6px; } 305 | .mdc-top-app-bar--fixed-adjust { 306 | margin-top: 56px; } } 307 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Typography/BlazorMaterial.Typography.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | netstandard2.0 5 | true 6 | 7.3 7 | 3.0 8 | true 9 | BlazorMaterial 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/BlazorMaterial.Typography/content/mdc.typography.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Material Components for the Web 3 | Copyright (c) 2018 Google Inc. 4 | License: Apache-2.0 5 | */ 6 | .mdc-typography { 7 | font-family: Roboto, sans-serif; 8 | -moz-osx-font-smoothing: grayscale; 9 | -webkit-font-smoothing: antialiased; } 10 | 11 | .mdc-typography--headline1 { 12 | font-family: Roboto, sans-serif; 13 | -moz-osx-font-smoothing: grayscale; 14 | -webkit-font-smoothing: antialiased; 15 | font-size: 6rem; 16 | line-height: 6rem; 17 | font-weight: 300; 18 | letter-spacing: -0.01563em; 19 | text-decoration: inherit; 20 | text-transform: inherit; } 21 | 22 | .mdc-typography--headline2 { 23 | font-family: Roboto, sans-serif; 24 | -moz-osx-font-smoothing: grayscale; 25 | -webkit-font-smoothing: antialiased; 26 | font-size: 3.75rem; 27 | line-height: 3.75rem; 28 | font-weight: 300; 29 | letter-spacing: -0.00833em; 30 | text-decoration: inherit; 31 | text-transform: inherit; } 32 | 33 | .mdc-typography--headline3 { 34 | font-family: Roboto, sans-serif; 35 | -moz-osx-font-smoothing: grayscale; 36 | -webkit-font-smoothing: antialiased; 37 | font-size: 3rem; 38 | line-height: 3.125rem; 39 | font-weight: 400; 40 | letter-spacing: normal; 41 | text-decoration: inherit; 42 | text-transform: inherit; } 43 | 44 | .mdc-typography--headline4 { 45 | font-family: Roboto, sans-serif; 46 | -moz-osx-font-smoothing: grayscale; 47 | -webkit-font-smoothing: antialiased; 48 | font-size: 2.125rem; 49 | line-height: 2.5rem; 50 | font-weight: 400; 51 | letter-spacing: 0.00735em; 52 | text-decoration: inherit; 53 | text-transform: inherit; } 54 | 55 | .mdc-typography--headline5 { 56 | font-family: Roboto, sans-serif; 57 | -moz-osx-font-smoothing: grayscale; 58 | -webkit-font-smoothing: antialiased; 59 | font-size: 1.5rem; 60 | line-height: 2rem; 61 | font-weight: 400; 62 | letter-spacing: normal; 63 | text-decoration: inherit; 64 | text-transform: inherit; } 65 | 66 | .mdc-typography--headline6 { 67 | font-family: Roboto, sans-serif; 68 | -moz-osx-font-smoothing: grayscale; 69 | -webkit-font-smoothing: antialiased; 70 | font-size: 1.25rem; 71 | line-height: 2rem; 72 | font-weight: 500; 73 | letter-spacing: 0.0125em; 74 | text-decoration: inherit; 75 | text-transform: inherit; } 76 | 77 | .mdc-typography--subtitle1 { 78 | font-family: Roboto, sans-serif; 79 | -moz-osx-font-smoothing: grayscale; 80 | -webkit-font-smoothing: antialiased; 81 | font-size: 1rem; 82 | line-height: 1.75rem; 83 | font-weight: 400; 84 | letter-spacing: 0.00937em; 85 | text-decoration: inherit; 86 | text-transform: inherit; } 87 | 88 | .mdc-typography--subtitle2 { 89 | font-family: Roboto, sans-serif; 90 | -moz-osx-font-smoothing: grayscale; 91 | -webkit-font-smoothing: antialiased; 92 | font-size: 0.875rem; 93 | line-height: 1.375rem; 94 | font-weight: 500; 95 | letter-spacing: 0.00714em; 96 | text-decoration: inherit; 97 | text-transform: inherit; } 98 | 99 | .mdc-typography--body1 { 100 | font-family: Roboto, sans-serif; 101 | -moz-osx-font-smoothing: grayscale; 102 | -webkit-font-smoothing: antialiased; 103 | font-size: 1rem; 104 | line-height: 1.5rem; 105 | font-weight: 400; 106 | letter-spacing: 0.03125em; 107 | text-decoration: inherit; 108 | text-transform: inherit; } 109 | 110 | .mdc-typography--body2 { 111 | font-family: Roboto, sans-serif; 112 | -moz-osx-font-smoothing: grayscale; 113 | -webkit-font-smoothing: antialiased; 114 | font-size: 0.875rem; 115 | line-height: 1.25rem; 116 | font-weight: 400; 117 | letter-spacing: 0.01786em; 118 | text-decoration: inherit; 119 | text-transform: inherit; } 120 | 121 | .mdc-typography--caption { 122 | font-family: Roboto, sans-serif; 123 | -moz-osx-font-smoothing: grayscale; 124 | -webkit-font-smoothing: antialiased; 125 | font-size: 0.75rem; 126 | line-height: 1.25rem; 127 | font-weight: 400; 128 | letter-spacing: 0.03333em; 129 | text-decoration: inherit; 130 | text-transform: inherit; } 131 | 132 | .mdc-typography--button { 133 | font-family: Roboto, sans-serif; 134 | -moz-osx-font-smoothing: grayscale; 135 | -webkit-font-smoothing: antialiased; 136 | font-size: 0.875rem; 137 | line-height: 2.25rem; 138 | font-weight: 500; 139 | letter-spacing: 0.08929em; 140 | text-decoration: none; 141 | text-transform: uppercase; } 142 | 143 | .mdc-typography--overline { 144 | font-family: Roboto, sans-serif; 145 | -moz-osx-font-smoothing: grayscale; 146 | -webkit-font-smoothing: antialiased; 147 | font-size: 0.75rem; 148 | line-height: 2rem; 149 | font-weight: 500; 150 | letter-spacing: 0.16667em; 151 | text-decoration: none; 152 | text-transform: uppercase; } 153 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/App.razor: -------------------------------------------------------------------------------- 1 |  5 | 6 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/AppState.cs: -------------------------------------------------------------------------------- 1 | namespace BlazorMaterial.Test 2 | { 3 | public class AppState 4 | { 5 | public string ToolbarIcon { get; set; } 6 | public string Title { get; set; } 7 | public bool ShowTopAppBar { get; set; } = true; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/BlazorMaterial.Test.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | netstandard2.0 5 | 7.3 6 | 3.0 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/Pages/ButtonsDemo.razor: -------------------------------------------------------------------------------- 1 | @page "/button" 2 | @inject AppState AppState 3 | 4 | 52 | 53 |
    54 | 55 | Flat 56 | 57 | 58 | Raised 59 | 60 | Note: "secondary" was previously called "accent" in the Material spec. 61 |
    62 | 63 |
    64 |

    Ripple Enabled

    65 |
    66 | Text Button 67 |
    68 | 69 | Baseline 70 | 71 | 72 | Dense 73 | 74 | 75 | Secondary -- FIX ME! 76 | 77 | 78 | Icon 79 | 80 | 81 | 85 | SVG Icon -- FIX ME! 86 | 87 | 88 | Link 89 | 90 |
    91 |
    92 | 93 |
    94 | Raised Button 95 |
    96 | 97 | Baseline 98 | 99 | 100 | Dense 101 | 102 | 103 | Secondary -- FIX ME! 104 | 105 | 106 | Icon 107 | 108 | 109 | 113 | SVG Icon -- FIX ME! 114 | 115 | 116 | Link 117 | 118 |
    119 |
    120 | 121 |
    122 | Unelevated Button (Experimental) 123 |
    124 | 125 | Baseline 126 | 127 | 128 | Dense 129 | 130 | 131 | Secondary -- FIX ME! 132 | 133 | 134 | Icon 135 | 136 | 137 | 141 | SVG Icon -- FIX ME! 142 | 143 | 144 | Link 145 | 146 |
    147 |
    148 | 149 |
    150 | Outlined Button (Experimental) 151 |
    152 | 153 | Baseline 154 | 155 | 156 | Dense 157 | 158 | 159 | Secondary -- FIX ME! 160 | 161 | 162 | Icon 163 | 164 | 165 | 169 | SVG Icon -- FIX ME! 170 | 171 | 172 | Link 173 | 174 |
    175 |
    176 |
    177 | 178 | @functions{ 179 | protected override void OnInit() 180 | { 181 | AppState.Title = "Buttons"; 182 | AppState.ToolbarIcon = "arrow_back"; 183 | } 184 | } -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/Pages/DrawerDemo.razor: -------------------------------------------------------------------------------- 1 | @page "/drawer" 2 | @inject AppState AppState 3 | @implements IDisposable 4 | 5 | 6 | 7 | 8 | 9 | Inbox 10 | Star 11 | 12 | 13 | 14 | 15 | @functions{ 16 | 17 | protected override void OnInit() 18 | { 19 | AppState.Title = "Drawer"; 20 | AppState.ToolbarIcon = "arrow_back"; 21 | AppState.ShowTopAppBar = false; 22 | } 23 | 24 | public void Dispose() 25 | { 26 | AppState.ShowTopAppBar = true; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/Pages/Index.razor: -------------------------------------------------------------------------------- 1 | @page "/" 2 | @inject AppState AppState 3 | @inject IUriHelper UriHelper 4 | 5 | 6 | UriHelper.NavigateTo("/button"))> 7 | 8 | 9 | 10 | UriHelper.NavigateTo("/list"))> 11 | 12 | 13 | 14 | UriHelper.NavigateTo("/drawer"))> 15 | 16 | 17 | 18 | 19 | 20 | @functions{ 21 | protected override void OnInit() 22 | { 23 | AppState.Title = "Material Components Catalog"; 24 | AppState.ToolbarIcon = "/images/ic_component_24px_white.svg"; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/Pages/_Imports.razor: -------------------------------------------------------------------------------- 1 | @layout MainLayout 2 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/Program.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Blazor.Hosting; 2 | 3 | namespace BlazorMaterial.Test 4 | { 5 | public class Program 6 | { 7 | public static void Main(string[] args) 8 | { 9 | CreateHostBuilder(args).Build().Run(); 10 | } 11 | 12 | public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) => 13 | BlazorWebAssemblyHost.CreateDefaultBuilder() 14 | .UseBlazorStartup(); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/Shared/MainLayout.razor: -------------------------------------------------------------------------------- 1 | @inherits LayoutComponentBase 2 | @inject IUriHelper UriHelper 3 | @inject AppState AppState 4 | 5 |
    6 | @if (showTopBar) 7 | { 8 | 9 | 10 | UriHelper.NavigateTo("/") ) /> 14 | 15 | 16 | } 17 |
    18 | @Body 19 |
    20 |
    21 | 22 | @functions{ 23 | private bool showTopBar = true; 24 | 25 | protected override void OnInit() 26 | { 27 | UriHelper.OnLocationChanged += (s, a) => 28 | { 29 | showTopBar = !a.Contains("drawer"); 30 | StateHasChanged(); 31 | }; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/Startup.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components.Builder; 2 | using Microsoft.Extensions.DependencyInjection; 3 | 4 | namespace BlazorMaterial.Test 5 | { 6 | public class Startup 7 | { 8 | public void ConfigureServices(IServiceCollection services) 9 | { 10 | services.AddSingleton(); 11 | } 12 | 13 | public void Configure(IComponentsApplicationBuilder app) 14 | { 15 | app.AddComponent("app"); 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using System.Net.Http 2 | @using Microsoft.AspNetCore.Components.Layouts 3 | @using Microsoft.AspNetCore.Components.Routing 4 | @using Microsoft.JSInterop 5 | @using BlazorMaterial.Test 6 | @using BlazorMaterial.Test.Shared 7 | @using BlazorMaterial 8 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/animal1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/animal2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/animal3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_button_24px.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_card_24px.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_chips_24dp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_component_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_component_24px_white.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_dialog_24px.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_list_24px.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_menu_24px.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_progress_activity.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_radio_button_24px.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_responsive_layout_24px.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_ripple_24px.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_selection_control_24px.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_shadow_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_side_navigation_24px.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_switch_24px.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_tabs_24px.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_text_field_24px.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_theme_24px.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_toast_24px.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_toolbar_24px.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/images/ic_typography_24px.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /test/BlazorMaterial.Test/wwwroot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BlazorMaterial Demos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Loading Blazor Material Components Demos... 17 | 18 | 19 | 20 | 21 | --------------------------------------------------------------------------------